WPF 动画收缩菜单

     做WPF项目的时候，有时候为了突出详细内容。我们需要把菜单功能隐藏掉。如果简单的隐藏显示我们直接用：Visibility="Hidden" Visibility="Visible"   对象名.Visibility=new System.Windows.Visibility 即可解决问题。软件用户体验是关键。直接上效果图。

（菜单展示效果）

（菜单缩进效果）

 

 

关键点：

DoubleAnimation 类可创建两个目标值之间的过渡。 若要设置其目标值，请使用其 From、To 和 By 属性。 下表概括了如何将 From、To 和 By 属性一起使用或单独使用来确定动画的目标值。

 

指定的属性	结果行为
From	动画从 From 属性指定的值继续到正在进行动画处理的属性的基值或前一动画的输出值，具体取决于前一动画的配置方式。
From 和 To	动画从 From 属性指定的值继续到 To 属性指定的值。
From 和 By	动画从 From 属性指定的值继续到 From 与 By 属性之和所指定的值。
To	动画从进行动画处理的属性的基值或前一动画的输出值继续到 To 属性指定的值。
By	动画从正在进行动画处理的属性的基值或前一动画的输出值继续到该值与 By 属性指定的值之和。

 

  private DoubleAnimation c_daListAnimation; 3   public bool c_bState = true;//记录菜单栏状态 false隐藏 true显示


   private void Window_Loaded(object sender, RoutedEventArgs e)
   {

     c_daListAnimation = new DoubleAnimation();
     c_daListAnimation.BeginTime = TimeSpan.FromSeconds(1);//获取或设置此 Timeline 将要开始的时间。
     c_daListAnimation.FillBehavior = FillBehavior.HoldEnd;//获取或设置一个值，该值指定 Timeline 在活动周期结束后的行为方式。
     c_daListAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));//获取或设置此时间线播放的时间长度，而不是计数重复。

   }

   public void ShowHiddenMenu() {
 
    if (c_changeState)
      {
     
       c_changeState = false;
       c_daListAnimation.From = 0;
       c_daListAnimation.To = -271;
 
    }
    else
   {
      c_changeState = true;
      c_daListAnimation.From = -271;
      c_daListAnimation.To = 0;
 
    }
     c_daListAnimation.BeginTime = TimeSpan.FromSeconds(0.01);//设置动画将要开始的时间
     GridTranslateTransform.BeginAnimation(TranslateTransform.XProperty, c_daListAnimation);39  }

  <Grid x:Name="gird" Focusable="False" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="271"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RenderTransform>
            <TranslateTransform x:Name="GridTranslateTransform" X="0" Y="0" />
        </Grid.RenderTransform>

        <Button  Focusable="False"  Content="" x:Name="Directory_BT" Tag="1" Height=" 97" FontSize="30" VerticalAlignment="Center" Margin="0,-100,0,0" Grid.Column="1" >
            <Button.Background>
                <ImageBrush ImageSource="/RimeBoxShowUIB;component/StyleManage/Default/btn/btn_menu.png"/>
            </Button.Background>
        </Button>
        <Border Focusable="False" x:Name="TreeMenuBt" BorderThickness="0" HorizontalAlignment="Left" Width="271" >
        </Border>

    </Grid>