Increase font size of text based on slider - wpf

So my requirement is quite simple. I will have a slider control and a textblock. So whenever the slider is increased or decreased the font size of the Textblock should change. I am able to accomplish this quite simple using MVVM pattern.
My problem is I need to show some text below the slider like small, medium, low. Well I was able to read some articles online that says this can be accomplished using a TickBar. But problem is there is no value changed event with TickBar so that I can trigger changes to the ViewModel.
Can someone give me an idea of accomplishing this using slider. I have read some style on google and heres what it does it displays numbers as soon as the slider changed. Can it be changed to text like small, medium, low. Thanks.
<Style
x:Key="SliderRepeatButton"
TargetType="RepeatButton">
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Setter
Property="IsTabStop"
Value="false" />
<Setter
Property="Focusable"
Value="false" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="RepeatButton">
<Border
Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderRepeatButton1"
TargetType="RepeatButton">
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="RepeatButton">
<Border
SnapsToDevicePixels="True"
Background="YellowGreen"
BorderThickness="1"
BorderBrush="YellowGreen"
Height="3" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderThumb"
TargetType="Thumb">
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Thumb">
<StackPanel
Orientation="Vertical">
<Path
Data="M 0 0 L 8 0 L 4 6 Z"
Stroke="YellowGreen"
Margin="-2,0,0,0"
StrokeThickness="2"
Fill="YellowGreen"></Path>
<Line
X1="0"
Y1="0"
X2="0"
Y2="7"
Stroke="Gray"
StrokeThickness="1"
Margin="2,0,0,0"
StrokeDashArray="1.5,1.5"></Line>
<TextBlock
Foreground="Black"
Margin="-2,30,0,0"
Text="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate
x:Key="Slider"
TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto"
MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<TickBar
x:Name="TopTick"
Fill="LightGray"
VerticalAlignment="Top"
SnapsToDevicePixels="True"
Grid.Row="0"
Placement="Top"
Height="5"
Visibility="Visible" />
<Border
BorderBrush="LightGray"
BorderThickness="0,0,0,1"></Border>
<Border
x:Name="TrackBackground"
VerticalAlignment="Center"
Margin="0,-10,0,0"
BorderBrush="Red"
Background="Red"
Height="3"
Grid.Row="1"
BorderThickness="1" />
<Track
Grid.Row="1"
x:Name="PART_Track"
Margin="0,-10,0,0">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderRepeatButton1}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource SliderThumb}"
Margin="0,-20,0,0" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderRepeatButton}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TextBlock
Text="0"
Grid.Row="1"
Margin="0,15,0,0"></TextBlock>
<TickBar
x:Name="BottomTick"
Fill="LightGray"
SnapsToDevicePixels="True"
Grid.Row="2"
Placement="Bottom"
Height="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="TickPlacement"
Value="TopLeft">
<Setter
TargetName="TopTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="TickPlacement"
Value="BottomRight">
<Setter
TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="TickPlacement"
Value="Both">
<Setter
TargetName="TopTick"
Property="Visibility"
Value="Visible" />
<Setter
TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style
x:Key="Horizontal_Slider"
TargetType="Slider">
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Style.Triggers>
<Trigger
Property="Orientation"
Value="Horizontal">
<Setter
Property="MinHeight"
Value="21" />
<Setter
Property="MinWidth"
Value="104" />
<Setter
Property="Template"
Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>

Related

WPF GridColumnHeader Background Property cannot be set

