Skip to content

Commit

Permalink
add expander toggle button animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@United600
United600 committed May 25, 2024
1 parent 49c59ff commit 75b963b
Show file tree
Hide file tree
Showing 4 changed files with 234 additions and 60 deletions.
107 changes: 49 additions & 58 deletions src/Notepads/Controls/FindAndReplace/FindAndReplaceControl.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,44 @@
d:DesignHeight="72"
mc:Ignorable="d">

<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Resource/ExpanderToggleButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>

<x:Double x:Key="ExpanderChevronEndRotateTransformAngle">90.0</x:Double>

<x:String x:Key="LineAnimationDuration">00:00:00.500</x:String>
<BackEase x:Key="LineEaseOutBackEase" EasingMode="EaseOut" Amplitude="0.75" />
<BackEase x:Key="LineEaseInBackEase" EasingMode="EaseIn" Amplitude="0.75" />

<Storyboard x:Name="OptionButtonSelectionIndicatorLineVisible">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="9" EasingFunction="{StaticResource LineEaseOutBackEase}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="23" EasingFunction="{StaticResource LineEaseOutBackEase}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Name="OptionButtonSelectionIndicatorLineCollapsed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="16" EasingFunction="{StaticResource LineEaseInBackEase}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
<EasingDoubleKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="16" EasingFunction="{StaticResource LineEaseInBackEase}" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="{StaticResource LineAnimationDuration}" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</UserControl.Resources>

<Grid x:Name="FindAndReplaceRootGrid"
Padding="1,1,1,1"
RowSpacing="4"
Expand All @@ -26,15 +64,14 @@
<Grid x:Name="ToggleReplaceModeButtonGrid"
Grid.Row="0"
Grid.Column="0">
<Button x:Name="ToggleReplaceModeButton"
x:Uid="FindAndReplace_ToggleReplaceModeButton"
Style="{StaticResource DismissButtonStyle}"
Width="20"
MinHeight="32"
d:Content="&#xE76C;"
FontSize="12"
Click="ToggleReplaceModeButton_OnClick"
IsTabStop="False" />
<ToggleButton x:Name="ToggleReplaceModeButton"
x:Uid="FindAndReplace_ToggleReplaceModeButton"
Style="{StaticResource ExpanderToggleButtonStyle}"
Width="20"
MinHeight="32"
Content="{StaticResource ExpanderChevronRightGlyph}"
Click="ToggleReplaceModeButton_OnClick"
IsTabStop="False" />
</Grid>

<RelativePanel x:Name="FindBarPlaceHolder"
Expand All @@ -61,61 +98,15 @@

<Grid x:Name="OptionButtonGrid" RelativePanel.AlignRightWithPanel="True">
<Line x:Name="OptionButtonSelectionIndicator"
X1="16" Y1="24"
X2="16" Y2="24"
X1="16" Y1="24" d:X1="9"
X2="16" Y2="24" d:X2="23"
Stroke="{ThemeResource SystemControlHighlightAccentBrush}"
StrokeThickness="2"
StrokeStartLineCap="Round"
StrokeEndLineCap="Round"
Visibility="Collapsed"
d:Visibility="Visible"
IsHitTestVisible="False">
<Line.Resources>
<Storyboard x:Name="OptionButtonSelectionIndicatorLineVisible">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
<DiscreteDoubleKeyFrame KeyTime="0" Value="16" />
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="9">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase Amplitude="0.75" EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
<DiscreteDoubleKeyFrame KeyTime="0" Value="16" />
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="23">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase Amplitude="0.75" EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Name="OptionButtonSelectionIndicatorLineCollapsed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X1" EnableDependentAnimation="True">
<DiscreteDoubleKeyFrame KeyTime="0" Value="9" />
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="16">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase Amplitude="0.75" EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
<DiscreteDoubleKeyFrame KeyTime="0" Value="23" />
<EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="16">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase Amplitude="0.75" EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OptionButtonSelectionIndicator" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:0:00.500" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Line.Resources>
</Line>
IsHitTestVisible="False" />
<Button x:Name="OptionButton"
x:Uid="FindAndReplace_SearchOptionButton"
Style="{StaticResource DismissButtonStyle}"
Expand Down
2 changes: 0 additions & 2 deletions src/Notepads/Controls/FindAndReplace/FindAndReplaceControl.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@ public void ShowReplaceBar(bool showReplaceBar)
{
ToggleReplaceModeButtonGrid.SetValue(Grid.RowSpanProperty, 2);
ToggleReplaceModeButton.VerticalAlignment = VerticalAlignment.Stretch;
ToggleReplaceModeButton.Content = "\uE70D";
ReplaceBarPlaceHolder.Visibility = Visibility.Visible;
if (!string.IsNullOrEmpty(FindBar.Text))
{
Expand All @@ -131,7 +130,6 @@ public void ShowReplaceBar(bool showReplaceBar)
{
ToggleReplaceModeButtonGrid.SetValue(Grid.RowSpanProperty, 1);
ToggleReplaceModeButton.VerticalAlignment = VerticalAlignment.Top;
ToggleReplaceModeButton.Content = "\uE76C";
ReplaceBarPlaceHolder.Visibility = Visibility.Collapsed;
ReplaceButton.IsEnabled = false;
ReplaceAllButton.IsEnabled = false;
Expand Down
4 changes: 4 additions & 0 deletions src/Notepads/Notepads.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Resource\ExpanderToggleButtonStyle.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Resource\TransparentTextBoxStyle.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down

0 comments on commit 75b963b

Please sign in to comment.