mirror of
https://gitcode.com/gh_mirrors/se/Semi.Avalonia
synced 2026-03-03 00:00:55 +08:00
feat: redesign ScrollViewer.
This commit is contained in:
@@ -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 > PathIcon">
|
||||
<Style Selector="^ /template/ RepeatButton > PathIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ RepeatButton:pointerover > PathIcon">
|
||||
<Style Selector="^ /template/ RepeatButton:pointerover > PathIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ RepeatButton:pressed > 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 > Path">
|
||||
<Style Selector="^ /template/ RepeatButton > Path">
|
||||
<Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonDefaultForeground}" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^ /template/ RepeatButton:pointerover > Path">
|
||||
<Style Selector="^ /template/ RepeatButton:pointerover > Path">
|
||||
<Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
</ResourceDictionary>
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user