Custom style for Slider causing it to turn blue when selected

669 views Asked by At

I have created the following style for the Slider control which basically allows me to hide the track, and set the thumb color.

    <SolidColorBrush x:Key="SliderThumb.Static.Foreground" Color="#FFE5E5E5"/>
    <SolidColorBrush x:Key="SliderThumb.MouseOver.Background" Color="#FFDCECFC"/>
    <SolidColorBrush x:Key="SliderThumb.MouseOver.Border" Color="#FF7Eb4EA"/>
    <SolidColorBrush x:Key="SliderThumb.Pressed.Background" Color="#FFDAECFC"/>
    <SolidColorBrush x:Key="SliderThumb.Pressed.Border" Color="#FF569DE5"/>
    <SolidColorBrush x:Key="SliderThumb.Disabled.Background" Color="#FFF0F0F0"/>
    <SolidColorBrush x:Key="SliderThumb.Disabled.Border" Color="#FFD9D9D9"/>
    <SolidColorBrush x:Key="SliderThumb.Static.Background" Color="#FFF0F0F0"/>
    <SolidColorBrush x:Key="SliderThumb.Static.Border" Color="#FFACACAC"/>
    <ControlTemplate x:Key="SliderThumbHorizontalTop" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Path x:Name="grip" Data="M 0,6 C0,6 5.5,0 5.5,0 5.5,0 11,6 11,6 11,6 11,18 11,18 11,18 0,18 0,18 0,18 0,6 0,6 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" SnapsToDevicePixels="True" Stroke="{StaticResource SliderThumb.Static.Border}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
        </Grid>

    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbHorizontalBottom" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Path x:Name="grip" Data="M 0,12 C0,12 5.5,18 5.5,18 5.5,18 11,12 11,12 11,12 11,0 11,0 11,0 0,0 0,0 0,0 0,12 0,12 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" SnapsToDevicePixels="True" Stroke="{StaticResource SliderThumb.Static.Border}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
        </Grid>

    </ControlTemplate>
    <SolidColorBrush x:Key="SliderThumb.Track.Border" Color="#FFD6D6D6"/>
    <SolidColorBrush x:Key="SliderThumb.Track.Background" Color="#FFE7EAEA"/>
    <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Path x:Name="grip" Data="M 0,12 C0,12 5.5,18 5.5,18 5.5,18 11,12 11,12 11,12 11,0 11,0 11,0 0,0 0,0 0,0 0,12 0,12 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" SnapsToDevicePixels="True" Stroke="{StaticResource SliderThumb.Static.Border}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
        </Grid>

    </ControlTemplate>
    <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TickBar x:Name="TopTick" Fill="{x:Null}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
                <TickBar x:Name="BottomTick" Fill="{x:Null}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
                <Border x:Name="TrackBackground" BorderBrush="{x:Null}" BorderThickness="1" Background="{x:Null}" Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">
                    <Canvas Margin="-6,-1">
                        <Rectangle x:Name="PART_SelectionRange" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Height="4.0" Visibility="Hidden"/>
                    </Canvas>
                </Border>
                <Track x:Name="PART_Track" Grid.Row="1">
                    <!--<Track.DecreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                    </Track.IncreaseRepeatButton>-->
                    <Track.Thumb>
                        <Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="11"/>
                    </Track.Thumb>
                </Track>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}"/>
                <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}"/>
                <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="Both">
                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsSelectionRangeEnabled" Value="true">
                <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="true">
                <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbVerticalLeft" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Path x:Name="grip" Data="M 6,11 C6,11 0,5.5 0,5.5 0,5.5 6,0 6,0 6,0 18,0 18,0 18,0 18,11 18,11 18,11 6,11 6,11 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>
            </Trigger>
            <Trigger Property="IsDragging" Value="true">
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbVerticalRight" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Path x:Name="grip" Data="M 12,11 C12,11 18,5.5 18,5.5 18,5.5 12,0 12,0 12,0 0,0 0,0 0,0 0,11 0,11 0,11 12,11 12,11 z" Fill="{StaticResource SliderThumb.Static.Background}" Stretch="Fill" Stroke="{StaticResource SliderThumb.Static.Border}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>
            </Trigger>
            <Trigger Property="IsDragging" Value="true">
                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbVerticalDefault" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Path x:Name="grip" Data="M0.5,0.5 L18.5,0.5 18.5,11.5 0.5,11.5z" Fill="{StaticResource SliderThumb.Static.Background}" Stretch="Fill" Stroke="{StaticResource SliderThumb.Static.Border}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>
            </Trigger>
            <Trigger Property="IsDragging" Value="true">
                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderVertical" TargetType="{x:Type Slider}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Margin="0,0,2,0" Placement="Left" Visibility="Collapsed" Width="4"/>
                <TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Margin="2,0,0,0" Placement="Right" Visibility="Collapsed" Width="4"/>
                <Border x:Name="TrackBackground" BorderBrush="{StaticResource SliderThumb.Track.Border}" BorderThickness="1" Background="{StaticResource SliderThumb.Track.Background}" Grid.Column="1" HorizontalAlignment="center" Margin="0,5" Width="4.0">
                    <Canvas Margin="-1,-6">
                        <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Visibility="Hidden" Width="4.0"/>
                    </Canvas>
                </Border>
                <Track x:Name="PART_Track" Grid.Column="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb x:Name="Thumb" Focusable="False" Height="11" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbVerticalDefault}" VerticalAlignment="Top" Width="18"/>
                    </Track.Thumb>
                </Track>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbVerticalLeft}"/>
                <Setter Property="Margin" TargetName="TrackBackground" Value="2,5,0,5"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbVerticalRight}"/>
                <Setter Property="Margin" TargetName="TrackBackground" Value="0,5,2,5"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="Both">
                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsSelectionRangeEnabled" Value="true">
                <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="true">
                <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style x:Key="HiddenTrackSlider" TargetType="{x:Type Slider}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource SliderThumb.Static.Foreground}"/>
        <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Template" Value="{StaticResource SliderVertical}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

