On windows Phone, you can easily use templates to change the default UI for most of the controls. In this post, I am giving an example of how to change the color of a scroll bar in a list box. The template I provided here is extensive and can use used to change many things in the ListBox. In the below ControlTemplate for the ListBox, notice the ScrollBar’s and the BackGround property for the ScrollBars, Changing this to you preferred color will give the scroll bar in what ever color you like.
<ListBox x:Name="myListBox">
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="VerticalScrollBar"/>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/> </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ScrollContentPresenter x:Name="ScrollContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"/>
<ScrollBar x:Name="VerticalScrollBar" Background="Blue"
HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False"
IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0"
Opacity="0" Orientation="Vertical"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{TemplateBinding VerticalOffset}"
ViewportSize="{TemplateBinding ViewportHeight}"
VerticalAlignment="Stretch" Width="5"/>
<ScrollBar x:Name="HorizontalScrollBar" Background="Blue"
HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False"
IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0"
Opacity="0" Orientation="Horizontal"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</Border>
</ControlTemplate>
</ListBox>