WPF Slider控件无法随Height参数调整尺寸求助

问题原因 #

WPF默认的Slider控件模板中，轨道（Track）、滑块（Thumb）等内部元素的尺寸是固定的，仅设置Slider的Height/Width只会改变控件的布局占位空间，内部可视元素不会自动拉伸，导致视觉上紧贴边缘，且触摸区域仅局限于原始小范围，无法满足触摸应用需求。

解决步骤 #

1. 调整Slider的布局对齐方式 #

修改Slider的对齐属性，让它填满所在容器（比如Grid）：

<Grid>
    <!-- 移除HorizontalAlignment="Left"和VerticalAlignment="Top"，改为Stretch -->
    <Slider HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="155,447,0,0" />
</Grid>

2. 自定义Slider模板扩展触摸区域 #

重写Slider的ControlTemplate，让内部可交互元素填充整个控件空间，同时保留核心功能：

<Grid>
    <Slider HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="155,447,0,0">
        <Slider.Template>
            <ControlTemplate TargetType="{x:Type Slider}">
                <!-- 容器边框，可自定义样式 -->
                <Border Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Track x:Name="PART_Track">
                        <!-- 减小方向按钮：透明填充整个区域，扩大触摸范围 -->
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Command="{x:Static Slider.DecreaseLarge}" 
                                         Background="Transparent"/>
                        </Track.DecreaseRepeatButton>
                        <!-- 自定义滑块大小，适配触摸 -->
                        <Track.Thumb>
                            <Thumb Width="25" Height="25" Background="#FF666666" 
                                   BorderBrush="#FF000000" BorderThickness="1"/>
                        </Track.Thumb>
                        <!-- 增大方向按钮：透明填充整个区域 -->
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="{x:Static Slider.IncreaseLarge}" 
                                         Background="Transparent"/>
                        </Track.IncreaseRepeatButton>
                    </Track>
                </Border>
                <!-- 支持垂直方向Slider的旋转 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter TargetName="PART_Track" Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Slider.Template>
    </Slider>
</Grid>

3. 适配可调整大小的Grid #

上述模板中，Track会自动填充Slider的整个空间，而Slider通过HorizontalAlignment="Stretch"和VerticalAlignment="Stretch"随Grid尺寸变化自动适配，无需额外设置。

说明 #

• 避免使用RenderTransform缩放：这种方式仅视觉放大，布局空间和触摸区域仍为原始大小，且缩放易导致控件模糊，不适用于自适应场景。
• 可根据需求调整Thumb的大小、颜色，或修改Border的样式，匹配应用UI风格。

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