It works as expected for the most part, except that the thumb turns blue when the control is selected either by mouse input or tabbing through. I have no idea how to get rid of this behavior and could use some help.

enter image description here This image shows that the "middle" slider is blue when clearely set to red in XAML (note this slider is currently selected by mouse)

1

There are 1 answers

0
mm8 On BEST ANSWER

Remove the IsKeyboardFocused triggers at the very bottom of the <ControlTemplate.Triggers> collections of the "SliderVertical" and "SliderHorizontal" templates:

<ControlTemplate x:Key="SliderVertical" TargetType="{x:Type Slider}">
    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Margin="0,0,2,0" Placement="Left" Visibility="Collapsed" Width="4"/>
            <TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Margin="2,0,0,0" Placement="Right" Visibility="Collapsed" Width="4"/>
            <Border x:Name="TrackBackground" BorderBrush="{StaticResource SliderThumb.Track.Border}" BorderThickness="1" Background="{StaticResource SliderThumb.Track.Background}" Grid.Column="1" HorizontalAlignment="center" Margin="0,5" Width="4.0">
                <Canvas Margin="-1,-6">
                    <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Visibility="Hidden" Width="4.0"/>
                </Canvas>
            </Border>
            <Track x:Name="PART_Track" Grid.Column="1">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb x:Name="Thumb" Focusable="False" Height="11" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbVerticalDefault}" VerticalAlignment="Top" Width="18"/>
                </Track.Thumb>
            </Track>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="TickPlacement" Value="TopLeft">
            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
            <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbVerticalLeft}"/>
            <Setter Property="Margin" TargetName="TrackBackground" Value="2,5,0,5"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="BottomRight">
            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
            <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbVerticalRight}"/>
            <Setter Property="Margin" TargetName="TrackBackground" Value="0,5,2,5"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="Both">
            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
        </Trigger>
        <Trigger Property="IsSelectionRangeEnabled" Value="true">
            <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
        </Trigger>
        <!--<Trigger Property="IsKeyboardFocused" Value="true">
                    <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
                </Trigger>-->
    </ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TickBar x:Name="TopTick" Fill="{x:Null}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
            <TickBar x:Name="BottomTick" Fill="{x:Null}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
            <Border x:Name="TrackBackground" BorderBrush="{x:Null}" BorderThickness="1" Background="{x:Null}" Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">
                <Canvas Margin="-6,-1">
                    <Rectangle x:Name="PART_SelectionRange" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Height="4.0" Visibility="Hidden"/>
                </Canvas>
            </Border>
            <Track x:Name="PART_Track" Grid.Row="1">
                <!--<Track.DecreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
                    </Track.IncreaseRepeatButton>-->
                <Track.Thumb>
                    <Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="11"/>
                </Track.Thumb>
            </Track>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="TickPlacement" Value="TopLeft">
            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
            <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}"/>
            <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="BottomRight">
            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
            <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}"/>
            <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="Both">
            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
        </Trigger>
        <Trigger Property="IsSelectionRangeEnabled" Value="true">
            <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
        </Trigger>
        <!--<Trigger Property="IsKeyboardFocused" Value="true">
                    <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
                </Trigger>-->
    </ControlTemplate.Triggers>
</ControlTemplate>