C# WPF中Slider椭圆Thumb上方TextBlock宽度变化引发Grid变形如何解决

问题原因 #

Thumb控件的根布局Grid尺寸会被内部更宽的TextBlock撑开，Slider的Track计算Thumb滑动位置时会使用Thumb的实际宽度做偏移计算，最终导致滑块位置偏移、进度条显示异常。

解决方案 #

固定Thumb根布局的尺寸等于椭圆的尺寸，同时用嵌套Grid承载TextBlock，利用外层Grid尺寸固定后，内部元素尺寸不会反向撑开父容器的特性，实现宽文本正常显示且不影响Thumb的实际滑动逻辑。
修改后的SliderThumb样式代码如下：

<Style x:Key="SliderThumb" TargetType="Thumb">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <!-- 根Grid固定宽高等于椭圆尺寸，彻底避免被内部元素撑开 -->
                <Grid Width="30" Height="30" Background="Transparent">
                    <Ellipse Fill="Blue" Height="30" Width="30"/> 
                    <!-- 嵌套Grid宽度设为足够容纳最长文本，水平居中，不会影响父Grid尺寸 -->
                    <Grid Width="200" HorizontalAlignment="Center" Margin="0,-80,0,0">
                        <TextBlock 
                            TextAlignment="Center"
                            Background="Transparent"
                            Foreground="Black"
                            FontSize="24">
                            <Run Text="{Binding Value,StringFormat={}{0:F2}, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"/>
                            <Run Text="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"/>
                        </TextBlock>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

你可以根据实际最长文本的宽度调整嵌套Grid的Width属性值，只要大于等于你需要显示的最大文本宽度即可。

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