WPF侧边滑菜单动态

1.前端代码

 <Grid>
        <Grid Background="DodgerBlue" HorizontalAlignment="Left" Width="2" Name="sideTab">
            <UniformGrid Rows="10">
                <TextBlock  Text="图书栏目" Margin="10"></TextBlock>
                <TextBlock Text="美食栏目"  Margin="10"></TextBlock>
                <TextBlock Text="娱乐栏目"  Margin="10"></TextBlock>
                <TextBlock Text="健康栏目"  Margin="10"></TextBlock>
            </UniformGrid>
        </Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Width="100" Height="40" Content="打开" Click="Button_Click"/>
            <Button Width="100" Height="40" Content="关闭" Click="Button1_Click"/>
        </StackPanel>
    </Grid>

2.后台代码

   DoubleAnimation dt = new DoubleAnimation();
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            dt.From = 20;
            dt.To = 150;
            dt.Duration = TimeSpan.FromMilliseconds(1000);

            this.sideTab.BeginAnimation(Grid.WidthProperty, dt);
        }

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation dt = new DoubleAnimation();
            dt.Duration = TimeSpan.FromMilliseconds(500);
            this.sideTab.BeginAnimation(Grid.WidthProperty, dt);
            dt.SpeedRatio = 3; 
        }