C# WPF詳解

C# WPF是一個桌面應用程序開發工具，它可以在Windows平台上使用。

一、XAML語言的基礎

XAML是一種XML格式的標記語言，它可以用於定義.NET桌面和Web應用程序中的界面元素。XAML的標籤定義了屬性和值，這些值可以是直接數據或其他對象的引用。

XAML定義了在應用程序中如何創建和組合各種元素，如窗口、按鈕、圖像和文本。使用XAML對界面元素進行定義和布局非常方便，而且代碼可讀性也很好。

以下是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>
        <Button Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>

在這個示例中，我們使用<Window>標籤來定義一個窗口。<Grid>標籤表示一個網格面板，它可以讓我們在窗口中創建行和列來擺放界面元素。<Button>標籤表示一個按鈕，在這個示例中我們只是設置了按鈕的位置和寬度，你可以通過設置多個屬性來改變按鈕的樣式。

二、布局控制項的使用

布局控制項是定義界面元素位置和大小的重要工具。在C# WPF中，有五個主要的布局控制項：Grid、StackPanel、WrapPanel、Canvas和DockPanel。

1. Grid布局控制項

Grid布局控制項是一個靈活和強大的布局控制項，它可以在一個網格面板中定義行和列，然後通過簡單地將子元素放置在這些行列中來定義界面元素的位置和大小。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Name:" Grid.Row="0" Grid.Column="0" Margin="5"/>
    <TextBox Text="{Binding Name}" Grid.Row="0" Grid.Column="1" Margin="5"/>
    <TextBlock Text="Age:" Grid.Row="1" Grid.Column="0" Margin="5"/>
    <TextBox Text="{Binding Age}" Grid.Row="1" Grid.Column="1" Margin="5"/>
</Grid>

在這個Grid布局控制項示例中，我們定義了兩個行和兩個列，第一行和第一列分別使用Auto和Auto單位，第二行和第二列分別使用Auto和星號（*）單位（星號代表剩餘空間的所有大小）。TextBlock和TextBox元素分別放置在不同的行和列中，用於輸入用戶的姓名和年齡信息。

2. StackPanel布局控制項

StackPanel布局控制項是一個很簡單但也很實用的布局控制項，它將所有的子元素自動堆疊在一起，一字排開。默認情況下，StackPanel元素在垂直方向上堆疊，但我們也可以通過設置Orientation屬性來指定堆疊方向。

<StackPanel>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

在這個StackPanel布局控制項示例中，我們定義了三個按鈕，它們會自動堆疊在控制項中。你可以在StackPanel外部給它添加一個父容器，並使用其他的布局控制項，以實現更複雜的布局。

3. WrapPanel布局控制項

WrapPanel布局控制項是StackPanel的改進版，它也將子元素自動堆疊在一起。但是，WrapPanel還將子元素按照給定的寬度自動換行排列。這使得即使子元素不同，也可以很好地實現布局。

<WrapPanel>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
    <Button Content="Button 5"/>
    <Button Content="Button 6"/>
    <Button Content="Button 7"/>
</WrapPanel>

在這個WrapPanel布局控制項示例中，我們有七個按鈕元素，它們將自動在WrapPanel中布局。如果屏幕寬度不足以容納所有的按鈕，它們還將按照給定的寬度自動換行。

4. Canvas布局控制項

Canvas布局控制項是另一個強大的布局控制項，它允許你對子元素進行絕對定位。這意味著你可以在Canvas中自由地設計和排列界面元素，但同時這也增加了一些困難。

<Canvas>
    <Ellipse Width="100" Height="50" Canvas.Left="50" Canvas.Top="50" Fill="Red"/>
    <Ellipse Width="100" Height="50" Canvas.Left="150" Canvas.Top="100" Fill="Blue"/>
    <Ellipse Width="100" Height="50" Canvas.Left="200" Canvas.Top="150" Fill="Green"/>
</Canvas>

在這個Canvas布局控制項示例中，我們定義了三個橢圓元素，並在Canvas中對它們進行絕對定位。你可以通過設置Canvas.Left和Canvas.Top屬性來控制元素的位置。

