WPF滑动切换效果

最新推荐文章于 2023-03-16 16:20:21 发布

原创最新推荐文章于 2023-03-16 16:20:21 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#c# #wpf

本文介绍了在WPF中制作滑动切换子控件的动画效果，通过设置Canvas的ClipToBounds属性解决动画超出父容器的问题。同时，文章提及了DoubleAnimation的常用属性，包括Completed事件、FillBehavior、AutoReverse和BeginTime等，以实现动画的完整控制和个性化播放速度。

最近在学习WPF，看到了动画的使用，就想着做个滑动切换子控件的效果，仅作为学习上手Demo

效果：

    <Canvas x:Name="testPanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="800" >

        <StackPanel x:Name="Panel1" Canvas.Left="0" Canvas.Top="100" Width="100">
            <TextBlock Text="panel 1"></TextBlock>
            <TextBlock Text="向右滑动切换→"></TextBlock>
        </StackPanel>
        <StackPanel x:Name="Panel2" Canvas.Left="0" Canvas.Top="100" Width="100">
            <TextBlock Text="panel 2"></TextBlock>
            <TextBlock Text="向右滑动切换→"></TextBlock>
        </StackPanel>
        <Button Content="切换" Click="ButtonBase_OnClick"></Button>
    </Canvas>

            DoubleAnimation testAnimation=new DoubleAnimation();
            testAnimation.To = 0; //动画停止的位置
            testAnimation.From = -100; //动画开始的位置
            testAnimation.Duration = TimeSpan.FromSeconds(2); //动画持续时间
            if (isStart)
            {
                isStart = false;
                Panel2.Visibility = Visibility.Collapsed;
                Panel1.Visibility = Visibility.Visible;
                Panel1.BeginAnimation(Canvas.LeftProperty,testAnimation);
            }
            else
            {
                isStart = true;
                Panel2.Visibility = Visibility.Visible;
                Panel1.Visibility = Visibility.Collapsed;
                Panel2.BeginAnimation(Canvas.LeftProperty, testAnimation);
            }

在使用中发现如果父容器不是贴在窗口的左边框，那么动画都超出父容器显示，这时候要设置canvas的 ClipToBounds="True"

附DoubleAnimation常用属性：

Completed 动画完成事件

FillBehavior = FillBehavior.Stop 播放完回到初始状态

AutoReverse = true; 回转动画

BrginTime=TImeSpan.FormSeconds(2);等待两秒

SpeedRatio=2; 倍速