zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-27 11:43:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: redesign ScrollViewer.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

86
src/Semi.Avalonia/Controls/ScrollViewer.axaml
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}"
@@ -47,24 +47,25 @@
</Transitions> </Transitions>
</Setter> </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"
@@ -73,8 +74,7 @@
Minimum="{TemplateBinding Minimum}" Minimum="{TemplateBinding Minimum}"
Orientation="{TemplateBinding Orientation}" Orientation="{TemplateBinding Orientation}"
ViewportSize="{TemplateBinding ViewportSize}" ViewportSize="{TemplateBinding ViewportSize}"
Value="{TemplateBinding Value, Value="{TemplateBinding Value, Mode=TwoWay}">
Mode=TwoWay}">
<Track.DecreaseButton> <Track.DecreaseButton>
<RepeatButton <RepeatButton
Name="PART_PageUpButton" Name="PART_PageUpButton"
@@ -83,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
@@ -93,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>
@@ -101,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>
@@ -117,25 +116,26 @@
</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"
@@ -145,8 +145,7 @@
Minimum="{TemplateBinding Minimum}" Minimum="{TemplateBinding Minimum}"
Orientation="{TemplateBinding Orientation}" Orientation="{TemplateBinding Orientation}"
ViewportSize="{TemplateBinding ViewportSize}" ViewportSize="{TemplateBinding ViewportSize}"
Value="{TemplateBinding Value, Value="{TemplateBinding Value, Mode=TwoWay}">
Mode=TwoWay}">
<Track.DecreaseButton> <Track.DecreaseButton>
<RepeatButton <RepeatButton
Name="PART_PageUpButton" Name="PART_PageUpButton"
@@ -155,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
@@ -165,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>
@@ -212,13 +210,13 @@
<Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" /> <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" /> <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
</Style> </Style>
<Style Selector="^ /template/ RepeatButton &gt; PathIcon"> <Style Selector="^ /template/ RepeatButton > PathIcon">
<Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
</Style> </Style>
<Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon"> <Style Selector="^ /template/ RepeatButton:pointerover > PathIcon">
<Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
</Style> </Style>
<Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon"> <Style Selector="^ /template/ RepeatButton:pressed > PathIcon">
<Setter Property="RenderTransform" Value="scale(0.92)" /> <Setter Property="RenderTransform" Value="scale(0.92)" />
</Style> </Style>
@@ -268,7 +266,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>
@@ -316,7 +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>
@@ -361,12 +357,12 @@
</DockPanel> </DockPanel>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^ /template/ RepeatButton &gt; Path"> <Style Selector="^ /template/ RepeatButton > Path">
<Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonDefaultForeground}" /> <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonDefaultForeground}" />
</Style> </Style>
<Style Selector="^ /template/ RepeatButton:pointerover &gt; Path"> <Style Selector="^ /template/ RepeatButton:pointerover > Path">
<Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" /> <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

4
src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml
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" />