i'm trying to set the Background of the Column Header to a dark grey color (#6A767D) but it doesn´t work. Instead the Header Background is the Color of the AlternatingRowBackground Property. Maybe the Background is somehow overwritten? I'm not sure if you need more than just the xaml-code of the data grid. Any suggestions?
<DataGrid x:Name="DataGrid"
AlternatingRowBackground="#F8F8F8" Margin="40,60,40,45"
Grid.Column="2" Grid.ColumnSpan="10"
Grid.Row="1" Grid.RowSpan="12"
RowHeight="47"
ColumnHeaderHeight="47"
Padding="0"
FontSize="18"
ColumnWidth="Auto"
HorizontalScrollBarVisibility="Visible"
AutoGenerateColumns ="False"
GridLinesVisibility="All"
SelectionUnit="Cell"
ContextMenu="{StaticResource ctMenu}">
<DataGrid.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="AliceBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<EventSetter Event="MouseUp" Handler="Row_Click"/>
</Style>
</DataGrid.RowStyle>
Two issues:
You never actually assign the style to be used. I would recommend you define the style in the resources of your Window or whatever panel the DataGrid is placed in.
<Window.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="{TemplateBinding Background}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
You can then assign it to your DataGrid like this:
<DataGrid ColumnHeaderStyle="{StaticResource DatagridColumnHeaderStyle_Basic}"/>
Alternatively, just remove x:Key="DatagridColumnHeaderStyle_Basic", then you don't have to specify.
(fixed for you in the above code) you override your Background with AliceBlue:
<Grid Name="HedearGrid" Background="AliceBlue">
should be:
<Grid Name="HedearGrid" Background="{TemplateBinding Background">

How to change my slider line color for before and after

