Question

我有一个WPF应用程序，我需要更改垂直滚动条的宽度。可能使用XAML。

知道该怎么做吗？

<Custom:SurfaceScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.ColumnSpan="3" Margin="10,18,0,20" Grid.Row="1" Grid.RowSpan="2">
    <FlowDocumentScrollViewer x:Name="Viewer"
        VerticalScrollBarVisibility="Disabled"
        HorizontalScrollBarVisibility="Disabled"
        IsEnabled="False" Background="{x:Null}"
        HorizontalAlignment="Left"
        VerticalAlignment="Center">
        <FlowDocument
            <Paragraph>
                <Run Text=""/>
            </Paragraph>
        </FlowDocument>
    </FlowDocumentScrollViewer>
</Custom:SurfaceScrollViewer>

Answer 1

为此，您需要为滚动条创建自定义样式。共享滚动条样式的整个代码。根据需要更改参数。

<Color x:Key="ControlLightColor">#D0D0D0</Color>
<Color x:Key="ControlMediumColor">#888888</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Style x:Key="ScrollBarLineButtonStyle" TargetType="{x:Type RepeatButton}">
    <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 x:Name="Border" Margin="1" CornerRadius="2" BorderThickness="1">
                    <Border.Background>
                        <SolidColorBrush Color="Transparent"></SolidColorBrush>
                    </Border.Background>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledForegroundColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="Arrow" HorizontalAlignment="Center" VerticalAlignment="Center" Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}">
                        <Path.Fill>
                            <SolidColorBrush Color="Black"/>
                        </Path.Fill>
                    </Path>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
    <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="Transparent"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarThumbStyle" 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 CornerRadius="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid x:Name="parentGrid">
        <Grid.RowDefinitions>
            <RowDefinition MaxHeight="13" />
            <RowDefinition Height="0.00001*" />
            <RowDefinition MaxHeight="13" />
        </Grid.RowDefinitions>
        <RepeatButton Grid.Row="0" Height="13" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" Style="{StaticResource ScrollBarLineButtonStyle}"/>
        <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource ScrollBarPageButtonStyle}" Command="ScrollBar.PageUpCommand" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb x:Name="VerticalThumb" Margin="1,0,1,0" Style="{StaticResource ScrollBarThumbStyle}">
                    <Thumb.Background>
                        <SolidColorBrush Color="{StaticResource ControlLightColor}"></SolidColorBrush>
                    </Thumb.Background>
                </Thumb>
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource ScrollBarPageButtonStyle}"
                Command="ScrollBar.PageDownCommand" />
            </Track.IncreaseRepeatButton>
        </Track>
        <RepeatButton Grid.Row="2" Height="13" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z" Style="{StaticResource ScrollBarLineButtonStyle}"/>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="MouseStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" >
                    <Storyboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" 
                                                              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed"/>
                <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MaxWidth="13" />
            <ColumnDefinition Width="0.00001*" />
            <ColumnDefinition MaxWidth="13" />
        </Grid.ColumnDefinitions>
        <RepeatButton Grid.Column="0" Width="13" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" Style="{StaticResource ScrollBarLineButtonStyle}"/>

        <Track x:Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource ScrollBarPageButtonStyle}" Command="ScrollBar.PageLeftCommand" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb x:Name="HorizontalThumb" Style="{StaticResource ScrollBarThumbStyle}" Margin="0,1,0,1">
                    <Thumb.Background>
                        <SolidColorBrush Color="{StaticResource ControlLightColor}"></SolidColorBrush>
                    </Thumb.Background>
                </Thumb>
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource ScrollBarPageButtonStyle}" Command="ScrollBar.PageRightCommand" />
            </Track.IncreaseRepeatButton>
        </Track>

        <RepeatButton Grid.Column="2" Width="13" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z" Style="{StaticResource ScrollBarLineButtonStyle}"/>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" >
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" 
                                                              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed"/>
                <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </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="13" />
            <Setter Property="Margin"   Value="0,5,0,0"/>
            <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
        </Trigger>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="Width"    Value="13" />
            <Setter Property="Height"   Value="Auto" />
            <Setter Property="Margin"   Value="0,2,0,0"/>
            <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
        </Trigger>
    </Style.Triggers>
</Style>

如何更改SurfaceScrollViewer的ScrollBar样式？

1 个答案: