WPF效果第一百九十四篇之伸缩面板

Posted 2022-08-11 dotNET跨平台

前面一篇玩耍了一下登录实现效果;今天在原来的基础上来玩耍一下伸缩面板的效果;闲话不多扯直接看效果:

1、关于前台简单布局:

2、左侧面板伸缩动画：

<Storyboard x:Key="ShowConfigSb">
    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LeftTreeViewUc">
        <EasingThicknessKeyFrame KeyTime="0" Value="-301,0,0,0"/>
        <EasingThicknessKeyFrame KeyTime="0:0:0.8" Value="0,0,0,0"/>
    </ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HideConfigSb">
    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LeftTreeViewUc">
        <EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,0"/>
        <EasingThicknessKeyFrame KeyTime="0:0:0.8" Value="-301,0,0,0"/>
    </ThicknessAnimationUsingKeyFrames>
</Storyboard>

3、右侧面板伸缩动画:

//展开
<EasingThicknessKeyFrame KeyTime="0:0:0.8" Value="0,0,0,0"/>
//收缩
<EasingThicknessKeyFrame KeyTime="0:0:0.8" Value="0,0,-301,0"/>

4、底部面板伸缩动画:

//展开
<EasingThicknessKeyFrame KeyTime="0:0:0.8" Value="-40,0,-40,0"/>
//收缩
<EasingThicknessKeyFrame KeyTime="0:0:0.8" Value="-40,0,-40,-301"/>

5、注意的就是布局最外层Grid的属性:

ClipToBounds="True"

6、来看看如果不设置会出现什么惊喜:

最终简单的效果先这样吧;以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下！