Skip to content

Commit c575b2d

Browse files
ButchersBoyButchersBoy
committed
improve transitions on MaterialDesignActionToggleButton #73 
1 parent df0d9cc commit c575b2d

File tree

2 files changed

+94
-49
lines changed

2 files changed

+94
-49
lines changed

‎MainDemo.Wpf/Buttons.xaml

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,13 +92,20 @@
9292
</StackPanel>
9393
<TextBlock Margin="0 24 0 0" Grid.Row="4">Toggles</TextBlock>
9494
<StackPanel Grid.Row="5" Margin="0 24 0 0" Orientation="Horizontal">
95-
<ToggleButton Content="C" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionLightToggleButton}" IsChecked="True" />
96-
<ToggleButton Content="H" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionToggleButton}"/>
95+
<ToggleButton Content="C" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionLightToggleButton}" IsChecked="True"
96+
ToolTip="MaterialDesignActionLightToggleButton"/>
97+
<ToggleButton Content="H" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionToggleButton}"
98+
ToolTip="MaterialDesignActionToggleButton"/>
9799
<!-- checkbox style same as toggle button -->
98-
<CheckBox Content="E" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionDarkCheckBox}"/>
99-
<ToggleButton Content="C" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionAccentToggleButton}"/>
100-
<ToggleButton Content="K" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionToggleButton}" IsEnabled="False"/>
101-
<ToggleButton Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionToggleButton}">
100+
<CheckBox Content="E" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionDarkCheckBox}"
101+
ToolTip="MaterialDesignActionDarkCheckBox"/>
102+
<ToggleButton Content="C" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionAccentToggleButton}"
103+
IsChecked="True"
104+
ToolTip="MaterialDesignActionAccentToggleButton"/>
105+
<ToggleButton Content="K" Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionToggleButton}" IsEnabled="False"
106+
ToolTip="MaterialDesignActionToggleButton"/>
107+
<ToggleButton Margin="0 0 8 8" Style="{StaticResource MaterialDesignActionToggleButton}"
108+
ToolTip="MaterialDesignActionToggleButton">
102109
<Image Source="Resources/ProfilePic.jpg"></Image>
103110
</ToggleButton>
104111
</StackPanel>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ToggleButton.xaml

Lines changed: 81 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -38,56 +38,94 @@
3838
</VisualState>
3939
</VisualStateGroup>
4040
<VisualStateGroup x:Name="CheckStates">
41+
<VisualStateGroup.Transitions>
42+
<VisualTransition From="*" To="Checked">
43+
<Storyboard>
44+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="UncheckedEllipse">
45+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
46+
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
47+
</DoubleAnimationUsingKeyFrames>
48+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
49+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
50+
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
51+
</DoubleAnimationUsingKeyFrames>
52+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckMark">
53+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
54+
<LinearDoubleKeyFrame Value="24" KeyTime="0:0:0.2" />
55+
</DoubleAnimationUsingKeyFrames>
56+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckMark">
57+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
58+
<LinearDoubleKeyFrame Value="24" KeyTime="0:0:0.2" />
59+
</DoubleAnimationUsingKeyFrames>
60+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.025" Storyboard.TargetProperty="(Control.Opacity)" Storyboard.TargetName="contentPresenter">
61+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.025" />
62+
</DoubleAnimationUsingKeyFrames>
63+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Visibility)" Storyboard.TargetName="CheckMark">
64+
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}" />
65+
</ObjectAnimationUsingKeyFrames>
66+
</Storyboard>
67+
</VisualTransition>
68+
<VisualTransition From="Checked" To="Unchecked">
69+
<Storyboard>
70+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
71+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
72+
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
73+
</DoubleAnimationUsingKeyFrames>
74+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="UncheckedEllipse">
75+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
76+
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
77+
</DoubleAnimationUsingKeyFrames>
78+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.1" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckMark">
79+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
80+
</DoubleAnimationUsingKeyFrames>
81+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.1" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckMark">
82+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
83+
</DoubleAnimationUsingKeyFrames>
84+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Opacity)" Storyboard.TargetName="contentPresenter">
85+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
86+
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.2" />
87+
</DoubleAnimationUsingKeyFrames>
88+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Visibility)" Storyboard.TargetName="CheckMark">
89+
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Hidden}" />
90+
</ObjectAnimationUsingKeyFrames>
91+
</Storyboard>
92+
</VisualTransition>
93+
</VisualStateGroup.Transitions>
4194
<VisualState x:Name="Checked">
4295
<Storyboard>
43-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="UncheckedEllipse">
44-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
45-
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
46-
</DoubleAnimationUsingKeyFrames>
47-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
48-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
49-
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
50-
</DoubleAnimationUsingKeyFrames>
51-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckMark">
52-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
53-
<LinearDoubleKeyFrame Value="24" KeyTime="0:0:0.2" />
54-
</DoubleAnimationUsingKeyFrames>
55-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckMark">
56-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
57-
<LinearDoubleKeyFrame Value="24" KeyTime="0:0:0.2" />
58-
</DoubleAnimationUsingKeyFrames>
59-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.025" Storyboard.TargetProperty="(Control.Opacity)" Storyboard.TargetName="contentPresenter">
60-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.025" />
61-
</DoubleAnimationUsingKeyFrames>
62-
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Visibility)" Storyboard.TargetName="CheckMark">
63-
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}" />
96+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="UncheckedEllipse"
97+
To="32" />
98+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse"
99+
To="32" />
100+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckMark"
101+
To="24" />
102+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckMark"
103+
To="24" />
104+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Opacity)" Storyboard.TargetName="contentPresenter"
105+
To="0" />
106+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Visibility)" Storyboard.TargetName="CheckMark"
107+
Duration="0">
108+
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
64109
</ObjectAnimationUsingKeyFrames>
65110
</Storyboard>
66111
</VisualState>
67112
<VisualState x:Name="Unchecked">
68113
<Storyboard>
69-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
70-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
71-
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
72-
</DoubleAnimationUsingKeyFrames>
73-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="UncheckedEllipse">
74-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
75-
<LinearDoubleKeyFrame Value="32" KeyTime="0:0:0.2" />
76-
</DoubleAnimationUsingKeyFrames>
77-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.1" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckMark">
78-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
79-
</DoubleAnimationUsingKeyFrames>
80-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.1" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckMark">
81-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
82-
</DoubleAnimationUsingKeyFrames>
83-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Opacity)" Storyboard.TargetName="contentPresenter">
84-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
85-
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.2" />
86-
</DoubleAnimationUsingKeyFrames>
87-
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Visibility)" Storyboard.TargetName="CheckMark">
88-
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Hidden}" />
89-
</ObjectAnimationUsingKeyFrames>
90-
</Storyboard>
114+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="UncheckedEllipse"
115+
To="32" />
116+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse"
117+
To="32" />
118+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckMark"
119+
To="0" />
120+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckMark"
121+
To="0" />
122+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Opacity)" Storyboard.TargetName="contentPresenter"
123+
To="1" />
124+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Visibility)" Storyboard.TargetName="CheckMark"
125+
Duration="0">
126+
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Hidden}" />
127+
</ObjectAnimationUsingKeyFrames>
128+
</Storyboard>
91129
</VisualState>
92130
<VisualState x:Name="Indeterminate">
93131
<Storyboard>

0 commit comments

Comments
 (0)