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