首先我們還是新建一個空項目，看一下VS給我們默認生成的xaml結(jié)構(gòu)。
<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>
我們發(fā)現(xiàn)xaml很像xml結(jié)構(gòu)，是的，它是一種遵循xml規(guī)范的界面描述語言。
一：xaml簡述
首先我默認大家都是熟悉webform的開發(fā)者。
1：x:Class
這個標記在webform中有對應(yīng)的標記嗎？有的，也就是這里的CodeBehind。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
2：xmlns
這個在webform中也有對應(yīng)標記嗎？首先我們要知道xmlns是干嘛的？哦，導(dǎo)入命名空間用的，那我們馬上就想到webform中的對應(yīng)標記import。
<%@ Import Namespace="System.IO" %>
那么下一個問題就是兩者有什么不同嗎？我們知道webform中導(dǎo)入命名空間需要一個一個的導(dǎo)入，4個命名空間就要寫4個import，而xaml可以做到多
個命名空間做為一個導(dǎo)入。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
其實也就導(dǎo)入了如下4個wpf開發(fā)必備的dll，這個命名空間也是xaml中默認的命名空間。
3：xmlns:x
如果我們需要導(dǎo)入一些自定義的命名空間，那么我們就需要加上用“: + 自定義名稱”的形式，這里微軟導(dǎo)入了一個自定義的命名空間。
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
下面我們也來導(dǎo)入一個命名空間，實際開發(fā)中我們當(dāng)然我們不會做成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網(wǎng)頁布局中都采用table的形式，table嵌套table，table跨行跨列等手段構(gòu)建了漂亮的網(wǎng)頁，這種排版思路也應(yīng)用到了wpf中。
<1>：劃分位置
我們畫個兩行兩列的界面布局，這里我們只要將”鼠標“放在”紅色方框“中，就會出現(xiàn)小三角，我們點擊就可生成一個分割線，紅色小圈圈標記著“行列”
的分割比列。
然后我們看一下生成的代碼
<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>
我們奇怪的發(fā)現(xiàn)為什么寬度有“*”號，這里要解釋一下wpf中對“寬高度”的設(shè)置有三個形式。
①：絕對尺寸 <RowDefinition Height="161" />
②：自動尺寸 <RowDefinition Height="auto" />
③：按比例尺寸 <RowDefinition Height="161*" />
那我們就有疑問了，到底161* 是多少呢？計算規(guī)則如下：
我們這里的窗體Height=350。
第一行高度為: 350/(161+150)*161
第二行高度為：350(161+150)*150
<2>: UI元素布局
①：UI元素對號入座
很簡單，我們只要在button的Grid屬性上設(shè)置button應(yīng)該放在哪一個單元格即可。
②：UI元素跨行跨列
二：xaml中擴展標記
擴展標記分為兩種：wpf級別和xaml級別。
<1> wpf級別擴展標記
①： StaticResource
用于獲取資源的值，值獲取在xaml編譯的時候完成，什么意思呢？先舉個例子。
首先，我們發(fā)現(xiàn)有一個window.Resources，這東西我們可以認為是在MainWindow類中定義的全局變量，這里我就定義個name=“一線碼農(nóng)”的
變量，那么textblock獲取變量的方式就可以通過StaticResource。
②：DynamicResource
跟StaticResource唯一不同的是，它是在運行時獲取的，如果大家知道C#里面的dynamic關(guān)鍵字，我想就不用解釋了，上代碼。
③：Binding
還是在webform中找一下關(guān)鍵字吧，相當(dāng)于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也會相應(yīng)的變化，很有意思。
④：TemplateBinding
這個被稱為模板綁定，可以把對象的屬性和模板的屬性綁定起來，詳細的介紹放在后續(xù)文章中。
<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中獲取某個對象的靜態(tài)值，上代碼說話。
namespace WpfApplication1{ /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> public partial class MainWindow : Window { public static string name = "一線碼農(nóng)"; 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中某某控件設(shè)為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中創(chuàng)建數(shù)組，還是舉個例子。
