CODEWITHSUNDEEP
wpfslideroverlap
el-nino
el-nino

Reputation: 399

WPF Slider Thumb overlap RepeatButton

I have a Style for a Slider that makes it look like this (without the red circle):

enter image description here

The problem is, that the Thumb is not overlapping the RepeatButton and therefore I see those white edges (red circle). If I have no CornerRadius on the right side of the RepeatButton the effect is much smaller but still present because the Thumb is a circle.

How can I prevent that?

Heres the Code:

<Style x:Key="SliderButtonStyleDec" 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="{StaticResource ControlHighlightBackgroundBrush}" CornerRadius="4" Height="10"/>
            </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="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <StackPanel>
                    <Ellipse Height="30" Width="30" Fill="{StaticResource ControlHighlightBackgroundBrush}"></Ellipse>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
        </Setter>
    </Style>

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
        </Border>
        <Track Grid.Row="1" x:Name="PART_Track">
            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Style="{StaticResource SliderThumbStyle}" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge" />
            </Track.IncreaseRepeatButton>
        </Track>
    </Grid>
</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>

Upvotes: 2

Views: 905

Answers (1)

gomi42
gomi42

Reputation: 2519

You can work with a negative margin and move the thumb to the end:

    <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
            </Border>
            <Track Grid.Row="1" x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" Margin="0,0,-10,0"/>
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge"  Margin="-10,0,0,0"/>
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumbStyle}" />
                </Track.Thumb>
            </Track>
        </Grid>
    </ControlTemplate>

Upvotes: 2

Related Questions