我先介绍我当时的目的，最开始的时候，我主要是想做一个窗口，这个窗口大概有三个界面，为提高逼格，突发奇想到这三个界面能不能动态切换，于是便有了这篇文章。

在WPF中，动画是通过故事板（Storyboard）创建的。定义动画的最好方法是使用Expression Blend这样的设计器。但我，对，就是我，只用了短短几行代码就实现了动画的切换效果。当然这效果是比较简单的淡入淡出。如果想做一个完美的动画，建议移步Expression Blend。因为前几个页面有写见不得人的东西，所以就不放出来了，就放一个动画效果吧。。。。

实现动画效果要用到一个非常重要的对象就是Storyboard。在Storyboard对象中包含一个非常重要的时间线（Timeline），时间线可让应用程序的任何元素中类型为Double，Point，或Color的属性产生动画。本动画效果就是基于这个理论的。

要实现页面逐渐消失或逐渐呈现，主要改变的是Opacity的属性，令Opacity由1.0-0.0或0.0-1.0逐渐改变就可以实现。基于这种思想，就可以很容易实现了。

我主要使用的是时间线控件——DoubleAnimation（因为Opacity的属性是Double），其他更多控件，详见https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/ms614242%28v%3dvs.95%29其中已经给出了详细用法，定义时间线可以用代码或XMAL来实现，因为我主张代码逻辑与界面应该能分开就分开，所以我用的是XAML，代码实现见上链接。

首先，创建一个wpf项目，然后往解决方案添加三个Page（页面）。好，这是第一步，准备好之后就可以实现动画了，每一个Page都可以做一个动画，本文就只拿一个Page做演示，打开Page的XAML如下：

往下添加如下代码

<Grid.Background>
            <ImageBrush ImageSource="/MesSystemForPc;component/HelpFormImage/blue.jpg" Stretch="Fill"/><!--我弄的把一张名为blue的图片当作背景-->
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

加上上面代码后界面变成这样，然后你自己拖个button进去，待会要用到

然后就到高潮了，动画的制作添加如下代码（x:Key="LastPageClose"是唯一标识，等会按键触发要用到，Storyboard.TargetName="page1"：设置对象，这里要把对象设为这个Page，就是这个page的名字 Storyboard.TargetProperty="Opacity"：要变化的属性 Duration="00:00:1.5" ：时间线，表示从0秒到1.5秒   From="1.0" To="0.0"：from....to...是变化范围，表示从1变到0.

    <Page.Resources>
        <Storyboard x:Key="LastPageClose">
            <DoubleAnimation Storyboard.TargetName="LastPageName" Storyboard.TargetProperty="Opacity" Duration="00:00:1.5" From="1.0" To="0.0"/>
        </Storyboard>
    </Page.Resources>

接下来就是触发动画了

        private void button_Click(object sender, RoutedEventArgs e)
        {
           BeginStoryboard(Resources["LastPageClose"] as System.Windows.Media.Animation.Storyboard);//引用前面定义的资源（Resources），触发故事板
        }

接下来你就可以看到最开始的动画了。

如果你觉得有用，点个赞给个关注呗，不懂得可以问哦，嘤嘤

在WPF项目中，页面布局其实并不是很难，只要规划好页面的布局格式就很好搭建了，使用页面布局控件去自由搭建（布局控件：是可以容纳多个控件或者嵌套其他布局的控件，用于在UI上组织和排列控件，Grid、StackPanel、DockPanel等控件都属此类，它们拥有共同的父类 为Panel。）你可以把控件想象成一个容器，容器里装的东西就是它的内容。控件的内容可以直接是 数据，也可以是控件。当控件的内容还是控件的时候就形成了控件的嵌套。我们把被嵌套的 控件称为子级控件，这种控件嵌套在UI布局时尤为常见。因为允许控件嵌套，所以WPF的 UI会形成一个树形结构。
如图中的样式排布，被分成了三行，可以自己定义想要的内容和效果，分成三行后，我没有用到列去定义它们的列宽，而是用了画布排布的方式设置了左右的距离来变换设定它们相对的位置，从而达到了我自己所需要的效果。下图还有一个动画效果，当鼠标移入图标的时候会发生一个放大的效果，是指定由开始值到达结束值所需的时间，便可形成一个简单的动画。由于图中的图标有七个，所以样式的话是统一的时候可以用到资源样式，目的为了实现对象的重复使用，有助于应用维护的一致性。


下面的代码是，定义动画效果的页面资源代码，页面资源需要用到K值，是为了当你锁定你所需要的样式，在当前的页面中哪个地方需要用到这个样式的话就可以把K值绑定上去就可以了，这里用到的是从一个值突然变成另一值的动画(关键帧动画)，当我的鼠标移入到图标的时候图标就用0.2秒从宽高100的放大成了，宽高105的图标，鼠标出来之后图标又缩小成了宽高100的值，在这个效果下，图标就形成了一种动画效果。
Storyboard是动画的基本单位，控制动画的播放，停止，暂停等操作，动画声明过之后，需要使用EventTrigger（事件触发器）触发。

<UserControl.Resources>
<Style x:Key="de" TargetType="Button">
<Setter Property="Cursor" Value="Hand"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False"/>
//鼠标移入
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="105" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
<DoubleAnimation To="105" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
//鼠标离开
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="100" Duration="0:0:0.2"  Storyboard.TargetProperty="Width"/>
<DoubleAnimation To="100" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>

一、最终实现效果

      点击主页按钮之后，会弹出一个页面，点击其他按钮之后，又会出现不同的页面，真正实现扁平化设计。

二、新建一个Page页面

      新建好Page之后，可以在页面自由发挥你要实现的页面样式和功能。

三、添加ContentControl

      在你想要切换页面的地方添加这一句：<ContentControl x:Name="Page_Change" VerticalAlignment="Top" HorizontalAlignment="Center" Height="908"