feat: redesign ScrollViewer.

This commit is contained in:
Zhang Dian
2025-01-25 13:07:38 +08:00
parent 947081302a
commit d712f16642
2 changed files with 43 additions and 47 deletions

View File

@@ -2,7 +2,6 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="using:Avalonia.Controls.Converters"
xmlns:dialog="using:Avalonia.Dialogs"
x:CompileBindings="True">
<Design.PreviewWith>
<StackPanel>
@@ -18,15 +17,16 @@
Height="400"
Background="aqua" />
</ScrollViewer>
<dialog:ManagedFileChooser />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
<Setter Property="Template">
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<Border
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -47,24 +47,25 @@
</Transitions>
</Setter>
<Style Selector="^:horizontal">
<Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Height" Value="{StaticResource ScrollBarThickness}" />
<Setter Property="Template">
<ControlTemplate TargetType="ScrollBar">
<Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
<Border
Background="{DynamicResource ScrollBarBackground}"
UseLayoutRounding="False">
<Grid Name="PART_RootGrid" ColumnDefinitions="Auto,*,Auto">
<RepeatButton
Name="PART_LineUpButton"
Grid.Row="0"
Grid.Column="0"
MinWidth="{DynamicResource ScrollBarThickness}"
Padding="4,0"
MinWidth="{StaticResource ScrollBarThickness}"
VerticalAlignment="Center"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}">
Theme="{StaticResource ScrollBarRepeatButton}">
<PathIcon
Width="10"
Height="10"
Data="{DynamicResource ScrollBarLeftGlyph}" />
Theme="{StaticResource InnerPathIcon}"
Classes="Large"
Data="{StaticResource ScrollBarLeftGlyph}" />
</RepeatButton>
<Track
Grid.Column="1"
@@ -73,8 +74,7 @@
Minimum="{TemplateBinding Minimum}"
Orientation="{TemplateBinding Orientation}"
ViewportSize="{TemplateBinding ViewportSize}"
Value="{TemplateBinding Value,
Mode=TwoWay}">
Value="{TemplateBinding Value, Mode=TwoWay}">
<Track.DecreaseButton>
<RepeatButton
Name="PART_PageUpButton"
@@ -83,7 +83,7 @@
VerticalAlignment="Stretch"
CornerRadius="0"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton
@@ -93,7 +93,7 @@
VerticalAlignment="Stretch"
CornerRadius="0"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.IncreaseButton>
<Thumb Name="thumb" />
</Track>
@@ -101,14 +101,13 @@
Name="PART_LineDownButton"
Grid.Column="2"
MinWidth="{DynamicResource ScrollBarThickness}"
Padding="4,0"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}">
<PathIcon
Width="10"
Height="10"
Theme="{DynamicResource InnerPathIcon}"
Classes="Large"
Data="{DynamicResource ScrollBarRightGlyph}" />
</RepeatButton>
</Grid>
@@ -117,25 +116,26 @@
</Setter>
</Style>
<Style Selector="^:vertical">
<Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Width" Value="{StaticResource ScrollBarThickness}" />
<Setter Property="Template">
<ControlTemplate TargetType="ScrollBar">
<Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
<Border
Background="{DynamicResource ScrollBarBackground}"
UseLayoutRounding="False">
<Grid RowDefinitions="Auto,*,Auto">
<RepeatButton
Name="PART_LineUpButton"
Grid.Row="0"
MinHeight="{DynamicResource ScrollBarThickness}"
Padding="0,4"
MinHeight="{StaticResource ScrollBarThickness}"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}">
Theme="{StaticResource ScrollBarRepeatButton}">
<PathIcon
Width="10"
Height="10"
Data="{DynamicResource ScrollBarUpGlyph}" />
Theme="{StaticResource InnerPathIcon}"
Classes="Large"
Data="{StaticResource ScrollBarUpGlyph}" />
</RepeatButton>
<Track
Grid.Row="1"
@@ -145,8 +145,7 @@
Minimum="{TemplateBinding Minimum}"
Orientation="{TemplateBinding Orientation}"
ViewportSize="{TemplateBinding ViewportSize}"
Value="{TemplateBinding Value,
Mode=TwoWay}">
Value="{TemplateBinding Value, Mode=TwoWay}">
<Track.DecreaseButton>
<RepeatButton
Name="PART_PageUpButton"
@@ -155,7 +154,7 @@
VerticalAlignment="Stretch"
CornerRadius="0"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton
@@ -165,23 +164,22 @@
VerticalAlignment="Stretch"
CornerRadius="0"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
Theme="{StaticResource ScrollBarRepeatButton}" />
</Track.IncreaseButton>
<Thumb Name="thumb" />
</Track>
<RepeatButton
Name="PART_LineDownButton"
Grid.Row="2"
MinHeight="{DynamicResource ScrollBarThickness}"
Padding="0,4"
MinHeight="{StaticResource ScrollBarThickness}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}">
Theme="{StaticResource ScrollBarRepeatButton}">
<PathIcon
Width="10"
Height="10"
Data="{DynamicResource ScrollBarDownGlyph}" />
Theme="{StaticResource InnerPathIcon}"
Classes="Large"
Data="{StaticResource ScrollBarDownGlyph}" />
</RepeatButton>
</Grid>
</Border>
@@ -212,13 +210,13 @@
<Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
</Style>
<Style Selector="^ /template/ RepeatButton &gt; PathIcon">
<Style Selector="^ /template/ RepeatButton > PathIcon">
<Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
</Style>
<Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
<Style Selector="^ /template/ RepeatButton:pointerover > PathIcon">
<Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
</Style>
<Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon">
<Style Selector="^ /template/ RepeatButton:pressed > PathIcon">
<Setter Property="RenderTransform" Value="scale(0.92)" />
</Style>
@@ -268,7 +266,6 @@
Grid.Row="0"
Grid.Column="1"
Orientation="Vertical" />
<Panel Grid.Row="1" Grid.Column="1" />
</Grid>
</ControlTemplate>
</Setter>
@@ -316,7 +313,6 @@
Grid.Row="0"
Grid.Column="1"
Orientation="Vertical" />
<Panel Grid.Row="1" Grid.Column="1" />
</Grid>
</ControlTemplate>
</Setter>
@@ -361,12 +357,12 @@
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ RepeatButton &gt; Path">
<Style Selector="^ /template/ RepeatButton > Path">
<Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonDefaultForeground}" />
</Style>
<Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
<Style Selector="^ /template/ RepeatButton:pointerover > Path">
<Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
</Style>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

View File

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