WPF实现抽屉效果

原文:WPF实现抽屉效果

界面代码（xaml）：

<Window x:Class="TransAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid HorizontalAlignment="Center" Width="90" Height="130" Background="Blue" Margin="209,12,204,170"></Grid>
        <Button Content="Button" HorizontalAlignment="Left" Margin="374.409,97,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
        <StackPanel Height="265" HorizontalAlignment="Left" Margin="128,24,0,0" Name="Thumb1" VerticalAlignment="Top" Width="49" CanVerticallyScroll="False">
            <StackPanel.RenderTransform>
                <TranslateTransform x:Name="spt1"></TranslateTransform>

            </StackPanel.RenderTransform>

            <StackPanel.Clip>
                <RectangleGeometry x:Name="spc1"></RectangleGeometry>

            </StackPanel.Clip>

             <Button Content="Button" Height="65" Name="button1" Width="40" />
            <Button Content="Button" Height="65" Name="button2" Width="36" />

        </StackPanel>
        <Image Name="Thumb" Source="high.png" Width="90" Height="125" Margin="330,138,82,48">
            <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>
</Window>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TransAnimation
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {

        private bool _Expand = true;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            Expand = !_Expand;
        }

        public bool Expand
        {
            get { return _Expand; }
            set
            {
                _Expand = value;

                Duration duration = new Duration(TimeSpan.FromSeconds(2));
                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 = 40; //收缩的大小

                if (_Expand) // Expand
                {
                    translateAnim.From = -delta;
                    translateAnim.To = 0;

                    clipAnim.From = new Rect(delta, 0, Thumb1.ActualWidth, Thumb1.ActualHeight);
                    clipAnim.To = new Rect(0, 0, Thumb1.ActualWidth, Thumb1.ActualHeight);
                }
                else  //Shrink
                {
                    translateAnim.From = 0;
                    translateAnim.To = -delta;

                    clipAnim.From = new Rect(0, 0, Thumb1.ActualWidth, Thumb1.ActualHeight);
                    clipAnim.To = new Rect(delta, 0, Thumb1.ActualWidth, Thumb1.ActualHeight);
                }

                spt1.BeginAnimation(TranslateTransform.XProperty, translateAnim);
                spc1.BeginAnimation(RectangleGeometry.RectProperty, clipAnim);
            }
        }

    }
}