UWP ScrollBar styles | 易学教程

问题

I have 2 styles for vertical and horizontal scrollbar, which for a long time I can't combine into one style for my ScrollViewer I have Styles for VerticalScrollBar

<Style x:Name="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
    <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundBrush}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Width" Value="4"/>
    <Setter Property="MinWidth" Value="4"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid x:Name="Bg" SnapsToDevicePixels="true">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Background="{TemplateBinding Background}"
                            Width="4"
                            MaxWidth="4"
                            Grid.Row="1"/>
                    <Track x:Name="Vertical_Track" 
                           IsDirectionReversed="true" 
                           IsEnabled="{TemplateBinding IsMouseOver}" 
                           Grid.Row="1">
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbVertical}"
                                   Width="{TemplateBinding Width}"/>
                        </Track.Thumb>
                    </Track>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Rectangle x:Name="rectangleVertical" 
                           Fill="{DynamicResource ScrollBarThumbBrush}" 
                           Height="{TemplateBinding Height}" 
                           SnapsToDevicePixels="True" 
                           Width="{TemplateBinding Width}"/>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Fill" 
                                TargetName="rectangleVertical" 
                                Value="{DynamicResource ScrollBarThumbPressedBrush}"/>
                    </Trigger>
                    <Trigger Property="IsDragging" Value="true">
                        <Setter Property="Fill" 
                                TargetName="rectangleVertical" 
                                Value="{DynamicResource ScrollBarThumbPressedBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And for HorizontalScrollBar

<Style x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
    <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundBrush}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Height" Value="4"/>
    <Setter Property="MinHeight" Value="4"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid x:Name="Bg" SnapsToDevicePixels="true">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Background="{TemplateBinding Background}"
                            Grid.Column="1"/>
                    <Track x:Name="Horizontal_Track" 
                           
                           IsDirectionReversed="False" 
                           IsEnabled="{TemplateBinding IsMouseOver}" 
                           Grid.Column="1">
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbHorizontal}"
                                   Height="{TemplateBinding Height}"/>
                        </Track.Thumb>
                    </Track>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarThumbHorizontal" TargetType="{x:Type Thumb}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Rectangle x:Name="rectangleHorizontal" 
                           Fill="{DynamicResource ScrollBarThumbBrush}" 
                           Height="{TemplateBinding Height}" 
                           SnapsToDevicePixels="True" 
                           Width="{TemplateBinding Width}"/>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Fill" 
                                TargetName="rectangleHorizontal" 
                                Value="{DynamicResource ScrollBarThumbPressedBrush}"/>
                    </Trigger>
                    <Trigger Property="IsDragging" Value="true">
                        <Setter Property="Fill" 
                                TargetName="rectangleHorizontal" 
                                Value="{DynamicResource ScrollBarThumbPressedBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

How can they be combined into one ScrollBar while maintaining the styles for the HorizontalScrollBar and VerticalScrollBar?

My question is similar WPF ScrollBar styles but I need uwp

回答1:

You could do the following steps to implement what you want.

Create a default style of ScrollViewer in your xaml.
Add your styles to the page resources and add a key to these styles you made.
Find the ScrollBars in the default style called VerticalScrollBar and HorizontalScrollBar
Then add Style="{StaticResource StyleKey}"in the ScrollBars Xaml code to apply the style you made

It should look like this:

        <Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
        ....
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    ....
                    <Border x:Name="Root" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}">
                        ....
                        <Grid Background="{TemplateBinding Background}">
                               ....
                            <ScrollBar x:Name="VerticalScrollBar" 
                                       Grid.Column="1" 
                                       HorizontalAlignment="Right"
                                       IsTabStop="False"
                                       Maximum="{TemplateBinding ScrollableHeight}"
                                       Orientation="Vertical"
                                       ViewportSize="{TemplateBinding ViewportHeight}"
                                       Value="{TemplateBinding VerticalOffset}"
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                       Style="{StaticResource YourVerticalScrollBarKey}"
                                       />
                            <ScrollBar x:Name="HorizontalScrollBar"
                                       IsTabStop="False"
                                       Maximum="{TemplateBinding ScrollableWidth}"
                                       Orientation="Horizontal"
                                       Grid.Row="1" 
                                       ViewportSize="{TemplateBinding ViewportWidth}"
                                       Value="{TemplateBinding HorizontalOffset}"
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                       Style="{StaticResource YourHorizontalScrollBarKey}"
                                       />
                            <Border x:Name="ScrollBarSeparator" Background="{ThemeResource ScrollViewerScrollBarSeparatorBackground}" Grid.Column="1" Opacity="0" Grid.Row="1"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

来源：https://stackoverflow.com/questions/65156452/uwp-scrollbar-styles

标签

uwp