自定义滚动查看器的横条处于垂直方向。

Question

我有一个定制的 scrollViewer 而水平滚动器以垂直方向显示。

这里是水平滚动条线的代码。

        <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="0" />
                <ColumnDefinition Width="0.00001*" />
                <ColumnDefinition MaxWidth="0" />
            </Grid.ColumnDefinitions>
            <Border
                Grid.ColumnSpan="3"
                Background="#F0F0F0"
                CornerRadius="2" />
            <RepeatButton
                Grid.Column="0"
                Width="18"
                Command="ScrollBar.LineLeftCommand"
                Content="M 4 0 L 4 8 L 0 4 Z"
                Style="{StaticResource ScrollBarLineButton}" />
            <Track
                Name="PART_Track"
                Grid.Column="1"
                IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageLeftCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        Margin="0,1,0,1"
                        Background="{StaticResource NormalBrush}"
                        BorderBrush="{StaticResource NormalBorderBrush}"
                        Style="{StaticResource ScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageRightCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                Grid.Column="3"
                Width="18"
                Command="ScrollBar.LineRightCommand"
                Content="M 0 0 L 4 4 L 0 8 Z"
                Style="{StaticResource ScrollBarLineButton}" />
        </Grid>
    </ControlTemplate>

以下是自定义滚动条线的完整代码 ScrollViewer

    <Window.Resources>
    <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />
    <SolidColorBrush x:Key="StandardBackgroundBrush" Color="LightGray" />
    <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" />
    <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="LightGray" />
    <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
    <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
    <SolidColorBrush x:Key="NormalBrush" Color="#888" />
    <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" />
    <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#FF686868" />
    <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#888" />

    <LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,0.001">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Offset="0.0" Color="White" />
                <GradientStop Offset="0.6" Color="White" />
                <GradientStop Offset="1.2" Color="#DDDDDD" />
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="StandardBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Offset="0.0" Color="#FFF" />
                <GradientStop Offset="1.0" Color="#CCC" />
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Offset="0.0" Color="#BBB" />
                <GradientStop Offset="0.1" Color="#EEE" />
                <GradientStop Offset="0.9" Color="#EEE" />
                <GradientStop Offset="1.0" Color="#FFF" />
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

    <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="Visibility" Value="Hidden" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border
                        Name="Border"
                        Margin="1"
                        Background="{StaticResource NormalBrush}"
                        BorderBrush="{StaticResource NormalBorderBrush}"
                        BorderThickness="1"
                        CornerRadius="2">
                        <Path
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
                            Fill="{StaticResource GlyphBrush}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="Visibility" Value="Hidden" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="Black" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border
                        Width="3"
                        Margin="8,0,-2,0"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0"
                        CornerRadius="2" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="0" />
                <RowDefinition Height="0.00001*" />
                <RowDefinition MaxHeight="0" />
            </Grid.RowDefinitions>
            <Border
                Grid.RowSpan="3"
                Background="Transparent"
                CornerRadius="2" />
            <RepeatButton
                Grid.Row="0"
                Height="18"
                Command="ScrollBar.LineUpCommand"
                Content="M 0 4 L 8 4 L 4 0 Z"
                Style="{StaticResource ScrollBarLineButton}" />
            <Track
                Name="PART_Track"
                Grid.Row="1"
                IsDirectionReversed="true">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        Margin="1,0,1,0"
                        Background="{StaticResource HorizontalNormalBrush}"
                        BorderBrush="{StaticResource HorizontalNormalBorderBrush}"
                        Style="{StaticResource ScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                Grid.Row="3"
                Height="18"
                Command="ScrollBar.LineDownCommand"
                Content="M 0 0 L 4 4 L 8 0 Z"
                Style="{StaticResource ScrollBarLineButton}" />
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="0" />
                <ColumnDefinition Width="0.00001*" />
                <ColumnDefinition MaxWidth="0" />
            </Grid.ColumnDefinitions>
            <Border
                Grid.ColumnSpan="3"
                Background="#F0F0F0"
                CornerRadius="2" />
            <RepeatButton
                Grid.Column="0"
                Width="18"
                Command="ScrollBar.LineLeftCommand"
                Content="M 4 0 L 4 8 L 0 4 Z"
                Style="{StaticResource ScrollBarLineButton}" />
            <Track
                Name="PART_Track"
                Grid.Column="1"
                IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageLeftCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        Margin="0,1,0,1"
                        Background="{StaticResource NormalBrush}"
                        BorderBrush="{StaticResource NormalBorderBrush}"
                        Style="{StaticResource ScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageRightCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                Grid.Column="3"
                Width="18"
                Command="ScrollBar.LineRightCommand"
                Content="M 0 0 L 4 4 L 0 8 Z"
                Style="{StaticResource ScrollBarLineButton}" />
        </Grid>
    </ControlTemplate>
    <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto" />
                <Setter Property="Height" Value="18" />
                <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="18" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="FavsScrollViewer" TargetType="{x:Type ScrollViewer}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ScrollContentPresenter Grid.Column="1" />
                        <ScrollBar
                            Name="PART_VerticalScrollBar"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            ViewportSize="{TemplateBinding ViewportHeight}"
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                            Value="{TemplateBinding VerticalOffset}" />
                        <ScrollBar
                            Name="PART_HorizontalScrollBar"
                            Grid.Row="1"
                            Grid.Column="1"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            Orientation="Horizontal"
                            ViewportSize="{TemplateBinding ViewportWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                            Value="{TemplateBinding HorizontalOffset}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Answer 1

