Question

我想创建一个自定义滑块，它在拇指前后有不同的颜色 - 我已经成功实现了这一目标。问题是，这就是它的样子：click。

我想要实现的目标是将灰色边框隐藏在拇指下方 - 中间。但是，当我尝试在DecreaseSliderButtonStyle边框中设置负边距时，它会与拇指重叠。

有一个代码：http://pastebin.com/5pcqHmDX（我认为在pastebin上XAML格式看起来更好）

提前致谢。

Answer 1

尝试以下风格：

<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="18" Background="DimGray" CornerRadius="0,6,6,0" Margin="0,0,0,0" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>




<Style x:Key="SliderThumbStyle" TargetType="Thumb">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="false"/>
    <Setter Property="Height" Value="18"/>
    <Setter Property="Width" Value="18"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Grid>
                    <Border CornerRadius="9,0,0,9"
                            Background="DimGray"/>
                    <Ellipse Stroke="Black"
                             StrokeThickness="1"
                             Name="Ellipse"
                             Fill="Orange"></Ellipse>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果您在拇指和灰色区域之间看到接缝线，请将此setter添加到滑块样式：

<Setter Property="UseLayoutRounding" Value="True"/>

当值非常接近Maximum时，您可能需要处理拇指边框的圆角半径以使其圆整。

在拇指之前/之后用不同颜色控制模板滑块

1 个答案: