WPF自學入門（一）WPF-XAML基本知識

標籤：邏輯   nta   .dll   設計模式   樹狀   好的   表示   rem   介面設計   

一、基本概念

1、XAML是派生自XML的可擴充應用程式標記語言（Extensible Application Markup Language）由微軟創造應用在WPF,Silverlight等開發技術中。

2、在WPF中，XAML用來開發使用者介面。相對XML在文法上有一定的創新，同時繼承了XML的Tag，Attribute等文法。

3、在WPF中，XAML運行在CLR之上，但它不編譯為IL，而是編譯為BAML代碼，在運行時會被解析成CLR類型(Types)。

4、WPF中XAML是大小寫敏感的。

二、基本文法

      要學習wpf，我們需要採用webform的思維來考慮問題。在WPF之中，XAML是很重要的一個元素，它是用來構造WPF的UI介面的，正是因為WPF有了XAML這標記語言，它才能實現把介面和邏輯分離開來的一種設計模式，邏輯程式員寫後台代碼，而前台的介面設計由設計人員用XAML來負責，這樣，就很好的進行了分工，這就是WPF迷人的地方之一。

        開始WPF的Hello World基本文法解析。

建立WPF項目

項目預設檔案結構，引用中匯入了如下4個wpf開發必備的dll，這也是xaml中預設的命名空間。

注意：在目錄結構中我們沒有看到program的主入口類，WPF中是通過APP檔案是程式的入口，後續我會用專門一篇文章來寫啟動主介面的不同方式。我們看一下編譯後的結構

 

 

1、標籤文法=對象元素(Object Elements)

        每個標籤即是一個對象元素，將被解析為一個WPF Framework（主要來自PresentationFramework.dll）中的類的執行個體。下面的代碼就是一個對象元素，運行時會被解析為一個Button對象執行個體。

運行效果

2、Attribute賦值文法

       2.1 一般字元串賦值。下面代碼給Button的Property和Event賦值。字串將被通過封裝好的TypeConverter來轉換成對象。TypeConverter使用C#的Attribute技術來實現的。

      <Button x:Name="btnClick" Content="點我" HorizontalAlignment="Left" Margin="212,136,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click"/>

 

2.2 標記延伸賦值。用花括弧這種方式賦值就叫標記延伸賦值。常用的地方是在用到綁定和資源的時候。

       <Button x:Name="btnClick" Content="點我" Command="{Binding Click}" HorizontalAlignment="Left" Margin="212,136,0,0" VerticalAlignment="Top" Width="75" />

 

2.3 屬性元素賦值。有的時候簡單字串賦值不了的，就用屬性元素賦值。

      <Button x:Name="btnClick1"  HorizontalAlignment="Left" Margin="212,160,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click">

            <Button.Content>

                點我

            </Button.Content>

     </Button>

 

2.4 內容賦值。控制項要有Content這個屬性，也就是要繼承自ContentControl這個類，才能這麼賦值。夾在標籤中間。

       <Button>點我</Button>

 

2.5 集合賦值。下面例子是給StackPanel.Children這個屬性賦值一個集合，被省略了。這個屬性的類型是UIElementCollection。在這個例子，我們也看到WPF支援一些省略的寫法，在實際開發中運用，可以使XAML代碼更簡潔。

    <StackPanel>

        <Button>點我</Button>

        <Button>點我1</Button>

   </StackPanel>

 

3、命名空間

     在WPF中一般用在Root元素上（Application,Window,UserControl,Page,ResourceDictionary等）。如下：

       xmlns為引入命名空間的attribute。

      第一行xmlns是沒有指定別名的，是預設命名空間，它指定的命名空間包含了微軟提供所有的XAML控制項的程式集。

       第二、三、四行xmlns別名是x，d，mc，也是微軟提供的命名空間，這裡面主要包含了一些關於解析Xaml語言的程式集。

       第五行xmlns是自己引入的，開發人員自己寫的控制項等，可以通過命名空間這種方式引用到XAML文檔來使用。

<Window x:Class="WpfApplicationDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:WpfApplicationDemo"

        mc:Ignorable="d"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Label x:Name="label" Content="Hello World！" HorizontalAlignment="Left" Margin="39,20,0,0" VerticalAlignment="Top"/>

        <Button x:Name="btnClick" Content="點我" Command="{Binding Click}" HorizontalAlignment="Left" Margin="212,136,0,0" VerticalAlignment="Top" Width="75" />

        <Button x:Name="btnClick1"  HorizontalAlignment="Left" Margin="212,160,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click">

            <Button.Content>

                點我

            </Button.Content>

        </Button>

    </Grid>

</Window>

 

4、WPF中的兩棵樹

      XAML文檔是樹狀結構的。在WPF中有邏輯樹狀結構(Logical Tree)和可視樹(Visual Tree)的概念，在運行時會維護這兩棵樹。邏輯樹狀結構是以我們看到的控制項為節點的，邏輯樹狀結構表示UI的核心結構。和XAML檔案中定義的元素近乎相等，排除掉內部產生的那些用來協助渲染的可視化元素。WPF用邏輯樹狀結構來決定相依性屬性，值繼承，資源解決方案等。邏輯樹狀結構用起來不像視覺化樹狀結構那麼簡單。對於新手來說，邏輯樹狀結構可以包含類型對象，這一點和視覺化樹狀結構不同，視覺化樹狀結構只包含Dependancy子類的執行個體。遍曆邏輯樹狀結構時，要記住邏輯樹狀結構的葉子可以是任何類型。由於LogicTreeHelper只對DependencyObject有效，遍曆邏輯樹狀結構時需要非常小心，最好做類型檢查。而可視樹能看到控制項內部的元素，這些元素一般繼承自Visual類。視覺化樹狀結構代表你介面上所有的渲染在螢幕上的元素。視覺化樹狀結構用於渲染，事件路由，定位資源（如果該元素沒有邏輯父元素）等。遍曆視覺化樹狀結構可以簡單的使用VisualTreeHelper和簡單的遞迴方法。WPF提供了兩個輔助類（LogicalTreeHelper and VisualTreeHelper）來操作這兩棵樹。

 

5、附加屬性，事件

     <StackPanel>

　　<Button Panel.ZIndex="1">a</Button>

　　<Button Panel.ZIndex="2">b</Button>

    </StackPanel>

 Panel.ZIndex就是附加屬性，而附加事件在介面上用不了。在後面具體實現項目時在來寫附加事件

      

 PS:本人也是WPF的初學者，如有不對的地方，歡迎在評論區多多指教，學習，為了分享，為了提高。

WPF自學入門（一）WPF-XAML基本知識