Template Parts : Template « UI Controls « Silverlight

1. Silverlight
2. UI Controls
3. Template

Template Parts

  

<UserControl x:Class='SilverlightApplication3.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>
  <UserControl.Resources>
    <Style TargetType="Slider" x:Key="SliderStyle" >
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Slider">
              <StackPanel x:Name="HorizontalTemplate">
                <Rectangle Stroke="SteelBlue"/>
                <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" />
                <Thumb x:Name="HorizontalThumb">                  
                  <Thumb.Template>
                    <ControlTemplate TargetType="Thumb">
                      <StackPanel>
                        <VisualStateManager.VisualStateGroups>
                          <VisualStateGroup x:Name="CommonStates">
                          <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="Thumb"
                             Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.1" />
                             </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                             <Storyboard>
                              <ColorAnimation Storyboard.TargetName="ThumbBrush"
                             Storyboard.TargetProperty="Color" To="Yellow" Duration="0" />
                             </Storyboard>
                            </VisualState>
                            
                            <VisualState x:Name="Normal">
                            <Storyboard>
                              <DoubleAnimation Storyboard.TargetName="Thumb"
                             Storyboard.TargetProperty="Opacity" Duration="0" />
                             </Storyboard>
                            </VisualState>
                          </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                                            
                      <Ellipse x:Name="Thumb" Opacity="0.3" Stroke="SteelBlue" StrokeThickness="3" Stretch="Fill">
                          <Ellipse.Fill>
                            <SolidColorBrush x:Name="ThumbBrush" Color="AliceBlue" ></SolidColorBrush>
                          </Ellipse.Fill>
                      </Ellipse>
                      </StackPanel>
                    </ControlTemplate>
                  </Thumb.Template>
                </Thumb>
                <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Background="Transparent" Opacity="0"  IsTabStop="False" />
              </StackPanel>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

  </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
    <Slider Style="{StaticResource SliderStyle}"></Slider>
  </Grid>
</UserControl>

   
    
  

Related examples in the same category

1.	Template States
2.	Changing the look of a Button through a Template
3.	Template Binding