Merge pull request #542 from irihitech/scrollbar

Enhance ScrollViewer
This commit is contained in:
Zhang Dian
2025-02-24 16:33:27 +08:00
committed by GitHub
2 changed files with 60 additions and 49 deletions

View File

@@ -2,7 +2,6 @@
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="using:Avalonia.Controls.Converters" xmlns:converters="using:Avalonia.Controls.Converters"
xmlns:dialog="using:Avalonia.Dialogs"
x:CompileBindings="True"> x:CompileBindings="True">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel> <StackPanel>
@@ -18,15 +17,16 @@
Height="400" Height="400"
Background="aqua" /> Background="aqua" />
</ScrollViewer> </ScrollViewer>
<dialog:ManagedFileChooser />
</StackPanel> </StackPanel>
</Design.PreviewWith> </Design.PreviewWith>
<ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}"> <ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Gray" /> <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}"> <Border
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}">
<ContentPresenter <ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -39,35 +39,42 @@
<ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar"> <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
<Setter Property="Cursor" Value="Arrow" /> <Setter Property="Cursor" Value="Arrow" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Duration="0:0:0.1" />
<DoubleTransition Property="Height" Duration="0:0:0.1" />
<!--<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />-->
</Transitions>
</Setter>
<Style Selector="^:horizontal"> <Style Selector="^:horizontal">
<Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" /> <Setter Property="Height" Value="{StaticResource ScrollBarThickness}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ScrollBar"> <ControlTemplate TargetType="ScrollBar">
<Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False"> <Border
Background="{DynamicResource ScrollBarBackground}"
UseLayoutRounding="False">
<Grid Name="PART_RootGrid" ColumnDefinitions="Auto,*,Auto"> <Grid Name="PART_RootGrid" ColumnDefinitions="Auto,*,Auto">
<RepeatButton <RepeatButton
Name="PART_LineUpButton" Name="PART_LineUpButton"
Grid.Row="0" Grid.Row="0"
Grid.Column="0" Grid.Column="0"
MinWidth="{DynamicResource ScrollBarThickness}" MinWidth="{StaticResource ScrollBarThickness}"
Padding="4,0"
VerticalAlignment="Center" VerticalAlignment="Center"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}"> Theme="{StaticResource ScrollBarRepeatButton}">
<PathIcon <PathIcon
Width="10" Theme="{StaticResource InnerPathIcon}"
Height="10" Classes="Large"
Data="{DynamicResource ScrollBarLeftGlyph}" /> Data="{StaticResource ScrollBarLeftGlyph}" />
</RepeatButton> </RepeatButton>
<Track <Track
Grid.Column="1" Grid.Column="1"
DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
Maximum="{TemplateBinding Maximum}" Maximum="{TemplateBinding Maximum}"
Minimum="{TemplateBinding Minimum}" Minimum="{TemplateBinding Minimum}"
Orientation="{TemplateBinding Orientation}" Orientation="{TemplateBinding Orientation}"
ViewportSize="{TemplateBinding ViewportSize}" ViewportSize="{TemplateBinding ViewportSize}"
DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Value="{TemplateBinding Value, Mode=TwoWay}">
Value="{TemplateBinding Value,
Mode=TwoWay}">
<Track.DecreaseButton> <Track.DecreaseButton>
<RepeatButton <RepeatButton
Name="PART_PageUpButton" Name="PART_PageUpButton"
@@ -76,7 +83,7 @@
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="0" CornerRadius="0"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" /> Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.DecreaseButton> </Track.DecreaseButton>
<Track.IncreaseButton> <Track.IncreaseButton>
<RepeatButton <RepeatButton
@@ -86,7 +93,7 @@
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="0" CornerRadius="0"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" /> Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.IncreaseButton> </Track.IncreaseButton>
<Thumb Name="thumb" /> <Thumb Name="thumb" />
</Track> </Track>
@@ -94,14 +101,13 @@
Name="PART_LineDownButton" Name="PART_LineDownButton"
Grid.Column="2" Grid.Column="2"
MinWidth="{DynamicResource ScrollBarThickness}" MinWidth="{DynamicResource ScrollBarThickness}"
Padding="4,0"
VerticalAlignment="Center" VerticalAlignment="Center"
VerticalContentAlignment="Center" VerticalContentAlignment="Center"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}"> Theme="{DynamicResource ScrollBarRepeatButton}">
<PathIcon <PathIcon
Width="10" Theme="{DynamicResource InnerPathIcon}"
Height="10" Classes="Large"
Data="{DynamicResource ScrollBarRightGlyph}" /> Data="{DynamicResource ScrollBarRightGlyph}" />
</RepeatButton> </RepeatButton>
</Grid> </Grid>
@@ -110,36 +116,36 @@
</Setter> </Setter>
</Style> </Style>
<Style Selector="^:vertical"> <Style Selector="^:vertical">
<Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" /> <Setter Property="Width" Value="{StaticResource ScrollBarThickness}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ScrollBar"> <ControlTemplate TargetType="ScrollBar">
<Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False"> <Border
Background="{DynamicResource ScrollBarBackground}"
UseLayoutRounding="False">
<Grid RowDefinitions="Auto,*,Auto"> <Grid RowDefinitions="Auto,*,Auto">
<RepeatButton <RepeatButton
Name="PART_LineUpButton" Name="PART_LineUpButton"
Grid.Row="0" Grid.Row="0"
MinHeight="{DynamicResource ScrollBarThickness}" MinHeight="{StaticResource ScrollBarThickness}"
Padding="0,4"
VerticalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" VerticalContentAlignment="Center"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}"> Theme="{StaticResource ScrollBarRepeatButton}">
<PathIcon <PathIcon
Width="10" Theme="{StaticResource InnerPathIcon}"
Height="10" Classes="Large"
Data="{DynamicResource ScrollBarUpGlyph}" /> Data="{StaticResource ScrollBarUpGlyph}" />
</RepeatButton> </RepeatButton>
<Track <Track
Grid.Row="1" Grid.Row="1"
DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsDirectionReversed="True" IsDirectionReversed="True"
Maximum="{TemplateBinding Maximum}" Maximum="{TemplateBinding Maximum}"
Minimum="{TemplateBinding Minimum}" Minimum="{TemplateBinding Minimum}"
Orientation="{TemplateBinding Orientation}" Orientation="{TemplateBinding Orientation}"
ViewportSize="{TemplateBinding ViewportSize}" ViewportSize="{TemplateBinding ViewportSize}"
DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Value="{TemplateBinding Value, Mode=TwoWay}">
Value="{TemplateBinding Value,
Mode=TwoWay}">
<Track.DecreaseButton> <Track.DecreaseButton>
<RepeatButton <RepeatButton
Name="PART_PageUpButton" Name="PART_PageUpButton"
@@ -148,7 +154,7 @@
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="0" CornerRadius="0"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" /> Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.DecreaseButton> </Track.DecreaseButton>
<Track.IncreaseButton> <Track.IncreaseButton>
<RepeatButton <RepeatButton
@@ -158,23 +164,22 @@
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="0" CornerRadius="0"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" /> Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.IncreaseButton> </Track.IncreaseButton>
<Thumb Name="thumb" /> <Thumb Name="thumb" />
</Track> </Track>
<RepeatButton <RepeatButton
Name="PART_LineDownButton" Name="PART_LineDownButton"
Grid.Row="2" Grid.Row="2"
MinHeight="{DynamicResource ScrollBarThickness}" MinHeight="{StaticResource ScrollBarThickness}"
Padding="0,4"
HorizontalContentAlignment="Center" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" VerticalContentAlignment="Center"
Focusable="False" Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}"> Theme="{StaticResource ScrollBarRepeatButton}">
<PathIcon <PathIcon
Width="10" Theme="{StaticResource InnerPathIcon}"
Height="10" Classes="Large"
Data="{DynamicResource ScrollBarDownGlyph}" /> Data="{StaticResource ScrollBarDownGlyph}" />
</RepeatButton> </RepeatButton>
</Grid> </Grid>
</Border> </Border>
@@ -215,6 +220,18 @@
<Setter Property="RenderTransform" Value="scale(0.92)" /> <Setter Property="RenderTransform" Value="scale(0.92)" />
</Style> </Style>
<Style Selector="^[IsExpanded=False]">
<Style Selector="^ /template/ RepeatButton">
<Setter Property="IsVisible" Value="False"/>
</Style>
<Style Selector="^:vertical">
<Setter Property="Width" Value="2" />
</Style>
<Style Selector="^:horizontal">
<Setter Property="Height" Value="2" />
</Style>
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer"> <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
@@ -249,14 +266,11 @@
Grid.Row="0" Grid.Row="0"
Grid.Column="1" Grid.Column="1"
Orientation="Vertical" /> Orientation="Vertical" />
<Panel
Grid.Row="1"
Grid.Column="1" />
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^ /template/ ScrollBar"> <Style Selector="^ /template/ ScrollBar">
<Setter Property="Opacity" Value="0"></Setter> <Setter Property="Opacity" Value="0" />
</Style> </Style>
<Style Selector="^:pointerover"> <Style Selector="^:pointerover">
<Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar"> <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
@@ -299,9 +313,6 @@
Grid.Row="0" Grid.Row="0"
Grid.Column="1" Grid.Column="1"
Orientation="Vertical" /> Orientation="Vertical" />
<Panel
Grid.Row="1"
Grid.Column="1" />
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
@@ -354,4 +365,4 @@
<Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" /> <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

View File

@@ -1,6 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="ScrollBarThickness" ResourceKey="SemiFontSizeRegular" /> <StaticResource x:Key="ScrollBarThickness" ResourceKey="SemiSpacingTight" />
<x:Double x:Key="ScrollBarThumbThickness">10</x:Double> <StaticResource x:Key="ScrollBarThumbThickness" ResourceKey="SemiSpacingTight" />
<StaticResource x:Key="ScrollBarUpGlyph" ResourceKey="SemiIconSmallTriangleTop" /> <StaticResource x:Key="ScrollBarUpGlyph" ResourceKey="SemiIconSmallTriangleTop" />
<StaticResource x:Key="ScrollBarDownGlyph" ResourceKey="SemiIconSmallTriangleDown" /> <StaticResource x:Key="ScrollBarDownGlyph" ResourceKey="SemiIconSmallTriangleDown" />
<StaticResource x:Key="ScrollBarLeftGlyph" ResourceKey="SemiIconSmallTriangleLeft" /> <StaticResource x:Key="ScrollBarLeftGlyph" ResourceKey="SemiIconSmallTriangleLeft" />