WPF关键帧动画----HidingPanel

XAML:

<Grid Height="30" Width="310" VerticalAlignment="Center" Margin="24">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Button Grid.Column="0" Height="20" Width="20" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Button_Click" Margin="4 0 0 0"/>

<StackPanel Grid.Column="1" Name="BtnBg" Grid.ColumnSpan="2" Orientation="Horizontal" Background="White">

<!--<Label Grid.Column="1" Content=">" VerticalAlignment="Center" FontWeight="Bold" Margin="0 2 0 2"/>-->

<TextBlock Grid.Column="1" Text="&#xf01a;" Style="{DynamicResource FontAwesome}" VerticalAlignment="Center" Margin="0 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 0 2"/>

<Button Height="20" Width="20" Margin="2 2 2 2"/>

</StackPanel>

<StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Left" Margin="2">

<Canvas Width="240" Height="22">

<Border Name="Cover" Width="240" Height="22" Background="White" VerticalAlignment="Center"/>

</Canvas>

</StackPanel>

<Border Name="Panel" Height="30" BorderThickness="2" BorderBrush="Black" CornerRadius="2" Opacity="1" Grid.ColumnSpan="10" Grid.Column="0"/>

</Grid>

---

CS:

private bool _isPickerOpen = false;

private void Button_Click(object sender, RoutedEventArgs e)

{

if (_isPickerOpen == false)

{

_isPickerOpen = true;

ShowPickerViaAnimation();

ShowBorder();

}

else

{

_isPickerOpen = false;

HidePickerViaAnimation();

HideBorder();

}

}

private void ShowPickerViaAnimation()

{

Storyboard sb = new Storyboard();

ThicknessAnimationUsingKeyFrames animation = new ThicknessAnimationUsingKeyFrames();

EasingThicknessKeyFrame e1 = new EasingThicknessKeyFrame();

e1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));

e1.Value = new Thickness(

Cover.Margin.Left,

Cover.Margin.Top,

Cover.Margin.Right,

Cover.Margin.Bottom);

e1.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseInOut };

EasingThicknessKeyFrame e2 = new EasingThicknessKeyFrame();

e2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.4));

e2.Value = new Thickness(

Cover.Margin.Left + 260,

Cover.Margin.Top,

Cover.Margin.Right,

Cover.Margin.Bottom);

e2.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };

animation.KeyFrames.Add(e2);

sb.Children.Add(animation);

Storyboard.SetTarget(animation, Cover);

Storyboard.SetTargetProperty(animation, new PropertyPath("Margin"));

sb.Begin();

}

private void HidePickerViaAnimation()

{

Storyboard sb = new Storyboard();

ThicknessAnimationUsingKeyFrames animation = new ThicknessAnimationUsingKeyFrames();

EasingThicknessKeyFrame e2 = new EasingThicknessKeyFrame();

e2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.4));

e2.Value = new Thickness(

Cover.Margin.Left - 260,

Cover.Margin.Top,

Cover.Margin.Right,

Cover.Margin.Bottom);

e2.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };

animation.KeyFrames.Add(e2);

sb.Children.Add(animation);

Storyboard.SetTarget(animation, Cover);

Storyboard.SetTargetProperty(animation, new PropertyPath("Margin"));

sb.Begin();

}

private void ShowBorder()

{

Storyboard sb = new Storyboard();

DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();

EasingDoubleKeyFrame e1 = new EasingDoubleKeyFrame();

e1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.4));

e1.Value = 1;

e1.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };

animation.KeyFrames.Add(e1);

sb.Children.Add(animation);

Storyboard.SetTarget(animation, Panel);

Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity"));

sb.Begin();

}

private void HideBorder()

{

Storyboard sb = new Storyboard();

DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();

EasingDoubleKeyFrame e1 = new EasingDoubleKeyFrame();

e1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.4));

e1.Value = 0;

e1.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };

animation.KeyFrames.Add(e1);

sb.Children.Add(animation);

Storyboard.SetTarget(animation, Panel);

Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity"));

sb.Begin();

}