你必须为每个滚动条定义一个单独的样式 Thumb 水平和垂直相应。

       <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Focusable" Value="false" />

            <Style.Triggers>
                <Trigger Property="Name" Value="ThumbH">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border
                        Height="5"
                        Margin="8,0,-2,0"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0"
                        CornerRadius="2" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>

                <Trigger Property="Name" Value="ThumbV">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border
                        Width="3"
                        Margin="8,0,-2,0"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0"
                        CornerRadius="2" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

既然我已经使用了这个属性 Name 作为一个样式触发条件，它应该被相应地设置。

 <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="0" />
                <RowDefinition Height="0.00001*" />
                <RowDefinition MaxHeight="0" />
            </Grid.RowDefinitions>
            <Border
                Grid.RowSpan="3"
                Background="Transparent"
                CornerRadius="2" />
            <RepeatButton
                Grid.Row="0"
                Height="18"
                Command="ScrollBar.LineUpCommand"
                Content="M 0 4 L 8 4 L 4 0 Z"
                Style="{StaticResource ScrollBarLineButton}" />
            <Track
                Name="PART_Track"
                Grid.Row="1"
                IsDirectionReversed="true">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <!--Here Added x:Name-->
                    <Thumb
                        x:Name="ThumbV"
                        Margin="1,0,1,0"
                        Background="{StaticResource HorizontalNormalBrush}"
                        BorderBrush="{StaticResource HorizontalNormalBorderBrush}"
                        Style="{StaticResource ScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                Grid.Row="3"
                Height="18"
                Command="ScrollBar.LineDownCommand"
                Content="M 0 0 L 4 4 L 8 0 Z"
                Style="{StaticResource ScrollBarLineButton}" />
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="0" />
                <ColumnDefinition Width="0.00001*" />
                <ColumnDefinition MaxWidth="0" />
            </Grid.ColumnDefinitions>
            <Border
                Grid.ColumnSpan="3"
                Background="#F0F0F0"
                CornerRadius="2" />
            <RepeatButton
                Grid.Column="0"
                Width="18"
                Command="ScrollBar.LineLeftCommand"
                Content="M 4 0 L 4 8 L 0 4 Z"
                Style="{StaticResource ScrollBarLineButton}" />
            <Track
                Name="PART_Track"
                Grid.Column="1"
                IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageLeftCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <!--Here Added x:Name-->
                    <Thumb
                        x:Name="ThumbH"
                        Margin="0,1,0,1"
                        Background="{StaticResource NormalBrush}"
                        BorderBrush="{StaticResource NormalBorderBrush}"
                        Style="{StaticResource ScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageRightCommand" Style="{StaticResource ScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                Grid.Column="3"
                Width="18"
                Command="ScrollBar.LineRightCommand"
                Content="M 0 0 L 4 4 L 0 8 Z"
                Style="{StaticResource ScrollBarLineButton}" />
        </Grid>
    </ControlTemplate>

注意：你可以改变 Height 水平拇指的属性和 Width 的属性，以适应你的需求。