WPF: adding Style to a slider
- by user279244
Hi
I am using a Slider and putting a style element over it as follows... But however, I am not able to figure out why the style is not getting reflected. The RepeatButtons are not still visible.
Thanks in advance
<ResourceDictionary>
<LinearGradientBrush x:Key="Stroke_Gradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF6E6E6E" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.496"/>
<GradientStop Color="#FF6E6E6E" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ScrollBar_RepeatButtonStyle1" d:IsControlPart="True" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="#FF6E6E6E"/>
<Setter Property="BorderBrush" Value="#FFFFFFFF"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ImageBrush x:Key="zoomBkgrnd" TileMode="None" ImageSource="zoombg.png" Stretch="Uniform"/>
<Style x:Key="{x:Type Slider}" TargetType="{x:Type Slider}">
<Setter Property="Background" Value="{StaticResource zoomBkgrnd}"/>
<Setter Property="BorderBrush" Value="{StaticResource zoomBkgrnd}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid x:Name="GridRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- TickBar shows the ticks for Slider -->
<TickBar Visibility="Collapsed" x:Name="TopTick" Height="4" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource zoomBkgrnd}"/>
<Border Grid.Row="1" Margin="0" x:Name="Border" Height="4" Background="{StaticResource zoomBkgrnd}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
<!-- The Track lays out the repeat buttons and thumb -->
<Track Grid.Row="1" x:Name="PART_Track">
<Track.Thumb>
<Thumb Width="10" Height="20" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
</Track>
<TickBar Visibility="Collapsed" Grid.Row="2" x:Name="BottomTick" Height="4" SnapsToDevicePixels="True" Placement="Bottom" Fill="{TemplateBinding Foreground}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
<Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{StaticResource zoomBkgrnd}" TargetName="Border"/>
<Setter Property="BorderBrush" Value="{StaticResource zoomBkgrnd}" TargetName="Border"/>
</Trigger>
<!-- Use a rotation to create a Vertical Slider form the default Horizontal -->
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="GridRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<!-- Track rotates itself based on orientation so need to force it back -->
<Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
