跟我一起学WPF（0）：初识WPF

WPF是什么

WPF是微软的新一代图形引擎系统，全称为Windows Presentation Foundation，从.NET3.0版本开始引入，为用户界面、2D/3D 图形、文档和媒体提供了统一的描述和操作方法，它提供了统一的编程模型、语言和框架，真正做到了分离界界面设计人员与开发人员的工作，同时它提供了全新的多媒体交互用户图形界面。

WPF的核心理念是以数据驱动UI，传统的GUI界面都是由windows消息通过事件传递给程序，程序根据不同的操作来表达出不同的数据体现在UI界面上，这样数据在某种程度上来说，受到很大的限制。WPF中是数据驱动UI，数据是核心，处于主动的，UI从属于数据并表达数据，是被动的。WPF数据第一，控件第二。

WPF能做什么

WPF适合用于构建大型的桌面平台系统，比如我们目前熟知的开发工具Visual Studio，Blend，SqlServer客户端等的界面就是使用WPF技术实现。另外微软针对Windows App 10提出了适合跨设备应用程序开发的自适应控件方案（采用XAML-WPF的界面标记语言），相信WPF会在桌面应用程序开发方向走的更远。

WPF初体验

我们通过简单的两个示例，简单看一下WPF在界面表现及编程实现方面的优异之处，对WPF有一个最初的体验。

1、绘制一个圆角的控件/容器

爱美之心人皆有之，同样的功能实现，用户往往更关注的是界面表现，好的设计总是给人更多的吸引力，更有利于我们的产品推广。在实际的桌面程序开发过程中，经常会用到圆角布局，我们经常会把一些相关的控件或者图片放到一个圆角的容器中加以美化。假设我们需要得到一个如下图的界面（好吧，我承认并不美）。

WinForm下的实现方法大致如下：

a、添加一个Panel容器控件至窗体，并设置Panel的背景色为红色。

b、添加System.Drawing.Drawing2D命名空间引用，实现控件的圆角绘制方法。

        /// <summary>
        /// 绘制圆角控件
         /// </summary>
        /// <param name="sender">要进行圆角绘制的控件对象</param>
        /// <param name="p_1">主要是根据此参数确定边角点位置，可根据实际情况设置</param>
        /// <param name="p_2">点与点之间连接线的弯曲程度</param>
        private void Corner(Control sender, int p_1, double p_2)
        {
            GraphicsPath oPath = new GraphicsPath();
            oPath.AddClosedCurve(
                new Point[] {
            new Point(0, sender.Height / p_1),
            new Point(sender.Width / p_1, 0),
            new Point(sender.Width - sender.Width / p_1, 0),
            new Point(sender.Width, sender.Height / p_1),
            new Point(sender.Width, sender.Height - sender.Height / p_1),
            new Point(sender.Width - sender.Width / p_1, sender.Height),
            new Point(sender.Width / p_1, sender.Height),
            new Point(0, sender.Height - sender.Height / p_1) },(float)p_2);

            sender.Region = new Region(oPath);
        }

c、添加Panel的Paint事件，实现Panel的圆角绘制。

        /// <summary>
        /// Panel绘制
         /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            Corner(this.panel1, 30, 0.1);
        }

d、运行效果如下。

WinForm下实现圆角绘制基本上思路就是通过Point集合绘制，如果你发现绘制出来的圆角有锯齿的情况，那么你就想办法让点集更密集。除此之外，我们还可以通过调用Window API实现。

WPF实现方法：

我们只需新建一个WPF应用程序，修改MainWindow.Xaml文件为如下代码即可

<Window x:Class="CornerWPF.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 Margin="20">
        <Border CornerRadius="15" Background="Red" BorderBrush="Red"/>
        <DockPanel>

        </DockPanel>
    </Grid>
</Window>

运行效果如下：

从实现上来看，WPF要简便许多，而且圆角的效果没有锯齿现象，而且我们还可以将MainWindow.Xaml的代码进行简单的调整，很方便的实现阴影效果。

<Window x:Class="CornerWPF.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">
    <Border>
        <Border.Effect>
            <DropShadowEffect Color="Black" Direction="10" ShadowDepth="5" Opacity="1" />
        </Border.Effect>
        <Grid Margin="20">
            <Border CornerRadius="15" Background="Red" BorderBrush="Red"/>
            <DockPanel>

            </DockPanel>
        </Grid>
    </Border>
</Window>

2、编程实现体验

这里我们做一个只涉及界面逻辑的小例子，假如我们的需求是这样的：

要求界面上有一个TextBox，一个TracKBar（Winform）/Slider（WPF）控件，要求TextBox中输入的值跟TracKBar（Winform）/Slider（WPF）的值实现联动。

WinForm下的实现方法大致如下：

a、添加一个TextBox控件及一个TrackBar控件，按要求布局，设置TrackBar的MiniNum=0，MaxiNum=100（值为0~100）；

b、添加TextBox的TextChanged事件，将TextBox的值赋值给TrackBar的Value属性。（没有对文本框输入进行验证，假设我们输入的都是符合要求的int型数据）：

        /// <summary>
        /// TextChanged
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void textBox1_TextChanged(object sender, EventArgs e)
        {
            trackBar1.Value = int.Parse(textBox1.Text);
        }

c、添加TrackBar控件的Scroll事件，并实现（将TrackBar的Vlaue值赋给TextBox的Text属性）。

        /// <summary>
        /// Scroll
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void trackBar1_Scroll(object sender, EventArgs e)
        {
            textBox1.Text = trackBar1.Value.ToString();
        }

WPF下的实现方法：

将MainWindow.Xaml文件代码修改为如下即可。

<Window x:Class="CornerWPF.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">
    <Border>
        <Border.Effect>
            <DropShadowEffect Color="Black" Direction="10" ShadowDepth="5" Opacity="1" />
        </Border.Effect>
        <Grid Margin="20">
            <Border CornerRadius="15" Background="Red" BorderBrush="Red">
            </Border>
            <DockPanel Margin="5">
                <TextBox x:Name="textBox" Height="30" VerticalContentAlignment="Center" VerticalAlignment="Center" Width="120" Margin="5" Text="{Binding ElementName=slider, Path=Value}"/>
                <Slider x:Name="slider" VerticalAlignment="Center" Minimum="0" Maximum="100" Value="{Binding ElementName=textBox,Path=Text}"></Slider>
            </DockPanel>
        </Grid>
    </Border>
</Window>

从代码我们可看到，里面也TextBox，Slider等出现，我们也可以猜到这里应该是在定义控件。

本文旨在了解WPF的基本概念及WPF在各种实现上与WinForm的不同，具体WPF的MainWindow.Xaml文件中那一段类似于我们常见的XML格式的标记，就是WPF界面使用的XAML（Extensible Application Markup Language-可扩展应用程序标记语言）语言，它是微软为构建应用程序用户界面而创建的一种新的描述性语言，接下来让我们一起走进XAML的世界。