WPF自定义Slider如何实现Thumb滑块头下方绑定显示当前数值

问题原因 #

你当前的代码核心问题有两个：

1. 自定义Thumb加入下方文本后，整体高度变大，导致滑块圆形没有和轨道居中对齐
2. Slider的模板没有给下方的数值文本预留足够的渲染空间，文本容易被截断

具体修改步骤 #

1. 调整Thumb样式，对齐滑块圆形与轨道，格式化数值显示

修改Style_SliderThumb的控件模板，给外层容器添加上边距负偏移，让22px直径的圆形中心正好和轨道中心对齐，同时给Value绑定添加字符串格式化避免显示多余小数：

<Style x:Key="Style_SliderThumb"
       TargetType="{x:Type Thumb}">
    <Style.Setters>
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="OverridesDefaultStyle"
                Value="True" />
        <!-- 新增：设置Thumb的垂直对齐为居中 -->
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <!-- 新增负上偏移，让圆形中心对齐轨道，偏移量为圆形半径11 -->
                    <StackPanel Orientation="Vertical" Margin="0,-11,0,0">
                        <Grid>
                            <!-- Big point -->
                            <Ellipse Panel.ZIndex="0"
                                     Fill="{DynamicResource Brush_Primary}"
                                     StrokeThickness="0"
                                     Height="22"
                                     Width="22" />

                            <!-- Center point -->
                            <Ellipse Panel.ZIndex="1"
                                     Fill="{DynamicResource Brush_Background_Surface}"
                                     StrokeThickness="0"
                                     Height="6"
                                     Width="6" />

                            <Ellipse Panel.ZIndex="2"
                                     Fill="{DynamicResource Brush_Background_Primary}"
                                     StrokeThickness="0"
                                     Height="6"
                                     Width="6" />

                            <Ellipse Panel.ZIndex="3"
                                     Fill="{DynamicResource Brush_Surface_Overlay_08dp}"
                                     StrokeThickness="0"
                                     Height="6"
                                     Width="6" />

                        </Grid>
                        <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Slider}, Path=Value, StringFormat={}{0:F0}}"
                                   FontSize="14"
                                   FontWeight="SemiBold"
                                   FontFamily="{DynamicResource Font_Montserrat}"
                                   Foreground="{DynamicResource Brush_OnBackground_OnSurface_High}"
                                   Background="Transparent"
                                   TextAlignment="Center"
                                   Margin="0,7,0,0"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Top" />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

2. 调整水平Slider模板，预留文本显示空间

修改HorizontalSlider的网格行定义，给滑块上方、文本下方预留空间，避免内容被截断，同时给外层容器加左右内边距，防止滑块到两端时数值被裁剪：

<!--Template when the orientation of the Slider is Horizontal.-->
<ControlTemplate x:Key="HorizontalSlider"
                 TargetType="{x:Type Slider}">
    <!-- 新增左右Padding，值为滑块半径11，避免两端数值被裁 -->
    <Grid Padding="11,0">
        <Grid.RowDefinitions>
            <!-- 第一行预留滑块上半部分高度11 -->
            <RowDefinition Height="11" />
            <!-- 第二行固定为轨道高度4 -->
            <RowDefinition Height="4" />
            <!-- 第三行自动高度，放数值文本 -->
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TickBar x:Name="TopTick"
                 SnapsToDevicePixels="True"
                 Placement="Top"
                 Height="4"
                 Visibility="Collapsed"
                 Fill="{DynamicResource Brush_OnBackground_OnSurface_Medium}" />

        <Border x:Name="TrackBackground"
                Margin="8,0"
                CornerRadius="2"
                Height="4"
                Grid.Row="1"
                BorderThickness="0"
                Background="{DynamicResource Brush_OnBackground_OnSurface_Medium}" />

        <Track Grid.Row="1"
               x:Name="PART_Track">

            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource Style_SliderLeftButton}"
                              Command="Slider.DecreaseLarge" />
            </Track.DecreaseRepeatButton>

            <Track.Thumb>
                <Thumb Style="{StaticResource Style_SliderThumb}" />
            </Track.Thumb>

            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource Style_SliderRightButton}"
                              Command="Slider.IncreaseLarge" />
            </Track.IncreaseRepeatButton>
        </Track>

        <TickBar x: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>

3. 可选调整

如果使用Slider时出现下方文本被截断的情况，给Slider设置MinHeight="50"即可，确保有足够高度渲染文本。

内容的提问来源于stack exchange，提问作者aLeeTheY