zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update ScrollBar visual styles.

Browse Source
This commit is contained in:
rabbitism 2023-07-03 17:13:01 +08:00
parent 8bdfe2b7de
commit 14c2ff6c02
3 changed files with 79 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/Semi.Avalonia/Controls/ScrollViewer.axaml
View File

@ -21,6 +21,22 @@
<dialog:ManagedFileChooser /> <dialog:ManagedFileChooser />
</StackPanel> </StackPanel>
</Design.PreviewWith> </Design.PreviewWith>
<ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="Template">
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
<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" />
<Style Selector="^:horizontal"> <Style Selector="^:horizontal">
@ -34,11 +50,14 @@
Grid.Row="0" Grid.Row="0"
Grid.Column="0" Grid.Column="0"
MinWidth="{DynamicResource ScrollBarThickness}" MinWidth="{DynamicResource ScrollBarThickness}"
Padding="4,0"
VerticalAlignment="Center" VerticalAlignment="Center"
Classes="repeat" Focusable="False"
CornerRadius="0" Theme="{DynamicResource ScrollBarRepeatButton}">
Focusable="False"> <PathIcon
<Path Data="M 4 0 L 4 8 L 0 4 Z" /> Width="10"
Height="10"
Data="{DynamicResource ScrollBarLeftGlyph}" />
</RepeatButton> </RepeatButton>
<Track <Track
Grid.Column="1" Grid.Column="1"
@ -54,9 +73,9 @@
MinWidth="0" MinWidth="0"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Classes="repeattrack"
CornerRadius="0" CornerRadius="0"
Focusable="False" /> Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
</Track.DecreaseButton> </Track.DecreaseButton>
<Track.IncreaseButton> <Track.IncreaseButton>
<RepeatButton <RepeatButton
@ -64,9 +83,9 @@
MinWidth="0" MinWidth="0"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Classes="repeattrack"
CornerRadius="0" CornerRadius="0"
Focusable="False" /> Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
</Track.IncreaseButton> </Track.IncreaseButton>
<Thumb Name="thumb" /> <Thumb Name="thumb" />
</Track> </Track>
@ -74,11 +93,15 @@
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"
Classes="repeat" VerticalContentAlignment="Center"
CornerRadius="0" Focusable="False"
Focusable="False"> Theme="{DynamicResource ScrollBarRepeatButton}">
<Path Data="M 0 0 L 4 4 L 0 8 Z" /> <PathIcon
Width="10"
Height="10"
Data="{DynamicResource ScrollBarRightGlyph}" />
</RepeatButton> </RepeatButton>
</Grid> </Grid>
</Border> </Border>
@ -95,11 +118,16 @@
Name="PART_LineUpButton" Name="PART_LineUpButton"
Grid.Row="0" Grid.Row="0"
MinHeight="{DynamicResource ScrollBarThickness}" MinHeight="{DynamicResource ScrollBarThickness}"
HorizontalAlignment="Center" Padding="0,4"
Classes="repeat" VerticalAlignment="Center"
CornerRadius="0" HorizontalContentAlignment="Center"
Focusable="False"> VerticalContentAlignment="Center"
<Path Data="M 0 4 L 8 4 L 4 0 Z" /> Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}">
<PathIcon
Width="10"
Height="10"
Data="{DynamicResource ScrollBarUpGlyph}" />
</RepeatButton> </RepeatButton>
<Track <Track
Grid.Row="1" Grid.Row="1"
@ -116,9 +144,9 @@
MinHeight="0" MinHeight="0"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Classes="repeattrack"
CornerRadius="0" CornerRadius="0"
Focusable="False" /> Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
</Track.DecreaseButton> </Track.DecreaseButton>
<Track.IncreaseButton> <Track.IncreaseButton>
<RepeatButton <RepeatButton
@ -126,9 +154,9 @@
MinHeight="0" MinHeight="0"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Classes="repeattrack"
CornerRadius="0" CornerRadius="0"
Focusable="False" /> Focusable="False"
Theme="{DynamicResource ScrollBarRepeatButton}" />
</Track.IncreaseButton> </Track.IncreaseButton>
<Thumb Name="thumb" /> <Thumb Name="thumb" />
</Track> </Track>
@ -136,11 +164,15 @@
Name="PART_LineDownButton" Name="PART_LineDownButton"
Grid.Row="2" Grid.Row="2"
MinHeight="{DynamicResource ScrollBarThickness}" MinHeight="{DynamicResource ScrollBarThickness}"
HorizontalAlignment="Center" Padding="0,4"
Classes="repeat" HorizontalContentAlignment="Center"
CornerRadius="0" VerticalContentAlignment="Center"
Focusable="False"> Focusable="False"
<Path Data="M 0 0 L 4 4 L 8 0 Z" /> Theme="{DynamicResource ScrollBarRepeatButton}">
<PathIcon
Width="10"
Height="10"
Data="{DynamicResource ScrollBarDownGlyph}" />
</RepeatButton> </RepeatButton>
</Grid> </Grid>
</Border> </Border>
@ -174,30 +206,11 @@
<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.repeat"> <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
<Setter Property="Padding" Value="2" /> <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
<Setter Property="BorderThickness" Value="0" />
</Style> </Style>
<Style Selector="^ /template/ RepeatButton.repeattrack"> <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
<Setter Property="Background" Value="Transparent" /> <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
<Setter Property="Template">
<ControlTemplate TargetType="RepeatButton">
<Border Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
</Style>
<Style Selector="^ /template/ RepeatButton &gt; Path">
<Setter Property="Fill" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
</Style>
<Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
<Setter Property="Fill" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
</Style> </Style>
</ControlTheme> </ControlTheme>

