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

Fix Animation

pull/4069/head
JamRemco 6 years ago
parent
34622c4559
commit
7b2ada673a
6 changed files with 356 additions and 240 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. 12
      samples/ControlCatalog/App.xaml
  2. 44
      samples/ControlCatalog/MainView.xaml.cs
  3. 2
      samples/ControlCatalog/MainWindow.xaml
  4. 1
      samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml
  5. 141
      src/Avalonia.Themes.Default/ToggleSwitch.xaml
  6. 396
      src/Avalonia.Themes.Fluent/ToggleSwitch.xaml

12
samples/ControlCatalog/App.xaml
View File

@ -2,10 +2,16 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ControlCatalog.App"> x:Class="ControlCatalog.App">
<Application.Styles> <Application.Styles>
<StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/> <!--<StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/> <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/> <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>-->
<Style Selector="TextBlock.h1">
<StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default" />
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Accents/FluentDark.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/FluentTheme.xaml"/>
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>
<Style Selector="TextBlock.h1">
<Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/> <Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/>
<Setter Property="FontWeight" Value="Medium"/> <Setter Property="FontWeight" Value="Medium"/>
</Style> </Style>

44
samples/ControlCatalog/MainView.xaml.cs
View File

@ -32,30 +32,30 @@ namespace ControlCatalog
} }
var light = new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog")) //var light = new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
{ //{
Source = new Uri("resm:Avalonia.Themes.Default.Accents.BaseLight.xaml?assembly=Avalonia.Themes.Default") // Source = new Uri("resm:Avalonia.Themes.Default.Accents.BaseLight.xaml?assembly=Avalonia.Themes.Default")
}; //};
var dark = new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog")) //var dark = new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
{ //{
Source = new Uri("resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default") // Source = new Uri("resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default")
}; //};
var themes = this.Find<ComboBox>("Themes"); //var themes = this.Find<ComboBox>("Themes");
themes.SelectionChanged += (sender, e) => //themes.SelectionChanged += (sender, e) =>
{ //{
switch (themes.SelectedIndex) // switch (themes.SelectedIndex)
{ // {
case 0: // case 0:
Styles[0] = light; // Styles[0] = light;
break; // break;
case 1: // case 1:
Styles[0] = dark; // Styles[0] = dark;
break; // break;
} // }
}; //};
Styles.Add(light); //Styles.Add(light);
var decorations = this.Find<ComboBox>("Decorations"); var decorations = this.Find<ComboBox>("Decorations");
decorations.SelectionChanged += (sender, e) => decorations.SelectionChanged += (sender, e) =>

2
samples/ControlCatalog/MainWindow.xaml
View File

@ -7,7 +7,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:ControlCatalog.ViewModels" xmlns:vm="clr-namespace:ControlCatalog.ViewModels"
xmlns:v="clr-namespace:ControlCatalog.Views" xmlns:v="clr-namespace:ControlCatalog.Views"
x:Class="ControlCatalog.MainWindow" WindowState="{Binding WindowState, Mode=TwoWay}" Background="Transparent"> x:Class="ControlCatalog.MainWindow" WindowState="{Binding WindowState, Mode=TwoWay}">
<NativeMenu.Menu> <NativeMenu.Menu>
<NativeMenu> <NativeMenu>
<NativeMenuItem Header="File"> <NativeMenuItem Header="File">

1
samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml
View File

@ -32,6 +32,7 @@
<TextBlock Text="Disabled"/> <TextBlock Text="Disabled"/>
<AutoCompleteBox Width="200" <AutoCompleteBox Width="200"
IsEnabled="False"/> IsEnabled="False"/>
<ToggleSwitch> Light</ToggleSwitch>
</StackPanel> </StackPanel>

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