As you can see the color is same for values before and after.
This is my Style:
<Style x:Key="SpeedFocusVisualStyte">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle x:Name="FocusStyle"
StrokeDashArray="4 4"
RadiusX="5"
RadiusY="5"
Fill="Transparent"
Stroke="#99029cc7"
StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SpeedSliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Border Name="outerBorder"
Height="12"
Width="12"
Opacity="1"
BorderThickness="2"
CornerRadius="20"/>
<!--<TextBlock x:Name="sliderValue"
FontSize="10"
Foreground="#A0A0A0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontWeight="Bold"
Text="{Binding Tag, RelativeSource={RelativeSource AncestorType=Slider}}"
Margin="0,-1,0,0"/>-->
<!--Text="{Binding Value, RelativeSource={RelativeSource AncestorType=Slider}, StringFormat={}{0:N1}}"-->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="True">
<!--<Setter TargetName="sliderValue" Property="Foreground" Value="Gray"/>-->
<Setter TargetName="outerBorder" Property="Background" Value="Gray"/>
<Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter TargetName="sliderValue" Property="Foreground" Value="Black"/>-->
<Setter TargetName="outerBorder" Property="Background" Value="#A0A0A0"/>
<Setter TargetName="outerBorder" Property="BorderBrush" Value="#A0A0A0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<!--<Setter TargetName="sliderValue" Property="Foreground" Value="Gray"/>-->
<Setter TargetName="outerBorder" Property="Background" Value="{DynamicResource ApplicationTitleBarColor}"/>
<Setter TargetName="outerBorder" Property="BorderBrush" Value="{DynamicResource ApplicationTitleBarColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SpeedSliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Top" SnapsToDevicePixels="True"
Height="4" Margin="0,0,0,2" />
<Border x:Name="TrackBackground"
Grid.Row="1"
Margin="10,0"
BorderThickness="2"
BorderBrush="{DynamicResource LabelDisableForegroundColor}"
VerticalAlignment="Center"
Height="1" />
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SpeedSliderRepeatButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SpeedSliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource SpeedSliderThumbStyle}"/>
</Track.Thumb>
</Track>
<TickBar x:Name="BottomTick" Grid.Row="2" Visibility="Collapsed" Fill="LightGray" Placement="Bottom"
SnapsToDevicePixels="True" Height="4" Margin="0,2,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="TrackBackground" Property="BorderBrush" Value="{DynamicResource ListViewItemBorderBrushColor}"/>
</Trigger>
<!--<Trigger Property="IsFocused" Value="True">
<Setter TargetName="TrackBackground" Property="BorderBrush" Value="Orange" />
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Left" SnapsToDevicePixels="True"
Width="4" Margin="0,0,2,0" />
<Border x:Name="TrackBackground"
Grid.Column="1"
Margin="0,10"
BorderThickness="2"
BorderBrush="LightGray"
HorizontalAlignment="Center"
Width="4" />
<Track x:Name="PART_Track" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SpeedSliderRepeatButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SpeedSliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
<TickBar x:Name="BottomTick" Grid.Column="2"
Visibility="Visible"
Fill="LightGray"
Placement="Right"
Width="4"
Margin="2,0,0,0"
SnapsToDevicePixels="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I try to change values inside SpeedSliderRepeatButtonStyle but this did not helped.
Here is what you probably meant:
SpeedSliderRepeatButtonStyle:
<Style x:Key="SpeedSliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MaxWidth="15"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" MaxWidth="15"/>
</Grid.ColumnDefinitions>
<Grid x:Name="LeftButton" Grid.Column="0">
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=RepeatButton}}"
Value="Left">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<!--Template for left button-->
<Rectangle Fill="Red"/>
</Grid>
<Rectangle Grid.Column="1"
Height="{TemplateBinding FontSize}"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
StrokeThickness="0"
Fill="{TemplateBinding BorderBrush}"
/>
<Grid x:Name="RightColumn" Grid.Column="2">
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=RepeatButton}}"
Value="Right">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<!--Template for right button-->
<Rectangle Fill="Red"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
What I did here is I modified ControlTemplate to have 3 columns: Left Button, trackbar and Right Button, if you want to make visible Left or Right button just set RepeatButton Tag property to Left or Right, otherwaise left empty.
And Sample Horizontal Slider Control Template:
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Top" SnapsToDevicePixels="True" Height="4" Margin="0,0,0,2" />
<Border x:Name="TrackBackground"
Grid.Row="1"
Margin="10,0"
BorderThickness="0"
BorderBrush="{DynamicResource LabelDisableForegroundColor}"
VerticalAlignment="Center"
Height="1" />
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" BorderBrush="Gray" BorderThickness="5" FontSize="5" Style="{StaticResource SpeedSliderRepeatButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" BorderBrush="Gray" BorderThickness="2" FontSize="2" Tag="Right" Style="{StaticResource SpeedSliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource SpeedSliderThumbStyle}"/>
</Track.Thumb>
</Track>
<TickBar x:Name="BottomTick" Grid.Row="2" Visibility="Collapsed" Fill="LightGray" Placement="Bottom" SnapsToDevicePixels="True" Height="4" Margin="0,2,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="TrackBackground" Property="BorderBrush" Value="{DynamicResource ListViewItemBorderBrushColor}"/>
</Trigger>
<!--<Trigger Property="IsFocused" Value="True">
<Setter TargetName="TrackBackground" Property="BorderBrush" Value="Orange" />
</Trigger>-->
</ControlTemplate.Triggers>
What's important i set BorderThicknes of your HorizontalSlider to 0, because there is no more one border, now you have 2: left and right border.
If for example you want to change color of slider on IsEnabled, you can do it like:
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" BorderThickness="2" FontSize="2" Tag="Right">
<RepeatButton.Style>
<Style TargetType="RepeatButton" BasedOn="{StaticResource SpeedSliderRepeatButtonStyle}">
<Setter Property="BorderBrush" Value="#FF666666"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="BorderBrush" Value="#FF222222"/>
</Trigger>
</Style.Triggers>
</Style>
</RepeatButton.Style>
</RepeatButton>
You can also make it in SpeedSliderRepeatButtonStyle

XAML code without resources and templates possible?

I found an example (the first one) for a slider,
which defines also a track with thumb.
Is it possible to recode it without resources and templates?
Thank you for your comments.
Erhy
I have done it.
Here the XAML code without template and style references
for the slider with track and thumb
<Slider x:Name="slidExample"
VerticalAlignment="Center" TickFrequency="37.5"
Minimum="0" Maximum="600" Value="500" Width="300" Margin="50,0,50,0"
SnapsToDevicePixels="true"
OverridesDefaultStyle="true"
IsTabStop="false"
Focusable="false"
>
<Slider.Style>
<Style TargetType="Slider">
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
</Trigger>
</Style.Triggers>
</Style>
</Slider.Style>
<Slider.Template>
<ControlTemplate>
<Grid x:Name="GridOfslidExample">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TickBar x:Name="TopTickOfslidExample" Fill="LightGray" VerticalAlignment="Top"
SnapsToDevicePixels="True" Grid.Row="0" Placement="Top" Height="5"
Visibility="Visible">
</TickBar>
<Border BorderBrush="LightGray" BorderThickness="0,0,0,1" ></Border>
<Border x:Name="TrackBackground" VerticalAlignment="Center" Margin="0,-10,0,0" BorderBrush="Red" Background="Red" Height="3" Grid.Row="1" BorderThickness="1"/>
<Track Grid.Row="1" x:Name="PART_Track" Margin="0,-10,0,0" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge" >
<RepeatButton.Style>
<Style TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="YellowGreen" BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="ThumbOfslidExample">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<StackPanel Orientation="Vertical">
<Path Data="M 0 0 L 8 0 L 4 6 Z" Stroke="YellowGreen" Margin="-2,0,0,0" StrokeThickness="2" Fill="YellowGreen"></Path>
<Line X1="0" Y1="0" X2="0" Y2="7" Stroke="Gray" StrokeThickness="1" Margin="2,0,0,0" StrokeDashArray="1.5,1.5"></Line>
<TextBlock Foreground="Black" Margin="-2,30,0,0" Text="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge" >
<RepeatButton.Style>
<Style TargetType="RepeatButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<TextBlock Text="0" Grid.Row="1" Margin="0,15,0,0"></TextBlock>
<TickBar x:Name="BottomTickOfslidExample" Fill="LightGray" SnapsToDevicePixels="True" Grid.Row="2" Placement="Bottom" Height="4" Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Slider.TickPlacement" Value="TopLeft">
<Setter TargetName="TopTickOfslidExample" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="Slider.TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTickOfslidExample" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="Slider.TickPlacement" Value="Both">
<Setter TargetName="TopTickOfslidExample" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTickOfslidExample" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Slider.Template>
</Slider>
I think I have fixed it.
The reason of missings commands of RepeatButton was the textfield in thumb.
Its name in the new source is "DisplaysValueInThumb".
I had to add a converter, because the value of the slider produce many decimal places, which hide the touch area of the repeat button.
Because I was unable to format the source correctly
you find the source here.
Erhy

Create slider with different before / after thumb background color

I'm currently working on a media player. I'd like to create a slider like the one on this screen shot:
What I've got up to now is this one:
I'm currently struggeling with the light bar before the thumb. It changes it's length according to the thumb position. How can I implement this in WPF? Or should I try using a progressbar?
Atm, I have this code:
<LinearGradientBrush x:Key="SliderThumbGradient" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#f7f7f7"/>
<GradientStop Offset="1" Color="#bcbcbc"/>
</LinearGradientBrush>
<Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="14"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse
Name="Ellipse"
Fill="{DynamicResource SliderThumbGradient}"
Stroke="#404040"
StrokeThickness="1" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Ellipse" Property="Fill" Value="#808080"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Ellipse" Property="Fill" Value="#EEEEEE"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar
Name="TopTick"
SnapsToDevicePixels="True"
Placement="Top"
Fill="#404040"
Height="4"
Visibility="Collapsed" />
<Border
Name="TrackBackground"
Margin="0"
CornerRadius="6"
Height="12"
Grid.Row="1"
Background="#0a0a0a"
BorderBrush="#121212"
BorderThickness="1" />
<Track Grid.Row="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderButtonStyle}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderButtonStyle}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar
Name="BottomTick"
SnapsToDevicePixels="True"
Grid.Row="2"
Fill="{TemplateBinding Foreground}"
Placement="Bottom"
Height="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TickBar
Name="TopTick"
SnapsToDevicePixels="True"
Placement="Left"
Fill="#404040"
Width="4"
Visibility="Collapsed" />
<Border
Name="TrackBackground"
Margin="0"
CornerRadius="2"
Width="4"
Grid.Column="1"
Background="#E0E0E0"
BorderBrush="#404040"
BorderThickness="1" />
<Track Grid.Column="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderButtonStyle}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderButtonStyle}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar
Name="BottomTick"
SnapsToDevicePixels="True"
Grid.Column="2"
Fill="{TemplateBinding Foreground}"
Placement="Right"
Width="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinWidth" Value="104" />
<Setter Property="MinHeight" Value="21" />
<Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
The object that is changing its length on the left side is the DecreaseRepeatButton. You can implement the different color by creating a Style for it. Not sure how to get the concave edge on the right side though.
i.e.
<Style x:Key="DecreaseSliderButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Height="12" Background="DimGray" CornerRadius="6" Margin="0,0,-12,0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and in your ControlTemplate:
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource DecreaseSliderButtonStyle}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>

