原文:
Wpf 抽屉效果
在android开发中有抽屉效果，就是在页面的边上有一个按钮，可以通过点击或者拖拽这个按钮，让页面显示。Wpf也可以实现相同的效果。
主要是通过一个DoubleAnimation和RectAnimation动画实现
<Grid HorizontalAlignment="Center" Width="90" Height="130" Background="Blue"> <Image x:Name="Thumb" Source="high.png" Width="90" Height="125"> <Image.RenderTransform> <TranslateTransform x:Name="Translate"></TranslateTransform> </Image.RenderTransform> <Image.Clip> <RectangleGeometry x:Name="ClipRect" Rect="0,0,90,125" ></RectangleGeometry> </Image.Clip> </Image> </Grid>
private bool _Expand = true; public bool Expand { get { return _Expand; } set { _Expand = value; Duration duration = new Duration(TimeSpan.FromSeconds(1)); FillBehavior behavior = FillBehavior.HoldEnd; DoubleAnimation translateAnim = new DoubleAnimation(); translateAnim.Duration = duration; translateAnim.FillBehavior = behavior; RectAnimation clipAnim = new RectAnimation(); clipAnim.Duration = duration; clipAnim.FillBehavior = behavior; double delta = 80; //收缩的大小 if (_Expand) // Expand { translateAnim.From = -delta; translateAnim.To = 0; clipAnim.From = new Rect(delta, 0, Thumb.ActualWidth, Thumb.ActualHeight); clipAnim.To = new Rect(0, 0, Thumb.ActualWidth, Thumb.ActualHeight); } else //Shrink { translateAnim.From = 0; translateAnim.To = -delta; clipAnim.From = new Rect(0, 0, Thumb.ActualWidth, Thumb.ActualHeight); clipAnim.To = new Rect(delta, 0, Thumb.ActualWidth, Thumb.ActualHeight); } Translate.BeginAnimation(TranslateTransform.XProperty, translateAnim); ClipRect.BeginAnimation(RectangleGeometry.RectProperty, clipAnim); } }
Demo地址
http://pan.baidu.com/s/1gdxHhnX