@ -1,7 +1,9 @@
<!--Version Fri 5-6 17:30 --> <!--Version zo 8-62020 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">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20" Width="250" Spacing="24"> <StackPanel Margin="20" Width="250" Spacing="24">
@ -12,7 +14,7 @@
<TextBlock <TextBlock
Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting" Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
TextWrapping="Wrap"/> TextWrapping="Wrap"/>
<ToggleSwitch Content="Updates" <ToggleSwitch Content="Enable automatic Updates?"
FontWeight="Medium" FontWeight="Medium"
VerticalAlignment="Bottom"/> VerticalAlignment="Bottom"/>
</StackPanel> </StackPanel>
@ -44,9 +46,10 @@
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Grid ColumnDefinitions="Auto,*" <Grid
RowDefinitions="22,auto" ColumnDefinitions="Auto,*"
> RowDefinitions="22,auto">
<Canvas <Canvas
Height="24" Height="24"
Grid.Row="1" Grid.Row="1"
@ -60,15 +63,16 @@
BorderThickness="2" BorderThickness="2"
CornerRadius="100"/> CornerRadius="100"/>
<Ellipse <Ellipse
Name="PART_CircleThumb" Name="PART_CircleThumb"
Height="10" Width="10" Height="10" Width="10"
Canvas.Top="7" Canvas.Top="7"/>
/>
<ContentControl Name="PART_TextBooleanValue"
Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/>
<ContentControl
Name="PART_TextBooleanValue"
Canvas.Left="54"
VerticalContentAlignment="Bottom"
Height="20"/>
</Canvas> </Canvas>
<ContentPresenter <ContentPresenter
@ -86,37 +90,49 @@
</Setter> </Setter>
</Style> </Style>
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb"> <!--Position Transition Thump-->
<Style Selector="ToggleSwitch /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
<Setter Property="Fill" Value="White" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Canvas.Left" Duration="0:0:0.4" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>
<!--Color thumbAnimation Off-->
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/> <!--psition animation is handled by transition-->
<Style.Animations> <Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut"> <Animation Duration="0:0:0.35" FillMode="Forward" Easing="CubicEaseOut" >
<KeyFrame Cue="0%"> <KeyFrame Cue="0%">
<Setter Property="Fill" Value="White"/> <Setter Property="Fill" Value="White"/>
<Setter Property="Canvas.Left" Value="28"/>
</KeyFrame> </KeyFrame>
<KeyFrame Cue="100%"> <KeyFrame Cue="100%">
<Setter Property="Fill" Value="royalBlue"/> <Setter Property="Fill" Value="Royalblue"/>
<Setter Property="Canvas.Left" Value="5"/>
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<!--color thumbAnimation Onn-->
<Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb"> <Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbRight}"/> <!--psition animation is handled by transition-->
<Style.Animations> <Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut"> <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%"> <KeyFrame Cue="0%">
<Setter Property="Fill" Value="royalBlue"/> <Setter Property="Fill" Value="Royalblue"/>
<Setter Property="Canvas.Left" Value="5"/>
</KeyFrame> </KeyFrame>
<KeyFrame Cue="100%"> <KeyFrame Cue="100%">
<Setter Property="Fill" Value="White"/> <Setter Property="Fill" Value="White"/>
<Setter Property="Canvas.Left" Value="28"/>
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<!--color BackGround Animation Off-->
<Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground"> <Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
<Style.Animations> <Style.Animations>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut"> <Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
@ -128,27 +144,36 @@
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
<Setter Property="BorderBrush" Value="RoyalBlue"/> <Setter Property="BorderBrush" Value="Royalblue"/>
</Style> </Style>
<!--color BackGrounf Animation On-->
<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground"> <Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
<Style.Animations> <Style.Animations>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut"> <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%"> <KeyFrame Cue="0%">
<Setter Property="Background" Value="White"/> <Setter Property="Background" Value="white"/>
</KeyFrame> </KeyFrame>
<KeyFrame Cue="100%"> <KeyFrame Cue="100%">
<Setter Property="Background" Value="RoyalBlue"/> <Setter Property="Background" Value="Royalblue"/>
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
<Setter Property="BorderBrush" Value="Royalblue"/> <Setter Property="BorderBrush" Value="Royalblue"/>
</Style> </Style>
<!--<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/>
</Style>--> <!--<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground">
<Setter Property="Opacity" Value="100" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>-->
<!--Setting the On/Of Text. This will be changed in the near future -->
<Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue"> <Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="On"/> <Setter Property="Content" Value="On"/>
</Style> </Style>
@ -157,22 +182,45 @@
<Setter Property="Content" Value="Off"/> <Setter Property="Content" Value="Off"/>
</Style> </Style>
<!--BackGround MouseOver-->
<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover"> <Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/> <Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style> </Style>
<!--BackGround Mouseover and checked-->
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="Opacity" Value="50"/>
</Style>-->
<!--BackGround Focus-->
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground"> <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="Mediumblue"/> <Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}"/>
</Style> </Style>
<!--<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground"> <!--BackGround Focus + Mouseover-->
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/> <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
</Style>-->
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/> <Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style> </Style>
<!--Control disabled-->
<Style Selector="ToggleSwitch:disabled">
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
</Style>
<!--****** PRESSED ******-->
<!--Pressed is triggered the same time as checked, so i dont handle Pressed-->
<!--This is probebly because the checked is set on mousedown, Should this be changed to mouseUp?-->
<!--****** iNDETERMINATE ******-->
<!--What should i do here?-->
<!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Not set"/>
</Style>-->
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover"> <!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Style.Animations> <Style.Animations>
<Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut"> <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
@ -186,13 +234,14 @@
</Style.Animations> </Style.Animations>
</Style>--> </Style>-->
<Style Selector="ToggleSwitch:disabled">
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/> <Styles.Resources>
</Style>
<sys:Double x:Key="ThumbLeft">5</sys:Double>
<sys:Double x:Key="ThumbRight">28</sys:Double>
<Color x:Key="ColorFILLOn">RoyalBlue</Color> <!--Animating a color via a resource does not work!-->
<Color x:Key="ColorFILLOff">White</Color>
<!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue"> </Styles.Resources>
<Setter Property="Content" Value="Not set"/>
</Style>-->
</Styles> </Styles>

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

