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

 

 

 

 

 

 

转载于:https://www.cnblogs.com/cody1988/p/3594677.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值