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

Init Wip for ToggleSwitch

pull/4069/head
JamRemco 6 years ago
parent
eaa861016f
commit
f39df90b93
8 changed files with 414 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/Avalonia.Controls/ToggleSwitch.cs
  2. 8
      src/Avalonia.Themes.Default/Avalonia.Themes.Default.csproj
  3. 1
      src/Avalonia.Themes.Default/DefaultTheme.xaml
  4. 188
      src/Avalonia.Themes.Default/ToggleSwitch.xaml
  5. 3
      src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
  6. 8
      src/Avalonia.Themes.Fluent/Avalonia.Themes.Fluent.csproj
  7. 1
      src/Avalonia.Themes.Fluent/FluentTheme.xaml
  8. 194
      src/Avalonia.Themes.Fluent/ToggleSwitch.xaml

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

@ -0,0 +1,11 @@
using Avalonia.Controls.Primitives;
namespace Avalonia.Controls
{
/// <summary>
/// A check box control.
/// </summary>
public class ToggleSwitch : ToggleButton
{
}
}

8
src/Avalonia.Themes.Default/Avalonia.Themes.Default.csproj
View File

@ -17,6 +17,14 @@
<!-- Compatibility with old apps, probably need to replace with AvaloniaResource -->
<EmbeddedResource Include="**/*.xaml" />
</ItemGroup>
<ItemGroup>
<None Remove="ToggleSwitch.xaml" />
</ItemGroup>
<ItemGroup>
<EmbeddedResource Update="ToggleSwitch.xaml">
<Generator>MSBuild:Compile</Generator>
</EmbeddedResource>
</ItemGroup>
<Import Project="..\..\build\BuildTargets.targets" />
<Import Project="..\..\build\Rx.props" />
</Project>

1
src/Avalonia.Themes.Default/DefaultTheme.xaml
View File

@ -52,4 +52,5 @@
<StyleInclude Source="resm:Avalonia.Themes.Default.WindowNotificationManager.xaml?assembly=Avalonia.Themes.Default"/>
<StyleInclude Source="resm:Avalonia.Themes.Default.NotificationCard.xaml?assembly=Avalonia.Themes.Default"/>
<StyleInclude Source="resm:Avalonia.Themes.Default.NativeMenuBar.xaml?assembly=Avalonia.Themes.Default"/>
<StyleInclude Source="resm:Avalonia.Themes.Default.ToggleSwitch.xaml?assembly=Avalonia.Themes.Default"/>
</Styles>

188
src/Avalonia.Themes.Default/ToggleSwitch.xaml
View File

@ -0,0 +1,188 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<StackPanel Margin="20" Width="200" Spacing="8">
<TextBlock
Text="Automatic updates"
Classes="h1"/>
<TextBlock
Text="Updates will be automaticly Foenloaded and installed when shutdown down"
TextWrapping="Wrap"/>
<ToggleSwitch Content="Updates"
FontWeight="Medium"
VerticalAlignment="Bottom"/>
<TextBlock
Text="Previewer"
Classes="h1"/>
<TextBlock
Text="The previewer Shows a representation off your code, this could slow down your system"
TextWrapping="Wrap"/>
<ToggleSwitch
Content="Previewer"
IsChecked="True"
FontWeight="Medium"/>
</StackPanel>
</Design.PreviewWith>
<Style Selector="ToggleSwitch" >
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
<Setter Property="MinWidth" Value="72"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="Template">
<ControlTemplate>
<Grid ColumnDefinitions="Auto,*"
RowDefinitions="18,auto"
>
<Canvas
Height="24"
Grid.Row="1"
Grid.Column="0">
<Border
Name="PART_BorderBackground"
Height="20" Width="44"
Canvas.Top="2"
Canvas.Left="0"
BorderThickness="2"
CornerRadius="100"/>
<Ellipse
Name="PART_CircleThumb"
Height="10" Width="10"
Canvas.Top="7"
Canvas.Left="5"/>
<ContentControl Name="PART_TextBooleanValue"
Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/>
</Canvas>
<ContentPresenter
Name="PART_ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Background="Transparent"
IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
Grid.Row="0" Grid.Column="0"/>
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="White"/>
<Setter Property="Canvas.Left" Value="28"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="RoyalBlue"/>
<Setter Property="Canvas.Left" Value="5"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="RoyalBlue"/>
<Setter Property="Canvas.Left" Value="5"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="White"/>
<Setter Property="Canvas.Left" Value="28"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="Royalblue"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="White"/>
</KeyFrame>
</Animation>
</Style.Animations>
<Setter Property="BorderBrush" Value="Silver"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="White"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="RoyalBlue"/>
</KeyFrame>
</Animation>
</Style.Animations>
<Setter Property="BorderBrush" Value="Royalblue"/>
</Style>
<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="On"/>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Off"/>
</Style>
<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style>
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="Mediumblue"/>
</Style>
<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
<Setter Property="Background" Value="RoyalBlue"/>
</Style>
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style>
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Style.Animations>
<Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="Royalblue"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="cornflowerblue"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>-->
<Style Selector="ToggleSwitch:disabled">
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
</Style>
<!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Not set"/>
</Style>-->
</Styles>

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