13
src/Semi.Avalonia/Themes/Dark/ScrollViewer.axaml
View File

@ -2,11 +2,16 @@
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:sys="clr-namespace:System;assembly=System.Runtime"> xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<sys:Double x:Key="ScrollBarThickness">12</sys:Double> <sys:Double x:Key="ScrollBarThickness">14</sys:Double>
<sys:Double x:Key="ScrollBarThumbThickness">8</sys:Double> <sys:Double x:Key="ScrollBarThumbThickness">10</sys:Double>
<SolidColorBrush x:Key="ScrollBarButtonDefaultBackground" Color="Transparent" /> <SolidColorBrush x:Key="ScrollBarButtonDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.62" Color="#F9F9F9" /> <SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.62" Color="#F9F9F9" />
<SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#F9F9F9" /> <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#F9F9F9" />
<SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.35" Color="#F9F9F9" /> <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.62" Color="#F9F9F9" />
<SolidColorBrush x:Key="ScrollBarBackground" Opacity="0.12" Color="White" /> <SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent" />
<PathGeometry x:Key="ScrollBarLeftGlyph">M16.3176 6.95628V17.0878C16.3176 17.4871 15.8725 17.7253 15.5402 17.5038L7.94161 12.438C7.64474 12.2401 7.64474 11.8039 7.94161 11.606L15.5402 6.54025C15.8725 6.31873 16.3176 6.55693 16.3176 6.95628Z</PathGeometry>
<PathGeometry x:Key="ScrollBarRightGlyph">M9 17.0657V6.93425C9 6.5349 9.44507 6.29671 9.77735 6.51823L17.376 11.584C17.6728 11.7819 17.6728 12.2181 17.376 12.416L9.77735 17.4818C9.44507 17.7033 9 17.4651 9 17.0657Z</PathGeometry>
<PathGeometry x:Key="ScrollBarUpGlyph">M17.0839 16.3212H6.9524C6.55305 16.3212 6.31486 15.8761 6.53638 15.5438L11.6021 7.94521C11.8 7.64834 12.2363 7.64834 12.4342 7.94521L17.4999 15.5438C17.7214 15.8761 17.4832 16.3212 17.0839 16.3212Z</PathGeometry>
<PathGeometry x:Key="ScrollBarDownGlyph">M6.95249 7.72265L17.084 7.72265C17.4833 7.72265 17.7215 8.16772 17.5 8.5L12.4343 16.0986C12.2363 16.3955 11.8001 16.3955 11.6022 16.0986L6.53647 8.5C6.31495 8.16772 6.55315 7.72265 6.95249 7.72265Z</PathGeometry>
</ResourceDictionary> </ResourceDictionary>

12
src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml
View File

@ -2,11 +2,15 @@
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:sys="clr-namespace:System;assembly=System.Runtime"> xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<sys:Double x:Key="ScrollBarThickness">12</sys:Double> <sys:Double x:Key="ScrollBarThickness">14</sys:Double>
<sys:Double x:Key="ScrollBarThumbThickness">8</sys:Double> <sys:Double x:Key="ScrollBarThumbThickness">10</sys:Double>
<SolidColorBrush x:Key="ScrollBarButtonDefaultBackground" Color="Transparent" /> <SolidColorBrush x:Key="ScrollBarButtonDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.62" Color="#1C1F23" /> <SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#1C1F23" /> <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.35" Color="#1C1F23" /> <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="ScrollBarBackground" Opacity="0.05" Color="#2E3238" /> <SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent" />
<PathGeometry x:Key="ScrollBarLeftGlyph">M16.3176 6.95628V17.0878C16.3176 17.4871 15.8725 17.7253 15.5402 17.5038L7.94161 12.438C7.64474 12.2401 7.64474 11.8039 7.94161 11.606L15.5402 6.54025C15.8725 6.31873 16.3176 6.55693 16.3176 6.95628Z</PathGeometry>
<PathGeometry x:Key="ScrollBarRightGlyph">M9 17.0657V6.93425C9 6.5349 9.44507 6.29671 9.77735 6.51823L17.376 11.584C17.6728 11.7819 17.6728 12.2181 17.376 12.416L9.77735 17.4818C9.44507 17.7033 9 17.4651 9 17.0657Z</PathGeometry>
<PathGeometry x:Key="ScrollBarUpGlyph">M17.0839 16.3212H6.9524C6.55305 16.3212 6.31486 15.8761 6.53638 15.5438L11.6021 7.94521C11.8 7.64834 12.2363 7.64834 12.4342 7.94521L17.4999 15.5438C17.7214 15.8761 17.4832 16.3212 17.0839 16.3212Z</PathGeometry>
<PathGeometry x:Key="ScrollBarDownGlyph">M6.95249 7.72265L17.084 7.72265C17.4833 7.72265 17.7215 8.16772 17.5 8.5L12.4343 16.0986C12.2363 16.3955 11.8001 16.3955 11.6022 16.0986L6.53647 8.5C6.31495 8.16772 6.55315 7.72265 6.95249 7.72265Z</PathGeometry>
</ResourceDictionary> </ResourceDictionary>