Why is my custom Slider not visible at design time?

I have used this page from MSDN to apply a custom style to my slider control. It works perfectly at run-time as shown in the image below, but at design time, the entire slider control is not visible (hidden/collapsed??). How can I get the slider to be visible at design time?
Slider at run-time:
The XAML showing my implementation of the custom slider on my WPF window:
<Slider Grid.Column="1"
Style="{StaticResource sldGradeability}"
Orientation="Vertical"
Name="sldGrade" Maximum="90" Minimum="0"
SmallChange="1" LargeChange="10"
Margin="5,20,10,20"/>
The XAML for my custom slider style:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--<SnippetSlider>-->
<Style x:Key="SliderButtonStyle"
TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="IsTabStop"
Value="false" />
<Setter Property="Focusable"
Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--<SnippetThumb>-->
<Style x:Key="SliderThumbStyle"
TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Height"
Value="16" />
<Setter Property="Width"
Value="25" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Polygon x:Name="polyThumb"
Cursor="Hand"
StrokeThickness="1"
Points="0,8 6,16 24,16 24,0 6,0"
Stroke="{StaticResource brsDarkGrayText}"
Fill="{StaticResource ButtonNormal}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="polyThumb"
Property="Fill"
Value="{StaticResource ButtonOver}" />
</Trigger>
<Trigger Property="IsDragging"
Value="True">
<Setter TargetName="polyThumb"
Property="Fill"
Value="{StaticResource ButtonDown}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Template when the orientation of the Slider is Vertical.-->
<ControlTemplate x:Key="VerticalSlider"
TargetType="{x:Type Slider}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="90°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="1" Text="80°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="2" Text="70°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="3" Text="60°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="4" Text="50°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="5" Text="40°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="6" Text="30°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="7" Text="20°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="8" Text="10°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="9" Text="0°" Style="{StaticResource SimpleTextRight}"/>
</Grid>
<TickBar Grid.Column="1" x:Name="TopTick"
SnapsToDevicePixels="True"
Placement="Left"
Width="5"
Visibility="Visible"
TickFrequency="10"
Fill="{StaticResource brsDarkGrayText}"/>
<Border x:Name="TrackBackground"
Margin="0"
CornerRadius="2"
Width="5"
Grid.Column="2"
BorderThickness="0">
<Border.Background>
<LinearGradientBrush EndPoint="1,0"
StartPoint="0,0">
<GradientStop Color="{StaticResource LightGrayGradient}"
Offset="0" />
<GradientStop Color="{StaticResource MediumGrayGradient}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Track Grid.Column="2"
x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar x:Name="BottomTick"
SnapsToDevicePixels="True"
Grid.Column="3"
Fill="{StaticResource brsDarkGrayText}"
Placement="Right"
Width="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement"
Value="TopLeft">
<Setter TargetName="TopTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="BottomRight">
<Setter TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="Both">
<Setter TargetName="TopTick"
Property="Visibility"
Value="Visible" />
<Setter TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--Slider Control-->
<Style x:Key="sldGradeability"
TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Visibility"
Value="Visible"/>
<Style.Triggers>
<Trigger Property="Orientation"
Value="Vertical">
<Setter Property="MinWidth"
Value="21" />
<Setter Property="MinHeight"
Value="104" />
<Setter Property="Template"
Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
<!--</SnippetSlider>-->
</ResourceDictionary>
It shows up fine in Blend 4 so I think this is a bug in the VS2010 designer somehow. Anyway, the problem seems to be the Orientation is Vertical trigger.
<Style x:Key="sldGradeability" TargetType="{x:Type Slider}">
<!-- ... -->
<Style.Triggers>
<!-- ... -->
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
Moving the Template setter up among the Setters and the Slider shows up in the designer
<Style x:Key="sldGradeability" TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Template" Value="{StaticResource VerticalSlider}"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
</Trigger>
</Style.Triggers>
</Style>
Moving the setter may not be what you want do here but maybe you can make use of it somehow

Resources