animate the pinned button

This commit is contained in:
Paddy Xu
2017-07-28 22:25:07 +03:00
parent fa2e34a065
commit 73d131972a
+75 -41
View File
@@ -98,43 +98,77 @@
</DataTemplate>
</Button.ContentTemplate>
</Button>
<fa:ImageAwesome DockPanel.Dock="Left" x:Name="buttonPin"
WindowChrome.IsHitTestVisibleInChrome="True"
Width="14" Height="14" Margin="10,0"
Cursor="Hand">
<fa:ImageAwesome.Style>
<Style TargetType="{x:Type fa:ImageAwesome}">
<Setter Property="Icon" Value="ThumbTack" />
<Setter Property="Foreground" Value="#E5868686" />
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}}"
Value="True" />
<Condition Binding="{Binding Pinned, ElementName=mainWindow}" Value="True" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Icon" Value="TimesCircle" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
<DataTrigger Binding="{Binding Pinned, ElementName=mainWindow}" Value="True">
<Setter Property="Foreground" Value="#E53C3C3C" />
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="0" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</fa:ImageAwesome.Style>
</fa:ImageAwesome>
<Grid DockPanel.Dock="Left" Width="20" Margin="5,0">
<fa:ImageAwesome x:Name="buttonPin"
WindowChrome.IsHitTestVisibleInChrome="True"
Width="14" Height="14"
Cursor="Hand">
<fa:ImageAwesome.Style>
<Style TargetType="{x:Type fa:ImageAwesome}">
<Setter Property="Icon" Value="ThumbTack" />
<Setter Property="Foreground" Value="#E5868686" />
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}}"
Value="True" />
<Condition Binding="{Binding Pinned, ElementName=mainWindow}"
Value="True" />
<Condition
Binding="{Binding Path=LayoutTransform.(RotateTransform.Angle), RelativeSource={RelativeSource Self}}"
Value="0" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Icon">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2"
Value="{x:Static fa:FontAwesomeIcon.TimesCircle}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Icon">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{x:Static fa:FontAwesomeIcon.ThumbTack}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<DataTrigger Binding="{Binding Pinned, ElementName=mainWindow}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ParallelTimeline>
<DoubleAnimation
Storyboard.TargetProperty="LayoutTransform.(RotateTransform.Angle)"
To="0" Duration="0:0:0.05" />
<ColorAnimation
Storyboard.TargetProperty="Foreground.(SolidColorBrush.Color)"
To="#E53C3C3C" Duration="0:0:0.05" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<Setter Property="Foreground" Value="#E53C3C3C" />
</DataTrigger>
</Style.Triggers>
</Style>
</fa:ImageAwesome.Style>
</fa:ImageAwesome>
</Grid>
<!-- set grid.background colour makes it clickable -->
<Grid x:Name="titleArea" Background="Transparent">
<TextBlock Text="{Binding ContextObject.Title, ElementName=mainWindow}" FontSize="14"
@@ -157,8 +191,8 @@
<BeginStoryboard>
<Storyboard>
<ParallelTimeline>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0"
BeginTime="0:0:0" Duration="0:0:0.05" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0"
Duration="0:0:0.05" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.05"
@@ -172,8 +206,8 @@
<BeginStoryboard>
<Storyboard>
<ParallelTimeline>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1"
BeginTime="0:0:0" Duration="0:0:0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1"
Duration="0:0:0" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"