跟我一起學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的世界。