Home > SURFACE > Change Thumb color style from a SurfaceListBox

Change Thumb color style from a SurfaceListBox

I have been ask recently in a post where to change the color and general style of surfaceListbox. Basically what will be affected if the ScrollViewer object within the SurfaceListbox. To do so the easiest way is as follow :

  1. Create an empty Surface project in VS2010
  2. Open your project withinh Expression Blend
  3. On your empty main windows add a SurfaceListbox control
  4. Right click on the Control and select EditTemplate -> Edit Copy
  5. You are now able to edit the template

The part in the template which is dedicated to the scroll bar is the following . Let’s take the sample of the vertical scrollbar

<!– ScrollBar Vert Thumb –>

<Style x:Key=”SurfaceScrollBarThumbStyle”

TargetType=”{x:Type s:SurfaceThumb}”

BasedOn=”{StaticResource SurfaceHitAreaBaseStyle}”>

<Setter Property=”Template”>

<Setter.Value>

<ControlTemplate TargetType=”{x:Type s:SurfaceThumb}”>

<ControlTemplate.Resources>

<Storyboard x:Key=”Touch”>

<DoubleAnimation Duration=”0:0:0.05″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Width”

To=”16″/>

<ThicknessAnimation Duration=”0:0:0.05″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Margin”

To=”-1,0,-1,0″ />

</Storyboard>

<Storyboard x:Key=”Release”>

<DoubleAnimation Duration=”0:0:0.1″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Width”

To=”14″/>

<ThicknessAnimation Duration=”0:0:0.1″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Margin”

To=”0,0,0,0″ />

</Storyboard>

</ControlTemplate.Resources>

<Grid x:Name=”Grid”

Background=”{TemplateBinding Background}”

SnapsToDevicePixels=”{TemplateBinding SnapsToDevicePixels}”>

<Rectangle x:Name=”Thumb”

Height=”Auto”

Width=”14″

HorizontalAlignment=”Stretch”

VerticalAlignment=”Stretch”

Fill=”{DynamicResource {x:Static s:SurfaceColors.ThumbEnabledBrushKey}}” />

</Grid>

<ControlTemplate.Triggers>

<Trigger Property=”s:TouchExtensions.AreAnyInputDevicesCapturedWithin”

Value=”True”>

<Trigger.EnterActions>

<BeginStoryboard Storyboard=”{StaticResource Touch}”/>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard Storyboard=”{StaticResource Release}”/>

</Trigger.ExitActions>

</Trigger>

<Trigger Property=”IsEnabled”

Value=”False”>

<Setter Property=”Fill”

TargetName=”Thumb”

Value=”{DynamicResource {x:Static s:SurfaceColors.ThumbDisabledBrushKey}}”/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

From the template snipet above we are interresting on the bold section of it.
The background property of the grid element define tha color of the scroll bar.
The Fill property of the Rectangle child element of the grid represent the Thumb color.

Simply define your own style brush and reference them for this 2 properties

Hope it helps


					
Advertisements
Categories: SURFACE Tags: , , ,
  1. Serge
    October 7, 2012 at 9:30 am

    Thanks for you comment. I try to maintain it based on my daily experience and other stuff I could share. To get known thatblog more, the best is to talk about it to your friend, collegues or even mentionn it on twitter..Thnaks so much

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: