Skip to content

Commit 87f1f67

Browse files
United600United600
committed
add expander toggle button animation
1 parent ebfb44a commit 87f1f67

4 files changed

Lines changed: 234 additions & 60 deletions

File tree

‎src/Notepads/Controls/FindAndReplace/FindAndReplaceControl.xaml‎

Lines changed: 49 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,44 @@
99
d:DesignHeight="72"
1010
mc:Ignorable="d">
1111

12+
<UserControl.Resources>
13+
<ResourceDictionary>
14+
<ResourceDictionary.MergedDictionaries>
15+
<ResourceDictionary Source="ms-appx:///Resource/ExpanderToggleButtonStyle.xaml" />
16+
</ResourceDictionary.MergedDictionaries>
17+
18+
<x:Double x:Key="ExpanderChevronEndRotateTransformAngle">90.0</x:Double>
19+
20+
<x:String x:Key="LineAnimationDuration">00:00:00.500</x:String>
21+
<BackEase x:Key="LineEaseOutBackEase" EasingMode="EaseOut" Amplitude="0.75" />
22+
<BackEase x:Key="LineEaseInBackEase" EasingMode="EaseIn" Amplitude="0.75" />
23+
24+
<Storyboard x:Name="OptionButtonSelectionIndicatorLineVisible">
25+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
26+
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
27+
</ObjectAnimationUsingKeyFrames>
28+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
29+
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="9" EasingFunction="{StaticResource LineEaseOutBackEase}" />
30+
</DoubleAnimationUsingKeyFrames>
31+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
32+
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="23" EasingFunction="{StaticResource LineEaseOutBackEase}" />
33+
</DoubleAnimationUsingKeyFrames>
34+
</Storyboard>
35+
36+
<Storyboard x:Name="OptionButtonSelectionIndicatorLineCollapsed">
37+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
38+
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="16" EasingFunction="{StaticResource LineEaseInBackEase}" />
39+
</DoubleAnimationUsingKeyFrames>
40+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
41+
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="16" EasingFunction="{StaticResource LineEaseInBackEase}" />
42+
</DoubleAnimationUsingKeyFrames>
43+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
44+
<DiscreteObjectKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="Collapsed" />
45+
</ObjectAnimationUsingKeyFrames>
46+
</Storyboard>
47+
</ResourceDictionary>
48+
</UserControl.Resources>
49+
1250
<Grid x:Name="FindAndReplaceRootGrid"
1351
Padding="1,1,1,1"
1452
RowSpacing="4"
@@ -26,15 +64,14 @@
2664
<Grid x:Name="ToggleReplaceModeButtonGrid"
2765
Grid.Row="0"
2866
Grid.Column="0">
29-
<Button x:Name="ToggleReplaceModeButton"
30-
x:Uid="FindAndReplace_ToggleReplaceModeButton"
31-
Style="{StaticResource DismissButtonStyle}"
32-
Width="20"
33-
MinHeight="32"
34-
d:Content="&#xE76C;"
35-
FontSize="12"
36-
Click="ToggleReplaceModeButton_OnClick"
37-
IsTabStop="False" />
67+
<ToggleButton x:Name="ToggleReplaceModeButton"
68+
x:Uid="FindAndReplace_ToggleReplaceModeButton"
69+
Style="{StaticResource ExpanderToggleButtonStyle}"
70+
Width="20"
71+
MinHeight="32"
72+
Content="{StaticResource ExpanderChevronRightGlyph}"
73+
Click="ToggleReplaceModeButton_OnClick"
74+
IsTabStop="False" />
3875
</Grid>
3976

4077
<RelativePanel x:Name="FindBarPlaceHolder"
@@ -61,61 +98,15 @@
6198

6299
<Grid x:Name="OptionButtonGrid" RelativePanel.AlignRightWithPanel="True">
63100
<Line x:Name="OptionButtonSelectionIndicator"
64-
X1="16" Y1="24"
65-
X2="16" Y2="24"
101+
X1="16" Y1="24" d:X1="9"
102+
X2="16" Y2="24" d:X2="23"
66103
Stroke="{ThemeResource SystemControlHighlightAccentBrush}"
67104
StrokeThickness="2"
68105
StrokeStartLineCap="Round"
69106
StrokeEndLineCap="Round"
70107
Visibility="Collapsed"
71108
d:Visibility="Visible"
72-
IsHitTestVisible="False">
73-
<Line.Resources>
74-
<Storyboard x:Name="OptionButtonSelectionIndicatorLineVisible">
75-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
76-
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
77-
</ObjectAnimationUsingKeyFrames>
78-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
79-
<DiscreteDoubleKeyFrame KeyTime="0" Value="16" />
80-
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="9">
81-
<EasingDoubleKeyFrame.EasingFunction>
82-
<BackEase Amplitude="0.75" EasingMode="EaseOut" />
83-
</EasingDoubleKeyFrame.EasingFunction>
84-
</EasingDoubleKeyFrame>
85-
</DoubleAnimationUsingKeyFrames>
86-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
87-
<DiscreteDoubleKeyFrame KeyTime="0" Value="16" />
88-
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="23">
89-
<EasingDoubleKeyFrame.EasingFunction>
90-
<BackEase Amplitude="0.75" EasingMode="EaseOut" />
91-
</EasingDoubleKeyFrame.EasingFunction>
92-
</EasingDoubleKeyFrame>
93-
</DoubleAnimationUsingKeyFrames>
94-
</Storyboard>
95-
96-
<Storyboard x:Name="OptionButtonSelectionIndicatorLineCollapsed">
97-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
98-
<DiscreteDoubleKeyFrame KeyTime="0" Value="9" />
99-
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="16">
100-
<EasingDoubleKeyFrame.EasingFunction>
101-
<BackEase Amplitude="0.75" EasingMode="EaseIn" />
102-
</EasingDoubleKeyFrame.EasingFunction>
103-
</EasingDoubleKeyFrame>
104-
</DoubleAnimationUsingKeyFrames>
105-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
106-
<DiscreteDoubleKeyFrame KeyTime="0" Value="23" />
107-
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="16">
108-
<EasingDoubleKeyFrame.EasingFunction>
109-
<BackEase Amplitude="0.75" EasingMode="EaseIn" />
110-
</EasingDoubleKeyFrame.EasingFunction>
111-
</EasingDoubleKeyFrame>
112-
</DoubleAnimationUsingKeyFrames>
113-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
114-
<DiscreteObjectKeyFrame KeyTime="00:0:00.500" Value="Collapsed" />
115-
</ObjectAnimationUsingKeyFrames>
116-
</Storyboard>
117-
</Line.Resources>
118-
</Line>
109+
IsHitTestVisible="False" />
119110
<Button x:Name="OptionButton"
120111
x:Uid="FindAndReplace_SearchOptionButton"
121112
Style="{StaticResource DismissButtonStyle}"

‎src/Notepads/Controls/FindAndReplace/FindAndReplaceControl.xaml.cs‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,6 @@ public void ShowReplaceBar(bool showReplaceBar)
119119
{
120120
ToggleReplaceModeButtonGrid.SetValue(Grid.RowSpanProperty, 2);
121121
ToggleReplaceModeButton.VerticalAlignment = VerticalAlignment.Stretch;
122-
ToggleReplaceModeButton.Content = "\uE70D";
123122
ReplaceBarPlaceHolder.Visibility = Visibility.Visible;
124123
if (!string.IsNullOrEmpty(FindBar.Text))
125124
{
@@ -131,7 +130,6 @@ public void ShowReplaceBar(bool showReplaceBar)
131130
{
132131
ToggleReplaceModeButtonGrid.SetValue(Grid.RowSpanProperty, 1);
133132
ToggleReplaceModeButton.VerticalAlignment = VerticalAlignment.Top;
134-
ToggleReplaceModeButton.Content = "\uE76C";
135133
ReplaceBarPlaceHolder.Visibility = Visibility.Collapsed;
136134
ReplaceButton.IsEnabled = false;
137135
ReplaceAllButton.IsEnabled = false;

‎src/Notepads/Notepads.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -405,6 +405,10 @@
405405
<SubType>Designer</SubType>
406406
<Generator>MSBuild:Compile</Generator>
407407
</Page>
408+
<Page Include="Resource\ExpanderToggleButtonStyle.xaml">
409+
<SubType>Designer</SubType>
410+
<Generator>MSBuild:Compile</Generator>
411+
</Page>
408412
<Page Include="Resource\TransparentTextBoxStyle.xaml">
409413
<SubType>Designer</SubType>
410414
<Generator>MSBuild:Compile</Generator>

0 commit comments

Comments
 (0)