前面一篇玩耍了一下登錄實現效果;今天在原來的基礎上來玩耍一下伸縮面板的效果;閑話不多扯直接看效果:

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的冷靜、編碼的激情、完成后的喜悅、挖坑的激動 、填坑的興奮;這也許就是屌絲程序員的樂趣吧;今天就到這里吧;希望自己有動力一步一步堅持下去;生命不息,代碼不止;大家抽空可以看看今天分享的效果,有好的意見和想法,可以在留言板隨意留言;我看到后會第一時間回復大家,多謝大家的一直默默的關注和支持!如果覺得不錯,那就伸出您的小手點個贊并關注一下！