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

feat: update vertical template. update disabled style.

Browse Source
This commit is contained in:
rabbitism 2023-01-25 11:44:01 +08:00
parent 75a6f57f0f
commit 79b9b67313
3 changed files with 137 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
View File

@ -4,7 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450" d:DesignHeight="800"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel <StackPanel
@ -34,5 +34,46 @@
TickFrequency="10" TickFrequency="10"
TickPlacement="Outside" TickPlacement="Outside"
Value="0" /> Value="0" />
<Slider
Width="300"
IsDirectionReversed="True"
Maximum="100"
Minimum="0"
TickFrequency="10"
Value="0" />
<Slider
Width="300"
IsEnabled="False"
Maximum="100"
Minimum="0"
TickFrequency="10"
Value="30" />
<StackPanel Orientation="Horizontal" Spacing="20">
<Slider
Height="300"
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="10"
Value="0" />
<Slider
Height="300"
IsSnapToTickEnabled="True"
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="10"
TickPlacement="TopLeft"
Value="0" />
<Slider
Height="300"
Classes="ToolTip"
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="10"
TickPlacement="TopLeft"
Value="0" />
</StackPanel>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

236
src/Semi.Avalonia/Controls/Slider.axaml
View File

@ -44,7 +44,7 @@
<Setter Property="Thumb.CornerRadius" Value="{DynamicResource SliderThumbCornerRadius}" /> <Setter Property="Thumb.CornerRadius" Value="{DynamicResource SliderThumbCornerRadius}" />
<Setter Property="Thumb.Cursor" Value="Hand" /> <Setter Property="Thumb.Cursor" Value="Hand" />
<Setter Property="Thumb.Background" Value="{DynamicResource SliderThumbBackground}" /> <Setter Property="Thumb.Background" Value="{DynamicResource SliderThumbBackground}" />
<Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbPointeroverBorderBrush}" /> <Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbBorderBrush}" />
<Setter Property="Thumb.BorderThickness" Value="{DynamicResource SliderThumbBorderThickness}" /> <Setter Property="Thumb.BorderThickness" Value="{DynamicResource SliderThumbBorderThickness}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="Thumb"> <ControlTemplate TargetType="Thumb">
@ -158,105 +158,98 @@
<Style Selector="^:vertical"> <Style Selector="^:vertical">
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<DataValidationErrors> <Border
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
CornerRadius="{TemplateBinding CornerRadius}"> <Grid
x:Name="SliderContainer"
Margin="{TemplateBinding Padding}"
Background="{DynamicResource SliderContainerBackground}">
<Grid.Styles>
<Style Selector="TickBar">
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
</Style>
</Grid.Styles>
<Grid <Grid
x:Name="SliderContainer" x:Name="VerticalTemplate"
Grid.Row="1" MinWidth="{DynamicResource SliderVerticalWidth}"
Margin="{TemplateBinding Padding}" RowDefinitions="*,Auto,Auto">
Background="{DynamicResource SliderContainerBackground}"> <Grid.ColumnDefinitions>
<Grid.Styles> <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
<Style Selector="TickBar"> <ColumnDefinition Width="Auto" />
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" /> <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
</Style> </Grid.ColumnDefinitions>
</Grid.Styles> <TickBar
<Grid Name="LeftTickBar"
x:Name="VerticalTemplate" Grid.RowSpan="3"
MinWidth="{DynamicResource SliderVerticalWidth}" Width="{DynamicResource SliderTickVerticalWidth}"
RowDefinitions="*,Auto,Auto"> Margin="0,0,4,0"
<Grid.ColumnDefinitions> HorizontalAlignment="Right"
<ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" /> Fill="{DynamicResource SliderTickForeground}"
<ColumnDefinition Width="Auto" /> IsVisible="False"
<ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" /> Maximum="{TemplateBinding Slider.Maximum}"
</Grid.ColumnDefinitions> Minimum="{TemplateBinding Slider.Minimum}"
<TickBar Orientation="{TemplateBinding Slider.Orientation}"
Name="LeftTickBar" Placement="Left"
Grid.RowSpan="3" TickFrequency="{TemplateBinding Slider.TickFrequency}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}" Ticks="{TemplateBinding Ticks}" />
Margin="0,0,4,0" <TickBar
HorizontalAlignment="Right" Name="RightTickBar"
Fill="{DynamicResource SliderTickBarFill}" Grid.RowSpan="3"
IsVisible="False" Grid.Column="2"
Maximum="{TemplateBinding Slider.Maximum}" Width="{DynamicResource SliderTickVerticalWidth}"
Minimum="{TemplateBinding Slider.Minimum}" Margin="4,0,0,0"
Orientation="{TemplateBinding Slider.Orientation}" HorizontalAlignment="Left"
Placement="Left" Fill="{DynamicResource SliderTickForeground}"
TickFrequency="{TemplateBinding Slider.TickFrequency}" IsVisible="False"
Ticks="{TemplateBinding Ticks}" /> Maximum="{TemplateBinding Slider.Maximum}"
<TickBar Minimum="{TemplateBinding Slider.Minimum}"
Name="RightTickBar" Orientation="{TemplateBinding Slider.Orientation}"
Grid.RowSpan="3" Placement="Right"
Grid.Column="2" TickFrequency="{TemplateBinding Slider.TickFrequency}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}" Ticks="{TemplateBinding Ticks}" />
Margin="4,0,0,0" <Track
HorizontalAlignment="Left" Name="PART_Track"
Fill="{DynamicResource SliderTickBarFill}" Grid.RowSpan="3"
IsVisible="False" Grid.Column="1"
Maximum="{TemplateBinding Slider.Maximum}" Grid.ColumnSpan="1"
Minimum="{TemplateBinding Slider.Minimum}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="{TemplateBinding Slider.Orientation}" Maximum="{TemplateBinding Maximum}"
Placement="Right" Minimum="{TemplateBinding Minimum}"
TickFrequency="{TemplateBinding Slider.TickFrequency}" Orientation="Vertical"
Ticks="{TemplateBinding Ticks}" /> Value="{TemplateBinding Value,
<Track Mode=TwoWay}">
Name="PART_Track" <Track.DecreaseButton>
Grid.RowSpan="3" <RepeatButton
Grid.Column="1" Name="PART_DecreaseButton"
Grid.ColumnSpan="1" Background="{TemplateBinding Foreground}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Focusable="False"
Maximum="{TemplateBinding Maximum}" Theme="{StaticResource SliderVerticalRepeatButton}" />
Minimum="{TemplateBinding Minimum}" </Track.DecreaseButton>
Orientation="Vertical" <Track.IncreaseButton>
Value="{TemplateBinding Value, <RepeatButton
Mode=TwoWay}"> Name="PART_IncreaseButton"
<Track.DecreaseButton> Background="{TemplateBinding Background}"
<RepeatButton Focusable="False"
Name="PART_DecreaseButton" Theme="{StaticResource SliderVerticalRepeatButton}" />
Background="{TemplateBinding Foreground}" </Track.IncreaseButton>
Focusable="False" <Thumb
Theme="{StaticResource SliderVerticalRepeatButton}" /> Name="thumb"
</Track.DecreaseButton> Width="{DynamicResource SliderThumbWidth}"
<Track.IncreaseButton> Height="{DynamicResource SliderThumbHeight}"
<RepeatButton DataContext="{TemplateBinding Value}"
Name="PART_IncreaseButton" Theme="{StaticResource SliderThumbTheme}" />
Background="{TemplateBinding Background}" </Track>
Focusable="False"
Theme="{StaticResource SliderVerticalRepeatButton}" />
</Track.IncreaseButton>
<Thumb
Name="SliderThumb"
Width="{DynamicResource SliderVerticalThumbWidth}"
Height="{DynamicResource SliderVerticalThumbHeight}"
Margin="0"
Padding="0"
Background="{DynamicResource SliderThumbBackground}"
BorderThickness="1"
DataContext="{TemplateBinding Value}"
Theme="{StaticResource SliderThumbTheme}" />
</Track>
</Grid>
</Grid> </Grid>
</Border> </Grid>
</DataValidationErrors> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</Style> </Style>
<Style Selector="^.ToolTip /template/ Thumb"> <Style Selector="^.ToolTip /template/ Thumb">
<Setter Property="ToolTip.Tip" Value="{Binding $parent[Slider].Value, Mode=OneWay}" /> <Setter Property="ToolTip.Tip" Value="{Binding $parent[Slider].Value, Mode=OneWay, StringFormat='\{0:f\}'}" />
<Setter Property="ToolTip.Placement" Value="Top" /> <Setter Property="ToolTip.Placement" Value="Top" />
<Setter Property="ToolTip.VerticalOffset" Value="-10" /> <Setter Property="ToolTip.VerticalOffset" Value="-10" />
<Setter Property="ToolTip.HorizontalOffset" Value="-15" /> <Setter Property="ToolTip.HorizontalOffset" Value="-15" />
@ -284,66 +277,15 @@
<Style Selector="^:disabled"> <Style Selector="^:disabled">
<Style Selector="^ /template/ RepeatButton#PART_DecreaseButton"> <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" /> <Setter Property="Background" Value="{DynamicResource SliderTrackDisabledForeground}" />
</Style> </Style>
<Style Selector="^ /template/ RepeatButton#PART_IncreaseButton"> <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" /> <Setter Property="Background" Value="{DynamicResource SliderTrackDisabledBackground}" />
</Style> </Style>
<Style Selector="^ /template/ Thumb"> <Style Selector="^ /template/ Thumb">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" /> <Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbDisabledBorderBrush}" />
</Style>
<Style Selector="^ /template/ TickBar">
<Setter Property="Fill" Value="{DynamicResource SliderTickBarFillDisabled}" />
</Style>
</Style>
<!-- PointerOver State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
</Style>
<Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
</Style>
<Style Selector="^ /template/ Thumb">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
</Style>
<Style Selector="^ /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
</Style>
<Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
</Style>
</Style>
<!-- Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
</Style>
<Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
</Style>
<Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
</Style>
<Style Selector="^ /template/ Thumb">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
</Style>
</Style>
<Style Selector="^:error">
<Setter Property="Foreground" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
<Style Selector="^ /template/ Thumb">
<Setter Property="Background" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
</Style> </Style>
</Style> </Style>

