如何以单一样式更改垂直和水平滚动条

Question

我正在为 ScrollBar 开发新设计。我无法在设计中使水平和垂直滚动正常配合。我不会同时申请两者。

下面的模板适用于肖像，但不适用于风景。

                    <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>

                <Style TargetType="{x:Type ScrollBar}">
                    <Setter Property="Foreground"
                            Value="LightGray" />
                    <Setter Property="Background"
                            Value="Transparent" />
                    <Setter Property="Width"
                            Value="10" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ScrollBar}">
                                <Grid x:Name="GridRoot"
                                      Width="10">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.00001*" />
                                    </Grid.RowDefinitions>

                                    <Track x:Name="PART_Track"
                                           Grid.Row="0"
                                           IsDirectionReversed="true"
                                           Focusable="false">
                                        <Track.Thumb>
                                            <Thumb x:Name="Thumb"
                                                   Background="{TemplateBinding Foreground}"
                                                   Style="{DynamicResource ScrollThumbs}" />
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton x:Name="PageUp"
                                                          Command="ScrollBar.PageDownCommand"
                                                          Opacity="0"
                                                          Focusable="false" />
                                        </Track.IncreaseRepeatButton>
                                        <Track.DecreaseRepeatButton>
                                            <RepeatButton x:Name="PageDown"
                                                          Command="ScrollBar.PageUpCommand"
                                                          Opacity="0"
                                                          Focusable="false" />
                                        </Track.DecreaseRepeatButton>
                                    </Track>
                                </Grid>

                                <ControlTemplate.Triggers>
                                    <Trigger SourceName="Thumb"
                                             Property="IsMouseOver"
                                             Value="true">
                                        <Setter Value="DarkGray"
                                                TargetName="Thumb"
                                                Property="Background" />
                                    </Trigger>
                                    <Trigger SourceName="Thumb"
                                             Property="IsDragging"
                                             Value="true">
                                        <Setter Value="DimGray"
                                                TargetName="Thumb"
                                                Property="Background" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

下面的代码适用于横向，但不适用于纵向。

       <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>

   <Style x:Key="{x:Type ScrollBar}"
          TargetType="{x:Type ScrollBar}">
       <Setter Property="Foreground"
               Value="LightGray" />
       <Setter Property="Background"
               Value="Transparent" />
       <Setter Property="Width"
               Value="690" />
       <Setter Property="Height"
               Value="10" />
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="{x:Type ScrollBar}">
                   <Grid x:Name="GridRoot"
                         Width="690"
                         Height="10">
                       <Grid.RowDefinitions>
                           <RowDefinition Height="0.00001*" />
                       </Grid.RowDefinitions>

                       <Track x:Name="PART_Track"
                              Grid.Row="0"
                              IsDirectionReversed="False"
                              Focusable="True">
                           <Track.Thumb>
                               <Thumb x:Name="Thumb"
                                      Background="{TemplateBinding Foreground}"
                                      Style="{DynamicResource ScrollThumbs}" />
                           </Track.Thumb>
                           <Track.IncreaseRepeatButton>
                               <RepeatButton x:Name="PageRight"
                                             Command="ScrollBar.PageRightCommand"
                                             Opacity="0"
                                             Focusable="false" />
                           </Track.IncreaseRepeatButton>
                           <Track.DecreaseRepeatButton>
                               <RepeatButton x:Name="PageLeft"
                                             Command="ScrollBar.PageLeftCommand"
                                             Opacity="0"
                                             Focusable="false" />
                           </Track.DecreaseRepeatButton>
                       </Track>
                   </Grid>

                   <ControlTemplate.Triggers>
                       <Trigger SourceName="Thumb"
                                Property="IsMouseOver"
                                Value="true">
                           <Setter Value="DarkGray"
                                   TargetName="Thumb"
                                   Property="Background" />
                       </Trigger>
                       <Trigger SourceName="Thumb"
                                Property="IsDragging"
                                Value="true">
                           <Setter Value="DimGray"
                                   TargetName="Thumb"
                                   Property="Background" />
                       </Trigger>
                   </ControlTemplate.Triggers>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

如何将两者结合起来？

Answer 1

您可以使用方向触发器来做到这一点。设置常规样式 ControlTemplate，然后在触发器中将 ControlTemplate 覆盖为水平样式。 这是示例代码（不是我的，但经过测试）

    <Style TargetType="{x:Type ScrollBar}">
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
    <Setter Property="Width" Value="14"/>
    <Setter Property="Margin" Value="-14 0 0 0" />
    <Setter Property="MinWidth" Value="{Binding Width, RelativeSource={RelativeSource Self}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid x:Name="Bg" SnapsToDevicePixels="true" Background="Transparent">

                    <Border Padding="0 4">
                        <Track x:Name="PART_Track"
                           IsDirectionReversed="true"
                           IsEnabled="{TemplateBinding IsMouseOver}"
                           Width="6"
                           HorizontalAlignment="Center">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Opacity="0" Command="{x:Static ScrollBar.PageUpCommand}" />
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Opacity="0" Command="{x:Static ScrollBar.PageDownCommand}" />
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" />
                            </Track.Thumb>
                        </Track>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="MinWidth" Value="0"/>
            <Setter Property="Height" Value="14"/>
            <Setter Property="MinHeight" Value="{Binding Height, RelativeSource={RelativeSource Self}}"/>
            <Setter Property="Margin" Value="0 -14 0 0" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Grid x:Name="Bg" SnapsToDevicePixels="true">
                            <Track x:Name="PART_Track"
                                IsEnabled="{TemplateBinding IsMouseOver}"
                                Height="6"
                                   >
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Opacity="0" Command="{x:Static ScrollBar.PageLeftCommand}"/>
                                </Track.DecreaseRepeatButton>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Opacity="0" Command="{x:Static ScrollBar.PageRightCommand}"/>
                                </Track.IncreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Style="{StaticResource ScrollBarThumb}" />
                                </Track.Thumb>
                            </Track>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>