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

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

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