@ -1,177 +1,236 @@
<!--Version zo 8-62020 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">
<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"/>
<TextBlock <TextBlock
Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting" Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
TextWrapping="Wrap"/> TextWrapping="Wrap"/>
<ToggleSwitch Content="Updates" <ToggleSwitch Content="Enable automatic Updates?"
FontWeight="Medium"
VerticalAlignment="Bottom"/> VerticalAlignment="Bottom"/>
</StackPanel> </StackPanel>
<StackPanel Spacing="12"> <StackPanel Spacing="12">
<TextBlock <TextBlock
Text="Previewer" Text="Previewer"
Classes="h1"/> Classes="h1"/>
<TextBlock <TextBlock
Text="The previewer Shows a preview off your code, this could slow down your system" Text="The previewer Shows a preview off your code, this could slow down your system"
TextWrapping="Wrap"/> TextWrapping="Wrap"/>
<ToggleSwitch <ToggleSwitch
Content="Previewer" Content="Previewer"
IsChecked="True" IsChecked="True"
FontWeight="Medium"/> />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</Design.PreviewWith> </Design.PreviewWith>
<Style Selector="ToggleSwitch">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Style Selector="ToggleSwitch"> <!--<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />-->
<!--<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />-->
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> <Setter Property="MinWidth" Value="72"/>
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> <Setter Property="MinHeight" Value="32"/>
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
<Setter Property="MinWidth" Value="72"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="Template">
<ControlTemplate>
<Grid ColumnDefinitions="Auto,*"
RowDefinitions="22,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"
/>
<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="RoyalBlue"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground"> <Setter Property="Template">
<Style.Animations> <ControlTemplate>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut"> <Grid
<KeyFrame Cue="0%"> ColumnDefinitions="Auto,*"
<Setter Property="Background" Value="White"/> RowDefinitions="22,auto"
</KeyFrame> Background="{TemplateBinding Background}">
<KeyFrame Cue="100%">
<Setter Property="Background" Value="RoyalBlue"/> <Canvas
</KeyFrame> Height="24"
</Animation> Grid.Row="1"
</Style.Animations> Grid.Column="0">
<Setter Property="BorderBrush" Value="Royalblue"/>
</Style> <Border
Name="PART_BorderBackground"
<!--<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground"> Height="18" Width="40"
<Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/> Canvas.Top="2"
</Style>--> Canvas.Left="0"
Background="{TemplateBinding Background}"
<Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue"> BorderThickness="{TemplateBinding BorderThickness}"
<Setter Property="Content" Value="On"/> CornerRadius="100"/>
</Style>
<Ellipse
<Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue"> Name="PART_CircleThumb"
<Setter Property="Content" Value="Off"/> Height="10" Width="10"
</Style> Canvas.Top="6"/>
<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover"> <ContentControl
<Setter Property="BorderBrush" Value="cornflowerblue"/> Name="PART_TextBooleanValue"
</Style> Canvas.Left="54"
VerticalContentAlignment="Bottom"
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground"> Height="20"/>
<Setter Property="BorderBrush" Value="Mediumblue"/> </Canvas>
</Style>
<ContentPresenter
<!--<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground"> Name="PART_ContentPresenter"
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/> ContentTemplate="{TemplateBinding ContentTemplate}"
</Style>--> Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover"> VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
<Setter Property="BorderBrush" Value="cornflowerblue"/> HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
</Style> Background="Transparent"
IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover"> Grid.Row="0" Grid.Column="0"/>
</Grid>
</ControlTemplate>
</Setter>
</Style>
<!--Position Transition Thump-->
<Style Selector="ToggleSwitch /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
<Setter Property="Fill" Value="White" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Canvas.Left" Duration="0:0:0.4" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>
<!--Color thumbAnimation Off-->
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
<!--psition animation is handled by transition-->
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut" >
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="White"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="Royalblue"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<!--color thumbAnimation Onn-->
<Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbRight}"/>
<!--psition animation is handled by transition-->
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="Royalblue"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="White"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<!--color BackGround Animation Off-->
<Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.4" 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="Royalblue"/>
</Style>
<!--color BackGrounf Animation On-->
<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.4" 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 /template/ Border#PART_BorderBackground">
<Setter Property="Opacity" Value="100" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>-->
<!--Setting the On/Of Text. This will be changed in the near future -->
<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>
<!--BackGround MouseOver-->
<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style>
<!--BackGround Mouseover and checked-->
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="Opacity" Value="50"/>
</Style>-->
<!--BackGround Focus-->
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}"/>
</Style>
<!--BackGround Focus + Mouseover-->
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style>
<!--Control disabled-->
<Style Selector="ToggleSwitch:disabled">
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
</Style>
<!--****** PRESSED ******-->
<!--Pressed is triggered the same time as checked, so i dont handle Pressed-->
<!--This is probebly because the checked is set on mousedown, Should this be changed to mouseUp?-->
<!--****** iNDETERMINATE ******-->
<!--What should i do here?-->
<!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Not set"/>
</Style>-->
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Style.Animations> <Style.Animations>
<Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut"> <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%"> <KeyFrame Cue="0%">
@ -183,15 +242,16 @@
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style>--> </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.Resources>
<sys:Double x:Key="ThumbLeft">5</sys:Double>
<sys:Double x:Key="ThumbRight">26</sys:Double>
<Color x:Key="ColorFILLOn">RoyalBlue</Color>
<!--Animating a color via a resource does not work!-->
<Color x:Key="ColorFILLOff">White</Color>
</Styles.Resources>
</Styles> </Styles>

Write Preview
Loading…
Cancel
Save