5. DockPanel布局控制項

DockPanel布局控制項會自動將子元素分配到容器的頂部、底部、左側、右側以及中心。這個控制項非常適合具有標準頁眉、頁腳和邊欄布局的應用程序。

<DockPanel>
    <Button Content="File" DockPanel.Dock="Top"/>
    <Button Content="Edit" DockPanel.Dock="Top"/>
    <Button Content="View" DockPanel.Dock="Top"/>
    <Button Content="Help" DockPanel.Dock="Bottom"/>
    <Button Content="Undo" DockPanel.Dock="Left"/>
    <Button Content="Redo" DockPanel.Dock="Right"/>
    <Button Content="Save" DockPanel.Dock="Right"/>
    <TextBox DockPanel.Dock="Top"></TextBox>
    <TextBlock Text="Document content goes here."/>
</DockPanel>

在這個DockPanel布局控制項示例中，我們定義了大量的按鈕，並且將它們分配到控制項的頂部、底部、左側和右側。我們還定義了兩個文本框元素，將它們放置到DockPanel的頂部。

三、MVVM模式的使用

MVVM是一種軟體設計模式，它將應用程序的業務邏輯、用戶界面和數據源分離，從而實現更好的可維護性和可擴展性。

在WPF開發中，MVVM是一種常用的設計模式。我們可以使用MVVM模式來實現應用程序界面和數據的解耦，從而使代碼更加靈活和易於維護。

1. 模型（Model）

模型是應用程序的核心，它主要負責處理和管理應用程序的數據、邏輯和規則。模型通常表示為一個類或一組類，可以連接到實際數據源，例如資料庫、文件或網路服務。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

在這個模型示例中，我們定義了一個Person類，它有Name和Age屬性，並且它們都可以被讀取和寫入。任何與Person數據相關的任務都應該由Person類處理。

2. 視圖模型（ViewModel）

視圖模型是模型和視圖之間的橋樑，它主要負責將模型的數據和業務邏輯映射到視圖中。視圖模型通常也表示為一個類，它包含一組屬性、命令和事件，用於處理用戶的輸入和請求。

public class PersonViewModel : INotifyPropertyChanged
{
    private Person _person;
    public event PropertyChangedEventHandler PropertyChanged;

    public string Name
    {
        get { return _person.Name; }
        set
        {
            if (_person.Name != value)
            {
                _person.Name = value;
                NotifyPropertyChanged("Name");
            }
        }
    }

    public int Age 
    {
        get { return _person.Age; }
        set 
        {
            if (_person.Age != value)
            {
                _person.Age = value;
                NotifyPropertyChanged("Age");
            }
        }
    }

    public PersonViewModel()
    {
        _person = new Person();
    }

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

在這個視圖模型示例中，我們定義了一個PersonViewModel類，它包含一個Person對象，並且定義了Name和Age屬性。我們在屬性中添加了INotifyPropertyChanged介面，這樣當屬性值發生更改時，它會觸發屬性更改事件。

3. 視圖（View）

視圖是用戶界面的呈現方式，它可以是一個窗口、頁面或控制項。視圖只負責呈現數據，而不負責任何業務邏輯，因為這些邏輯已經在視圖模型中實現了。

<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"
        DataContext="{Binding PersonViewModel}">
    <Grid>
        <TextBlock Text="Name:" Grid.Row="0" Grid.Column="0" Margin="5"/>
        <TextBox Text="{Binding Name}" Grid.Row="0" Grid.Column="1" Margin="5"/>
        <TextBlock Text="Age:" Grid.Row="1" Grid.Column="0" Margin="5"/>
        <TextBox Text="{Binding Age}" Grid.Row="1" Grid.Column="1" Margin="5"/>
    </Grid>
</Window>

在這個視圖示例中，我們定義了一個窗口，並且綁定它到PersonViewModel。我們還使用綁定屬性將視圖中的元素與視圖模型的屬性綁定在一起，這樣它們就可以直接在

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/279565.html