7
src/Semi.Avalonia/Themes/Light/Slider.axaml
View File

@ -14,10 +14,15 @@
<BoxShadows x:Key="SliderThumbBoxShadow">0 0 1 1 #1A000000</BoxShadows> <BoxShadows x:Key="SliderThumbBoxShadow">0 0 1 1 #1A000000</BoxShadows>
<sys:Double x:Key="SliderTickHorizontalHeight">4</sys:Double> <sys:Double x:Key="SliderTickHorizontalHeight">4</sys:Double>
<sys:Double x:Key="SliderTickVerticalWidth">4</sys:Double>
<SolidColorBrush x:Key="SliderTickForeground" Color="#C6CACD" /> <SolidColorBrush x:Key="SliderTickForeground" Color="#C6CACD" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="White" /> <SolidColorBrush x:Key="SliderThumbBackground" Color="White" />
<SolidColorBrush x:Key="SliderThumbBorderBrush" Color="#0077FA" /> <SolidColorBrush x:Key="SliderThumbBorderBrush" Color="#0077FA" />
<SolidColorBrush x:Key="SliderThumbPointeroverBorderBrush" Color="#0062D6" /> <SolidColorBrush x:Key="SliderThumbPointeroverBorderBrush" Color="#0062D6" />
<SolidColorBrush x:Key="SliderThumbPressedBorderBrush" Color="#004FB3" /> <SolidColorBrush x:Key="SliderThumbPressedBorderBrush" Color="#004FB3" />
<Thickness x:Key="SliderThumbBorderThickness">4</Thickness> <Thickness x:Key="SliderThumbBorderThickness">2</Thickness>
<SolidColorBrush x:Key="SliderTrackDisabledForeground" Color="#CBE7FE" />
<SolidColorBrush x:Key="SliderThumbDisabledBorderBrush" Color="#CBE7FE" />
<SolidColorBrush x:Key="SliderTrackDisabledBackground" Color="#F9F9F9" />
</ResourceDictionary> </ResourceDictionary>