tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix border

pull/4069/head
JamRemco 6 years ago
parent
78993eb33c
commit
19eac7224a
4 changed files with 139 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/Avalonia.Controls/ToggleSwitch.cs
  2. 2
      src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
  3. 2
      src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
  4. 266
      src/Avalonia.Themes.Fluent/ToggleSwitch.xaml

2
src/Avalonia.Controls/ToggleSwitch.cs
View File

@ -106,7 +106,7 @@ namespace Avalonia.Controls
OnContentPresenter = presenter; OnContentPresenter = presenter;
result = true; result = true;
} }
if (presenter.Name == "PART_OffContentPresenter") else if (presenter.Name == "PART_OffContentPresenter")
{ {
OffContentPresenter = presenter; OffContentPresenter = presenter;
result = true; result = true;

2
src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
View File

@ -349,7 +349,7 @@
<!--<x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>--> <!--<x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>-->
<Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness> <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
<!--<x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>--> <!--<x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>-->
<Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness> <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1.5</Thickness>
<StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" /> <StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" /> <StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" /> <StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />

2
src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
View File

@ -350,7 +350,7 @@
<Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness> <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
<!--<x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>--> <!--<x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>-->
<Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness> <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1.5</Thickness>
<StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" /> <StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" /> <StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" /> <StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />

266
src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
View File

@ -1,12 +1,12 @@
<!--Version wo 10-6-2020 17:30 --> <!--Version wo 10-6-2020 17:30 -->
<Styles xmlns="https://github.com/avaloniaui" <Styles 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=netstandard"> xmlns:sys="clr-namespace:System;assembly=netstandard"
>
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20" Width="250" Spacing="24" > <StackPanel Margin="20" Width="250" Spacing="24" >
<StackPanel Spacing="12"> <StackPanel Spacing="12" >
<TextBlock <TextBlock
Text="Automatic updates" Text="Automatic updates"
Classes="h1"/> Classes="h1"/>
@ -44,148 +44,157 @@
<Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<!--<Setter Property="ManipulationMode" Value="System,TranslateX" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />-->
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Grid <Grid
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
RowDefinitions="Auto,*">
RowDefinitions="Auto,*">
<ContentPresenter x:Name="PART_ContentPresenter" <ContentPresenter x:Name="PART_ContentPresenter"
Grid.Row="0" Grid.Row="0"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
Margin="{DynamicResource ToggleSwitchTopHeaderMargin}" VerticalAlignment="Top"/>
VerticalAlignment="Top"/>
<Grid <Grid
Grid.Row="1" Grid.Row="1"
MinWidth="{StaticResource ToggleSwitchThemeMinWidth}" MinWidth="{StaticResource ToggleSwitchThemeMinWidth}"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Top"> VerticalAlignment="Top">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" /> <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" /> <RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
<ColumnDefinition Width="12" MaxWidth="12" /> <ColumnDefinition Width="12" MaxWidth="12" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<Grid x:Name="SwitchAreaGrid" <Grid x:Name="SwitchAreaGrid"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.ColumnSpan="3" Grid.ColumnSpan="3"
Margin="0,5" Margin="0,5" />
Background="{DynamicResource ToggleSwitchContainerBackground}" />
<ContentPresenter x:Name="PART_OffContentPresenter" <ContentPresenter x:Name="PART_OffContentPresenter"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.Column="2" Grid.Column="2"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}"
Content="{TemplateBinding OffContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentTemplate="{TemplateBinding OffContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
<ContentPresenter x:Name="PART_OnContentPresenter" <ContentPresenter x:Name="PART_OnContentPresenter"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.Column="2" Grid.Column="2"
Content="{TemplateBinding OnContent}"
Content="{TemplateBinding OnContent}" ContentTemplate="{TemplateBinding OnContentTemplate}"
ContentTemplate="{TemplateBinding OnContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
<Border x:Name="OuterBorder" <Border x:Name="OuterBorder"
Grid.Row="1" Grid.Row="1"
Height="20" Height="20"
Width="40" Width="40"
CornerRadius="50" CornerRadius="10"
Background="{DynamicResource ToggleSwitchFilloff}" BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
BorderBrush="{DynamicResource ToggleSwitchStrokeOn}"
BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
<Border x:Name="SwitchKnobBounds" <Border x:Name="SwitchKnobBounds"
Grid.Row="1" Grid.Row="1"
Height="20" Height="20"
Width="40" Width="40"
CornerRadius="50" CornerRadius="10"
Background="{DynamicResource ToggleSwitchFillOn}" BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>
BorderBrush="{DynamicResource ToggleSwitchStrokeOn}"
BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"
/>
<Grid x:Name="SwitchKnob" <Grid x:Name="SwitchKnob"
Grid.Row="1" Grid.Row="1"
HorizontalAlignment="Left" HorizontalAlignment="Left"
Width="20" Width="20"
Height="20"> Height="20">
<Ellipse x:Name="SwitchKnobOn"
Fill="{DynamicResource ToggleSwitchKnobFillOn}" <Ellipse x:Name="SwitchKnobOn"
Width="10" Width="10"
Height="10" Height="10"/>
/>
<Ellipse x:Name="SwitchKnobOff" <Ellipse x:Name="SwitchKnobOff"
Fill="{DynamicResource ToggleSwitchKnobFillOff}" Width="10"
Width="10" Height="10" />
Height="10" /> <Grid.RenderTransform>
<Grid.RenderTransform> <!--<TranslateTransform x:Name="KnobTranslateTransform" />-->
<!--<TranslateTransform x:Name="KnobTranslateTransform" />--> </Grid.RenderTransform>
</Grid.RenderTransform> </Grid>
</Grid>
<!--<Thumb x:Name="SwitchThumb"
<Thumb x:Name="SwitchThumb" Grid.RowSpan="3"
Grid.RowSpan="3" Grid.ColumnSpan="3">
Grid.ColumnSpan="3"> <Thumb.Template>
<Thumb.Template> <ControlTemplate>
<ControlTemplate> <Rectangle Fill="Transparent" />
<Rectangle Fill="Transparent" /> </ControlTemplate>
</ControlTemplate> </Thumb.Template>
</Thumb.Template> </Thumb>-->
</Thumb> </Grid>
</Grid>
</Grid>
</Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</Style> </Style>
<!--******** POINTEROVER *******--> <!--*********** Normal ********-->
<!-- Initial values If hardcode values in template they'll become Imutable -->
<Style Selector="ToggleSwitch:PointerOver /template/ Border#OuterBorder"> <Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/>
</Style>
<Style Selector="ToggleSwitch /template/ Border#OuterBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOff}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
</Style>
<Style Selector="ToggleSwitch /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
</Style>
<Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOn}"/>
<Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOn}"/>
</Style>
<Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}"/>
<Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOff}"/>
</Style>
<!--******** POINTEROVER *******-->
<Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
</Style> </Style>
<Style Selector="ToggleSwitch:PointerOver /template/ Ellipse#SwitchKnobOff"> <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
</Style> </Style>
<Style Selector="ToggleSwitch:PointerOver /template/ Ellipse#SwitchKnobOn"> <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
</Style> </Style>
<Style Selector="ToggleSwitch:PointerOver /template/ Border#SwitchKnobBounds"> <Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
</Style> </Style>
<Style Selector="ToggleSwitch:PointerOver /template/ Grid#SwitchAreaGrid"> <Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
</Style> </Style>
<!--******** PRESSED *******--> <!--******** PRESSED *******-->
@ -211,7 +220,7 @@
<Style Selector="ToggleSwitch:pressed /template/ Grid#SwitchAreaGrid"> <Style Selector="ToggleSwitch:pressed /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}"/>
</Style> </Style>
<!--******** DISABLED *******--> <!--******** DISABLED *******-->
<Style Selector="ToggleSwitch:disabled"> <Style Selector="ToggleSwitch:disabled">
@ -242,7 +251,7 @@
<!--******** CHECKED *******--> <!--******** CHECKED *******-->
<Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder"> <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="0"/>
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOff"> <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOff">
@ -251,7 +260,7 @@
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ Border#SwitchKnobBounds"> <Style Selector="ToggleSwitch:checked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="0"/> <Setter Property="Opacity" Value="1"/>
<!--<Setter Property="IsHitTestVisible" Value="false"/>--> <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
</Style> </Style>
@ -274,31 +283,29 @@
<!--******** UNCHECKED *******--> <!--******** UNCHECKED *******-->
<Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder"> <Style Selector="ToggleSwitch:unchecked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="1"/>
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOff"> <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="1"/>
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn"> <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="0"/> <Setter Property="Opacity" Value="0"/>
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobBounds"> <Style Selector="ToggleSwitch:unchecked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="0"/>
<!--<Setter Property="IsHitTestVisible" Value="false"/>--> </Style>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
<Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="1"/>
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter"> <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="0"/> <Setter Property="Opacity" Value="0"/>
</Style> </Style>
@ -309,7 +316,6 @@
<x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double> <x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>
<x:Double x:Key="KnobOnPosition">5</x:Double> <x:Double x:Key="KnobOnPosition">5</x:Double>
<x:Double x:Key="KnobOffPosition">28</x:Double> <x:Double x:Key="KnobOffPosition">28</x:Double>
</Styles.Resources> </Styles.Resources>

Write Preview
Loading…
Cancel
Save