跟我一起學WPF(1):WPF的UI設計語言——XAML


XAML是什么

XAML全稱是Extensible Application Markup Language (可擴展應用程序標記語言),是專門用於WPF技術中的UI設計語言。

XAML基礎

XAML是基於XML的,且XAML是以一個樹形結構作為整體,與HTML的DOM樹類似,如果你對XML了解的話,看到XAML應該會有一種親切感,同時也能很快的掌握。

為了更直觀的了解XAML的語法規則,我們新建一個WPF項目。

打開VS,通過文件>新建>項目菜單或者通過Ctrl+Shift+N快捷鍵打開新建項目窗口。項目名稱改為:WpfExam,單擊確定按鈕。

image

打開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應用示例

要求:實現一個簡單的如下圖所示的計算器界面。

image

我們這里主要在剛才新建的項目基礎上進行修改,主要使用默認的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中的控件及布局技巧。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM