XAML是什么
XAML全稱是Extensible Application Markup Language (可擴展應用程序標記語言),是專門用於WPF技術中的UI設計語言。
XAML基礎
XAML是基於XML的,且XAML是以一個樹形結構作為整體,與HTML的DOM樹類似,如果你對XML了解的話,看到XAML應該會有一種親切感,同時也能很快的掌握。
為了更直觀的了解XAML的語法規則,我們新建一個WPF項目。
打開VS,通過文件>新建>項目菜單或者通過Ctrl+Shift+N快捷鍵打開新建項目窗口。項目名稱改為:WpfExam,單擊確定按鈕。
打開Window.xaml,我們會看到如下代碼
<Window x:Class="WpfExam.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>
一、基本語法
同XML類似,XAML中最基本的語法元素就是標簽、屬性、內容。
1、標簽
標簽是通常是以<>開始,以</>結束的,一個標簽的聲明通常表示一個對象。如<Window></Window>、<Grid></Grid>分別定義了一個窗體對象及一個Grid對象,標簽定義有兩種常用寫法:
非自閉合簽:<Window></Window>、<Grid></Grid>
自閉合標簽:< Window />、 <Grid/>這種自閉合標簽用於無內容情況下,可以讓代碼看上去更簡潔,當然,正常情況下Window及Grid都是有內容的。
2、屬性
屬性通常以鍵值對形式出現,如<Window><Window/>標簽中的Title="MainWindow" Height="350" Width="525",等號左邊表示Window標簽的屬性,等號右邊表示該屬性的值。
3、內容
一組標簽對之間夾雜的文本或其他標簽都稱為這個標簽之間的內容。此處Window標簽的內容就是一個<Grid><Grid/>標簽
二、命名空間
細心的朋友肯定會問<Window>標簽里的
x:Class="WpfExam.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
這些奇奇怪怪的類似網站地址的是什么東東,難不成也是屬性?沒錯,它們的確算是Window的屬性,但他們又有自己獨特的含義,基本上我們在WPF中新建任何窗體、用戶控件,這三個屬性都會出現。我們分別介紹這三個屬性的是什么意思。
x:Class="WpfExam.MainWindow":這里指定了我們XAML窗體界面對應的C#類,是WpfExam命名空間下的MainWindow這個分部類。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation":表示引用wpf界面表現相關的命名空間,類似於我們C#類中的using。
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml":表示引用xaml相關的命名空間。
這個xmlns:x中的x只是一個默認的標識符,如果我們將他改成y的話,編譯我們的程序,將會報錯找不到屬性Class,此時我們就需要將x:Class="WpfExam.MainWindow"修改為y:Class="WpfExam.MainWindow"。
同樣,如果我們將xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"也增加一個標示符號的話,假如我們改成xmlns:a="http://schemas.microsoft.com/winfx/2006/xaml/presentation",那么將會提醒你找不到類型
Window、Grid,你需要標簽<Window>、<Grid>替換為<a:Window>、<a:Grid>
XAML應用示例
要求:實現一個簡單的如下圖所示的計算器界面。
我們這里主要在剛才新建的項目基礎上進行修改,主要使用默認的Grid容器進行布局。實現代碼如下:
<Window x:Class="WpfExam.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="325"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="95*"/> <RowDefinition Height="224*"/> </Grid.RowDefinitions> <DockPanel> <TextBox TextWrapping="Wrap" Background="AliceBlue"/> </DockPanel> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> <Button Grid.Row="0" Grid.Column="0" Content="清除" FontSize="22"/> <Button Grid.Row="0" Grid.Column="1" Content="退格" FontSize="22"/> <Button Grid.Row="0" Grid.Column="2" Content="/" FontSize="22"/> <Button Grid.Row="0" Grid.Column="3" Content="*" FontSize="22"/> <Button Grid.Row="1" Grid.Column="0" Content="7" FontSize="22"/> <Button Grid.Row="1" Grid.Column="1" Content="8" FontSize="22"/> <Button Grid.Row="1" Grid.Column="2" Content="9" FontSize="22"/> <Button Grid.Row="1" Grid.Column="3" Content="-" FontSize="22"/> <Button Grid.Row="2" Grid.Column="0" Content="4" FontSize="22"/> <Button Grid.Row="2" Grid.Column="1" Content="5" FontSize="22"/> <Button Grid.Row="2" Grid.Column="2" Content="6" FontSize="22"/> <Button Grid.Row="2" Grid.Column="3" Content="+" FontSize="22"/> <Button Grid.Row="3" Grid.Column="0" Content="1" FontSize="22"/> <Button Grid.Row="3" Grid.Column="1" Content="2" FontSize="22"/> <Button Grid.Row="3" Grid.Column="2" Content="3" FontSize="22"/> <Button Grid.Row="3" Grid.RowSpan="2" Grid.Column="3" Content="=" FontSize="22" Background="Orange"/> <Button Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Content="0" FontSize="22"/> <Button Grid.Row="4" Grid.Column="2" Content="." FontSize="22"/> </Grid> </Grid> </Window>
此篇我們只重點介紹xaml語言的基本語法,並使用基本的布局元素Grid、Button、TextBox等實現了一個簡單的計算器的界面。
具體xaml里都有哪些標簽、屬性等具體細節問題,將結合wpf布局控件詳細介紹。下一篇讓我們一起學習WPF中的控件及布局技巧。