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