@ -343,5 +343,8 @@
<SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
<!--Recources ToggleSwitch-->
</Style.Resources>
</Style>

8
src/Avalonia.Themes.Fluent/Avalonia.Themes.Fluent.csproj
View File

@ -17,6 +17,14 @@
<!-- Compatibility with old apps, probably need to replace with AvaloniaResource -->
<EmbeddedResource Include="**/*.xaml" />
</ItemGroup>
<ItemGroup>
<None Remove="ToggleSwitch.xaml" />
</ItemGroup>
<ItemGroup>
<EmbeddedResource Update="ToggleSwitch.xaml">
<Generator>MSBuild:Compile</Generator>
</EmbeddedResource>
</ItemGroup>
<Import Project="..\..\build\BuildTargets.targets" />
<Import Project="..\..\build\Rx.props" />
</Project>

1
src/Avalonia.Themes.Fluent/FluentTheme.xaml
View File

@ -52,4 +52,5 @@
<StyleInclude Source="resm:Avalonia.Themes.Fluent.WindowNotificationManager.xaml?assembly=Avalonia.Themes.Fluent"/>
<StyleInclude Source="resm:Avalonia.Themes.Fluent.NotificationCard.xaml?assembly=Avalonia.Themes.Fluent"/>
<StyleInclude Source="resm:Avalonia.Themes.Fluent.NativeMenuBar.xaml?assembly=Avalonia.Themes.Fluent"/>
<StyleInclude Source="resm:Avalonia.Themes.Fluent.ToggleSwitch.xaml?assembly=Avalonia.Themes.Fluent"/>
</Styles>

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

@ -0,0 +1,194 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<StackPanel Margin="20" Width="200" Spacing="24">
<StackPanel Spacing="8">
<TextBlock
Text="Automatic updates"
Classes="h1"/>
<TextBlock
Text="Updates will be automaticly Downloaded and installed when shutdown down"
TextWrapping="Wrap"/>
<ToggleSwitch Content="Updates"
FontWeight="Medium"
VerticalAlignment="Bottom"/>
</StackPanel>
<StackPanel Spacing="8">
<TextBlock
Text="Previewer"
Classes="h1"/>
<TextBlock
Text="The previewer Shows a preview off your code, this could slow down your system"
TextWrapping="Wrap"/>
<ToggleSwitch
Content="Previewer"
IsChecked="True"
FontWeight="Medium"/>
</StackPanel>
</StackPanel>
</Design.PreviewWith>
<Style Selector="ToggleSwitch" >
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
<Setter Property="MinWidth" Value="72"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="Template">
<ControlTemplate>
<Grid ColumnDefinitions="Auto,*"
RowDefinitions="18,auto"
>
<Canvas
Height="24"
Grid.Row="1"
Grid.Column="0">
<Border
Name="PART_BorderBackground"
Height="20" Width="44"
Canvas.Top="2"
Canvas.Left="0"
BorderThickness="2"
CornerRadius="100"/>
<Ellipse
Name="PART_CircleThumb"
Height="10" Width="10"
Canvas.Top="7"
Canvas.Left="5"/>
<ContentControl Name="PART_TextBooleanValue"
Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/>
</Canvas>
<ContentPresenter
Name="PART_ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Background="Transparent"
IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
Grid.Row="0" Grid.Column="0"/>
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="White"/>
<Setter Property="Canvas.Left" Value="28"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="RoyalBlue"/>
<Setter Property="Canvas.Left" Value="5"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="RoyalBlue"/>
<Setter Property="Canvas.Left" Value="5"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="White"/>
<Setter Property="Canvas.Left" Value="28"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="Royalblue"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="White"/>
</KeyFrame>
</Animation>
</Style.Animations>
<Setter Property="BorderBrush" Value="Silver"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="White"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="RoyalBlue"/>
</KeyFrame>
</Animation>
</Style.Animations>
<Setter Property="BorderBrush" Value="Royalblue"/>
</Style>
<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="On"/>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Off"/>
</Style>
<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style>
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="Mediumblue"/>
</Style>
<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
<Setter Property="Background" Value="RoyalBlue"/>
</Style>
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style>
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Style.Animations>
<Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="Royalblue"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="cornflowerblue"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>-->
<Style Selector="ToggleSwitch:disabled">
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
</Style>
<!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Not set"/>
</Style>-->
</Styles>
Write Preview
Loading…
Cancel
Save