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

Test

pull/4069/head
JamRemco 6 years ago
parent
576365ff8f
commit
34622c4559
3 changed files with 150 additions and 148 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
      samples/ControlCatalog/Pages/ToolTipPage.xaml
  2. 286
      src/Avalonia.Themes.Default/ToggleSwitch.xaml
  3. 10
      src/Avalonia.Themes.Fluent/ToggleSwitch.xaml

2
samples/ControlCatalog/Pages/ToolTipPage.xaml
View File

@ -18,7 +18,7 @@
ToolTip.Tip="This is a ToolTip"> ToolTip.Tip="This is a ToolTip">
<TextBlock>Hover Here</TextBlock> <TextBlock>Hover Here</TextBlock>
</Border> </Border>
<CheckBox Grid.Column="1" <ToggleSwitch Grid.Column="1"
Margin="5" Margin="5"
Grid.Row="0" Grid.Row="0"
IsChecked="{Binding ElementName=Border, Path=(ToolTip.IsOpen)}" IsChecked="{Binding ElementName=Border, Path=(ToolTip.IsOpen)}"

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

@ -1,6 +1,7 @@
<!--Version Fri 5-6 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">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20" Width="250" Spacing="24"> <StackPanel Margin="20" Width="250" Spacing="24">
@ -32,146 +33,147 @@
</StackPanel> </StackPanel>
</Design.PreviewWith> </Design.PreviewWith>
<Style Selector="ToggleSwitch">
<Style Selector="ToggleSwitch">
<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="Foreground" Value="{DynamicResource ThemeForegroundBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
<Setter Property="MinWidth" Value="72"/> <Setter Property="MinWidth" Value="72"/>
<Setter Property="MinHeight" Value="32"/> <Setter Property="MinHeight" Value="32"/>
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Grid ColumnDefinitions="Auto,*" <Grid ColumnDefinitions="Auto,*"
RowDefinitions="22,auto" RowDefinitions="22,auto"
> >
<Canvas <Canvas
Height="24" Height="24"
Grid.Row="1" Grid.Row="1"
Grid.Column="0"> Grid.Column="0">
<Border <Border
Name="PART_BorderBackground" Name="PART_BorderBackground"
Height="20" Width="44" Height="20" Width="44"
Canvas.Top="2" Canvas.Top="2"
Canvas.Left="0" Canvas.Left="0"
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"
Canvas.Left="5"/> />
<ContentControl Name="PART_TextBooleanValue" <ContentControl Name="PART_TextBooleanValue"
Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/> Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/>
</Canvas> </Canvas>
<ContentPresenter <ContentPresenter
Name="PART_ContentPresenter" Name="PART_ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Background="Transparent" Background="Transparent"
IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}" IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
Grid.Row="0" Grid.Column="0"/> Grid.Row="0" Grid.Column="0"/>
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</Style> </Style>
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb"> <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
<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="White"/> <Setter Property="Fill" Value="White"/>
<Setter Property="Canvas.Left" Value="28"/> <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"/> <Setter Property="Canvas.Left" Value="5"/>
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb"> <Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
<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"/> <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"/> <Setter Property="Canvas.Left" Value="28"/>
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<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">
<KeyFrame Cue="0%"> <KeyFrame Cue="0%">
<Setter Property="Background" Value="Royalblue"/> <Setter Property="Background" Value="Royalblue"/>
</KeyFrame> </KeyFrame>
<KeyFrame Cue="100%"> <KeyFrame Cue="100%">
<Setter Property="Background" Value="White"/> <Setter Property="Background" Value="White"/>
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
<Setter Property="BorderBrush" Value="royalblue"/> <Setter Property="BorderBrush" Value="RoyalBlue"/>
</Style> </Style>
<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.5" 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"> <!--<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/> <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/>
</Style>--> </Style>-->
<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>
<Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue"> <Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Off"/> <Setter Property="Content" Value="Off"/>
</Style> </Style>
<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>
<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="Mediumblue"/>
</Style> </Style>
<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground"> <!--<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
<Setter Property="Background" Value="Royalblue"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
</Style> </Style>-->
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover"> <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/> <Setter Property="BorderBrush" Value="cornflowerblue"/>
</Style> </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">
<KeyFrame Cue="0%"> <KeyFrame Cue="0%">
@ -184,12 +186,12 @@
</Style.Animations> </Style.Animations>
</Style>--> </Style>-->
<Style Selector="ToggleSwitch:disabled"> <Style Selector="ToggleSwitch:disabled">
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/> <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
</Style> </Style>
<!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue"> <!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Not set"/> <Setter Property="Content" Value="Not set"/>
</Style>--> </Style>-->

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

@ -62,7 +62,7 @@
Name="PART_CircleThumb" Name="PART_CircleThumb"
Height="10" Width="10" Height="10" Width="10"
Canvas.Top="7" Canvas.Top="7"
Canvas.Left="5"/> />
<ContentControl Name="PART_TextBooleanValue" <ContentControl Name="PART_TextBooleanValue"
Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/> Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/>
@ -126,7 +126,7 @@
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/> <Setter Property="BorderBrush" Value="RoyalBlue"/>
</Style> </Style>
<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground"> <Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
@ -140,7 +140,7 @@
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/> <Setter Property="BorderBrush" Value="Royalblue"/>
</Style> </Style>
<!--<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground"> <!--<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground">
@ -163,9 +163,9 @@
<Setter Property="BorderBrush" Value="Mediumblue"/> <Setter Property="BorderBrush" Value="Mediumblue"/>
</Style> </Style>
<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground"> <!--<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
</Style> </Style>-->
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover"> <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/> <Setter Property="BorderBrush" Value="cornflowerblue"/>

Write Preview
Loading…
Cancel
Save