首先我們還是新建一個空項目，看一下VS給我們默認生成的xaml結構。
<Window x:Class="WpfApplication1.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> </Window>
然后我們來對比一下webform中的page默認生成頁面
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 </head> 8 <body> 9 <form id="form1" runat="server"> 10 <div> 11 </div> 12 </form> 13 </body> 14 </html>
我們發現xaml很像xml結構，是的，它是一種遵循xml規范的界面描述語言。
一：xaml簡述
首先我默認大家都是熟悉webform的開發者。
1：x:Class
這個標記在webform中有對應的標記嗎？有的，也就是這里的CodeBehind。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
2：xmlns
這個在webform中也有對應標記嗎？首先我們要知道xmlns是干嘛的？哦，導入命名空間用的，那我們馬上就想到webform中的對應標記import。
<%@ Import Namespace="System.IO" %>
那么下一個問題就是兩者有什么不同嗎？我們知道webform中導入命名空間需要一個一個的導入，4個命名空間就要寫4個import，而xaml可以做到多
個命名空間做為一個導入。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
其實也就導入了如下4個wpf開發必備的dll，這個命名空間也是xaml中默認的命名空間。
3：xmlns:x
如果我們需要導入一些自定義的命名空間，那么我們就需要加上用“: + 自定義名稱”的形式，這里微軟導入了一個自定義的命名空間。
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
下面我們也來導入一個命名空間，實際開發中我們當然我們不會做成url的形式，這里我就取名為sys前綴
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System.IO;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </Window>
4：Grid
我們都知道在n年前的html網頁布局中都采用table的形式，table嵌套table，table跨行跨列等手段構建了漂亮的網頁，這種排版思路也應用到了wpf中。
<1>：划分位置
我們畫個兩行兩列的界面布局，這里我們只要將”鼠標“放在”紅色方框“中，就會出現小三角，我們點擊就可生成一個分割線，紅色小圈圈標記着“行列”
的分割比列。
然后我們看一下生成的代碼
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System.IO;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="161*" /> <RowDefinition Height="150*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="225*" /> <ColumnDefinition Width="278*" /> </Grid.ColumnDefinitions> </Grid> </Window>
我們奇怪的發現為什么寬度有“*”號，這里要解釋一下wpf中對“寬高度”的設置有三個形式。
①：絕對尺寸 <RowDefinition Height="161" />
②：自動尺寸 <RowDefinition Height="auto" />
③：按比例尺寸 <RowDefinition Height="161*" />
那我們就有疑問了，到底161* 是多少呢？計算規則如下：
我們這里的窗體Height=350。
第一行高度為: 350/(161+150)*161
第二行高度為：350(161+150)*150
<2>: UI元素布局
①：UI元素對號入座
很簡單，我們只要在button的Grid屬性上設置button應該放在哪一個單元格即可。
②：UI元素跨行跨列
二：xaml中擴展標記
擴展標記分為兩種：wpf級別和xaml級別。
<1> wpf級別擴展標記
①： StaticResource
用於獲取資源的值，值獲取在xaml編譯的時候完成，什么意思呢？先舉個例子。
首先，我們發現有一個window.Resources，這東西我們可以認為是在MainWindow類中定義的全局變量，這里我就定義個name=“一線碼農”的
變量，那么textblock獲取變量的方式就可以通過StaticResource。
②：DynamicResource
跟StaticResource唯一不同的是，它是在運行時獲取的，如果大家知道C#里面的dynamic關鍵字，我想就不用解釋了，上代碼。
③：Binding
還是在webform中找一下關鍵字吧，相當於webform中的Eval，上代碼說話。
1 <Window x:Class="WpfApplication1.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:sys="clr-namespace:System;assembly=mscorlib" 5 Title="MainWindow" Height="350" Width="525"> 6 <Grid> 7 <TextBox Height="23" Margin="87,75,0,0" Name="textBox1" Width="120" /> 8 <TextBox Height="23" Margin="87,126,0,0" Name="textBox2" Width="120" 9 Text="{Binding ElementName=textBox1, Path=Text}" /> 10 </Grid> 11 </Window>
這里我把textbox2的text綁定到了textbox1的text上，最后的效果就是我在textbox1上輸入，textbox2也會相應的變化，很有意思。
④：TemplateBinding
這個被稱為模板綁定，可以把對象的屬性和模板的屬性綁定起來，詳細的介紹放在后續文章中。
<2>xaml級別擴展標記
① x:Type
將模板或者樣式指定在哪一種對象上時需要用type指定。
1 <Window x:Class="WpfApplication1.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:sys="clr-namespace:System;assembly=mscorlib" 5 Title="MainWindow" Height="350" Width="525"> 6 <Window.Resources> 7 <Style TargetType="{x:Type TextBox}"> 8 <Setter Property="Background" Value="Red"/> 9 </Style> 10 </Window.Resources> 11 <Grid> 12 <TextBox Height="23" 13 Margin="87,75,0,0" Name="textBox1" Width="120" /> 14 </Grid> 15 </Window>
如這里我定義的css樣式，將background=red指定到textbox控件上。
②：x:Static
主要用於在xaml中獲取某個對象的靜態值，上代碼說話。
namespace WpfApplication1 { /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> public partial class MainWindow : Window { public static string name = "一線碼農"; public MainWindow() { InitializeComponent(); } } }
xaml代碼:
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication1" Title="MainWindow" Height="350" Width="525"> <Grid> <TextBox Height="23" Text="{x:Static local:MainWindow.name}" Margin="87,75,0,0" Name="textBox1" Width="120" /> </Grid> </Window>
最后效果：
③：x:null
這個就比較簡單了，xaml中某某控件設為null就靠它了。
1 <Grid> 2 <TextBox Height="23" Text="{x:Null}" 3 Margin="87,75,0,0" Name="textBox1" Width="120" /> 4 </Grid>
④：x:Array
這個主要就是在xaml中創建數組，還是舉個例子。
