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

fix: fix Switch BorderThickness issue.

Browse Source
This commit is contained in:
Zhang Dian 2024-11-30 00:17:23 +08:00
parent 142abbf3da
commit 147d4fd968
2 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
View File

@ -3,12 +3,34 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True"> x:CompileBindings="True">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20"> <ThemeVariantScope RequestedThemeVariant="Dark">
<ToggleSwitch <StackPanel Spacing="8" Background="{DynamicResource SemiBackground0Color}">
Content="Content" <StackPanel Orientation="Horizontal">
OffContent="OffContent" <ToggleSwitch Classes="Small" />
OnContent="OnContent" /> <ToggleSwitch Classes="Small" IsChecked="True" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch />
<ToggleSwitch IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Classes="Large" />
<ToggleSwitch Classes="Large" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" />
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" />
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" />
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" IsChecked="True" />
</StackPanel>
</StackPanel>
</ThemeVariantScope>
</Design.PreviewWith> </Design.PreviewWith>
<ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch"> <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
@ -33,8 +55,6 @@
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch"> <ControlTemplate TargetType="ToggleSwitch">
<Grid <Grid
Background="{TemplateBinding Background}"
Cursor="Hand"
RowDefinitions="Auto, *" RowDefinitions="Auto, *"
ColumnDefinitions="Auto, *"> ColumnDefinitions="Auto, *">
<ContentPresenter <ContentPresenter
@ -54,9 +74,10 @@
TemplatedControl.IsTemplateFocusTarget="True" TemplatedControl.IsTemplateFocusTarget="True"
Width="{DynamicResource ToggleSwitchDefaultWidth}" Width="{DynamicResource ToggleSwitchDefaultWidth}"
Height="{DynamicResource ToggleSwitchDefaultHeight}" Height="{DynamicResource ToggleSwitchDefaultHeight}"
BackgroundSizing="OuterBorderEdge"
BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}" BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
BorderThickness="1" BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"> CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
<Border.Transitions> <Border.Transitions>
<Transitions> <Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" /> <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -80,7 +101,7 @@
<Arc <Arc
Name="SwitchKnobLoadingIndicator" Name="SwitchKnobLoadingIndicator"
IsVisible="False" IsVisible="False"
StrokeThickness="2" StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
StartAngle="0" StartAngle="0"
SweepAngle="140" SweepAngle="140"
StrokeJoin="Round" StrokeJoin="Round"
@ -157,7 +178,6 @@
<Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder"> <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" /> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
</Style> </Style>
</Style> </Style>
@ -201,6 +221,7 @@
<Style Selector="^ /template/ Border#SwitchBackgroundBorder"> <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchSmallCornerRadius}" />
</Style> </Style>
<Style Selector="^ /template/ Canvas#PART_SwitchKnob"> <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
@ -219,6 +240,7 @@
<Style Selector="^ /template/ Border#SwitchBackgroundBorder"> <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchLargeCornerRadius}" />
</Style> </Style>
<Style Selector="^ /template/ Canvas#PART_SwitchKnob"> <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
@ -249,9 +271,10 @@
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
Width="{DynamicResource ToggleSwitchDefaultWidth}" Width="{DynamicResource ToggleSwitchDefaultWidth}"
Height="{DynamicResource ToggleSwitchDefaultHeight}" Height="{DynamicResource ToggleSwitchDefaultHeight}"
BackgroundSizing="OuterBorderEdge"
BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}" BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
BorderThickness="1" BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"> CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
<Border.Transitions> <Border.Transitions>
<Transitions> <Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" /> <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -279,7 +302,7 @@
<Arc <Arc
Name="SwitchKnobLoadingIndicator" Name="SwitchKnobLoadingIndicator"
IsVisible="False" IsVisible="False"
StrokeThickness="2" StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
StartAngle="0" StartAngle="0"
SweepAngle="140" SweepAngle="140"
StrokeJoin="Round" StrokeJoin="Round"

11
src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
View File

@ -5,13 +5,18 @@
<x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double> <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
<x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double> <x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double>
<x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double> <x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double>
<Thickness x:Key="ToggleSwitchDefaultBorderThickness">1</Thickness>
<CornerRadius x:Key="ToggleSwitchDefaultCornerRadius">12</CornerRadius>
<CornerRadius x:Key="ToggleSwitchSmallCornerRadius">8</CornerRadius>
<CornerRadius x:Key="ToggleSwitchLargeCornerRadius">16</CornerRadius>
<CornerRadius x:Key="ToggleSwitchIndicatorCornerRadius">100</CornerRadius> <CornerRadius x:Key="ToggleSwitchIndicatorCornerRadius">100</CornerRadius>
<x:Double x:Key="ToggleSwitchIndicatorDefaultWidth">18</x:Double> <x:Double x:Key="ToggleSwitchIndicatorDefaultWidth">18</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double> <x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</x:Double> <x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</x:Double>
<Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">2 0 0 0</Thickness> <Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">1 0 0 0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorSmallMargin">1 0 0 0</Thickness> <Thickness x:Key="ToggleSwitchIndicatorSmallMargin">0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorLargeMargin">3 0 0 0</Thickness> <Thickness x:Key="ToggleSwitchIndicatorLargeMargin">2 0 0 0</Thickness>
<x:Double x:Key="ToggleSwitchLoadingIndicatorDefaultStrokeThickness">2</x:Double>
<x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double> <x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double>
<x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double> <x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double>