Geek asks and answers

How to change slider selection color in WPF

I have one slider. Is there a way to change the blue color of the selection area to another color (e.g. black)

enter image description here

+5
source share
2 answers

You can override the default value SystemColorsto change the color of the selection area.

    <Slider  Margin="0,10,0,0" Width="287" Value="6" IsSelectionRangeEnabled="True"  SelectionEnd="6" >
        <Slider.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black" />
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlDarkDarkBrushKey}" Color="Silver" />
        </Slider.Resources>
    </Slider>

Result:

enter image description here

+8
source

Overriding system colors will not work with custom templates.

"IsSelectionRangeEnabled" true, "SelectionStart" "SelectionEnd" . "SelectionEnd" "Value", , ...

<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Grid VerticalAlignment="Center">
                    <Border x:Name="borderBackground" Margin="6,0" Height="4" Background="Gray" />
                    <Canvas Margin="0,-4,0,0" VerticalAlignment="Center">
                        <Border x:Name="PART_SelectionRange" HorizontalAlignment="Left" Height="4" Background="{TemplateBinding Foreground}" />
                    </Canvas>
                    <Track x:Name="PART_Track">
                        <Track.Thumb>
                            <Thumb Width="10" Height="20" />
                        </Track.Thumb>
                    </Track>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsSelectionRangeEnabled" Value="True" />
    <Setter Property="SelectionStart" Value="{Binding Minimum, RelativeSource={RelativeSource Self}}" />
    <Setter Property="SelectionEnd" Value="{Binding Value, RelativeSource={RelativeSource Self}}" />
    <Setter Property="Foreground" Value="Red" />
</Style>
+8

More articles:


All Articles