如何在单一Style中同时适配垂直与水平ScrollBar

你的问题根源在于两个样式分别硬编码了滚动条的尺寸、方向和命令，导致无法同时适配垂直和水平场景。可以通过利用Orientation属性的触发器，在同一个Style中动态切换不同方向的配置，实现单一样式适配两种滚动条。

合并后的完整代码 #

<!-- 共用的Thumb样式，只需定义一次 -->
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Grid x:Name="Grid">
                    <Rectangle HorizontalAlignment="Stretch"
                               VerticalAlignment="Stretch"
                               Width="Auto"
                               Height="Auto"
                               Fill="Transparent" />
                    <Border x:Name="Rectangle1"
                            CornerRadius="5"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Width="Auto"
                            Height="Auto"
                            Background="{TemplateBinding Background}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- 适配垂直/水平的通用ScrollBar样式 -->
<Style TargetType="{x:Type ScrollBar}">
    <Setter Property="Foreground" Value="LightGray" />
    <Setter Property="Background" Value="Transparent" />
    <!-- 默认基础设置，后续通过触发器覆盖 -->
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Height" Value="Auto" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid x:Name="GridRoot">
                    <!-- 垂直滚动条用行布局，水平用列布局 -->
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Track x:Name="PART_Track"
                           Focusable="False">
                        <Track.Thumb>
                            <Thumb x:Name="Thumb"
                                   Background="{TemplateBinding Foreground}"
                                   Style="{DynamicResource ScrollThumbs}" />
                        </Track.Thumb>
                        <!-- 默认按钮，后续通过触发器切换命令 -->
                        <Track.IncreaseRepeatButton>
                            <RepeatButton x:Name="IncreaseBtn"
                                          Opacity="0"
                                          Focusable="False" />
                        </Track.IncreaseRepeatButton>
                        <Track.DecreaseRepeatButton>
                            <RepeatButton x:Name="DecreaseBtn"
                                          Opacity="0"
                                          Focusable="False" />
                        </Track.DecreaseRepeatButton>
                    </Track>
                </Grid>

                <ControlTemplate.Triggers>
                    <!-- 垂直滚动条的配置 -->
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="Width" Value="10" />
                        <Setter Property="Height" Value="Auto" />
                        <Setter TargetName="PART_Track" Property="IsDirectionReversed" Value="True" />
                        <Setter TargetName="IncreaseBtn" Property="Command" Value="{x:Static ScrollBar.PageDownCommand}" />
                        <Setter TargetName="DecreaseBtn" Property="Command" Value="{x:Static ScrollBar.PageUpCommand}" />
                    </Trigger>
                    <!-- 水平滚动条的配置 -->
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter Property="Height" Value="10" />
                        <Setter Property="Width" Value="Auto" />
                        <Setter TargetName="PART_Track" Property="IsDirectionReversed" Value="False" />
                        <Setter TargetName="IncreaseBtn" Property="Command" Value="{x:Static ScrollBar.PageRightCommand}" />
                        <Setter TargetName="DecreaseBtn" Property="Command" Value="{x:Static ScrollBar.PageLeftCommand}" />
                    </Trigger>
                    <!-- Thumb交互状态 -->
                    <Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
                        <Setter TargetName="Thumb" Property="Background" Value="DarkGray" />
                    </Trigger>
                    <Trigger SourceName="Thumb" Property="IsDragging" Value="True">
                        <Setter TargetName="Thumb" Property="Background" Value="DimGray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键修改说明 #

• 共用Thumb样式：两个原始样式中的ScrollThumbs完全一致，只需保留一份即可。
• 移除硬编码尺寸：不再固定滚动条的宽/高，而是通过触发器根据Orientation动态设置（垂直时宽10，水平时高10）。
• 动态切换命令与方向：利用触发器针对垂直/水平方向，分别设置Track的IsDirectionReversed属性和按钮的滚动命令。
• 自适应布局：Grid同时定义行和列布局，确保滚动条在不同方向下都能自适应容器尺寸（原水平样式硬编码的690宽度改为Auto，避免限制容器宽度）。

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