前言

在本教程中，你將了解：

創(chuàng)建新的 WPF 應用。
向窗口添加控件。
處理控制事件以提供應用功能。
運行應用。
下面是在學習本教程時創(chuàng)建的應用的預覽版：

一、先決條件

• Visual Studio 2022 版本 17.12 或更高版本

選擇 .NET 桌面開發(fā)工作負載
選擇 .NET 9 單個組件

二、創(chuàng)建 WPF 應用

創(chuàng)建新應用的第一步是打開 Visual Studio 并通過模板生成應用。

• 打開 Visual Studio。
• 選擇“創(chuàng)建新項目”。

• 在“搜索模板”框中，鍵入“wpf”，然后按 Enter。
• 在“代碼語言”下拉列表中，選擇“C#”或“Visual Basic”。
• 在模板列表中，選擇“WPF 應用程序”，然后選擇“下一步”。

下圖顯示了 C# 和 Visual Basic .NET 項目模板。 如果應用 了代碼語言 篩選器，則僅顯示該語言的模板。

• 在“配置新項目”窗口中，執(zhí)行以下操作：

在“項目名稱”框中，輸入“Names”。
選中“將解決方案和項目放在同一目錄中”復選框。
（可選）選擇其他位置以保存代碼。
選擇“下一步”按鈕。

• 在“其他信息”窗口中，選擇目標框架的 .NET 9.0（標準術語支持）。 選擇“創(chuàng)建”按鈕。

生成應用后，Visual Studio 應打開默認窗口 MainWindow 的 XAML 設計器窗口。 如果設計器不可見，請在解決方案資源管理器窗口中雙擊 MainWindow.xaml 文件以打開設計器。

三、Visual Studio 的重要部分

在 Visual Studio 中對 WPF 的支持有五個重要組件，可在創(chuàng)建應用時與之交互：

“解決方案資源管理器”
所有項目文件、代碼、窗口、資源都在此窗口中顯示。

屬性
此窗口顯示可以根據所選項配置的屬性設置。 例如，如果從“解決方案資源管理器”中選擇一個項，你會看到與該文件相關的屬性設置。 如果在設計器中選擇對象，你將看到元素的設置。 在上一張圖像中，在設計器中選擇了窗口的標題欄。

工具箱
工具箱包含可添加到設計圖面的所有控件。 若要向當前圖面添加控件，請雙擊控件或拖放該控件。 通常使用 XAML 代碼編輯器窗口設計用戶界面（UI），同時使用 XAML 設計器窗口預覽結果。

XAML 設計器
這是 XAML 文檔的設計器。 它是交互式的，可以從“工具箱”拖放對象。 通過選擇和移動設計器中的項，可以直觀地為應用組合 UI。
當設計器和編輯器都可見時，對設計器的更改會反映在編輯器中，反之亦然。
在設計器中選擇項時，“ 屬性” 窗口將顯示有關該對象的屬性和屬性。

XAML 代碼編輯器
這是 XAML 文檔的 XAML 代碼編輯器。 XAML 代碼編輯器是一種無需設計器即可手動創(chuàng)建 UI 的方法。 在設計器中添加控件時，設計器可能會自動設置控件的屬性。 XAML 代碼編輯器則為你提供更多控制權。
當設計器和編輯器都可見時，對設計器的更改會反映在編輯器中，反之亦然。 在代碼編輯器中導航文本插入符號時，“ 屬性” 窗口將顯示有關該對象的屬性和屬性。

四、檢查 XAML

創(chuàng)建項目后，將顯示 XAML 代碼編輯器，并以最少的 XAML 代碼顯示窗口。 如果未打開編輯器，請在解決方案資源管理器窗口中雙擊 MainWindow.xaml 項。 你應該會看到類似于以下示例的 XAML：

<Window x:Class="Names.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:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
    </Grid>
</Window>

如果要在 Visual Basic 中編碼，則 XAML 略有不同，特別是 x:Class=“…” 屬性。 Visual Basic 中的 XAML 使用對象的類名，并將命名空間省略到該類。

為了更好地了解 XAML，讓我們將其分解。 XAML 只是由 WPF 處理以創(chuàng)建 UI 的 XML。 若要了解 XAML，至少應熟悉 XML 的基礎知識。

文檔根 表示 XAML 文件描述的對象類型。 它聲明八個特性，這些特性通常分為三類：

• XML 命名空間

XML 命名空間為 XML 提供結構，確定可在文件中聲明的 XML 內容。
主要 xmlns 特性將導入整個文件的 XML 命名空間，在本例中，將映射到 WPF 聲明的類型。 其他 XML 命名空間聲明一個前綴，并導入 XAML 文件的其他類型和對象。 例如，xmlns:local 命名空間聲明 local 前綴，并映射到項目聲明的對象，即，在 Names 代碼命名空間中聲明的對象。

• x:Class 屬性

此屬性將映射到 代碼定義的類型： MainWindow.xaml.cs 或 MainWindow.xaml.vb 文件，該文件是 Names.MainWindow C# 和 MainWindow Visual Basic 中的類。

• Title 屬性

在 XAML 對象上聲明的任何常規(guī)特性都會設置該對象的屬性。 在本例中，Title 特性將設置 Window.Title 屬性。

五、更改窗口

對于我們的示例應用，此窗口太大，并且標題欄不是描述性的。 現在來解決此問題。

首先，按 F5 鍵或從菜單中選擇“調試>開始調試”來運行應用。
你將看到模板生成的默認窗口，其中未顯示任何控件，以及 MainWindow 的標題：

通過將窗口的標題設置為 Title Names。

通過設置 Width 到 180 和 Height 更改為 260更改窗口的大小。

<Window x:Class="Names.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:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
    </Grid>
</Window>

六、準備布局

WPF 提供一個功能強大的布局系統(tǒng)，其中包含許多不同的布局控件。 布局控件可幫助放置子控件和調整其大小，甚至可以自動執(zhí)行這些操作。 此 XAML 中提供給你的默認布局控件是 控件。

網格控件允許你定義行和列，這與表非常類似，并將控件放置在特定行和列組合的邊界內。 可以將任意數量的子控件或其他布局控件添加到網格中。 例如，可以將另一個 控件置于特定的行和列組合中，然后新網格可以定義更多行和列，并具有自己的子級。

網格控件將其子控件放在行和列中。 網格始終只聲明單行和單列，這意味著默認情況下，網格就是一個單元格。 這并不能讓你真正靈活地放置控件。

調整此應用所需的控件的網格布局。

• 向 元素添加新屬性： Margin=“10”。

此設置將網格從窗口邊緣引入，使其看起來更美觀。

• 定義兩行和兩列，將網格劃分為四個單元格：

<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
</Grid>

在 XAML 代碼編輯器或 XAML 設計器中選擇網格，你將看到 XAML 設計器顯示每一行和每一列：

七、添加第一個控件

配置網格后，我們可以開始向其添加控件。 首先，從標簽控件開始。

在元素內在行和列定義之后創(chuàng)建一個新元素。 將元素的內容設置為以下字符串 Names值：

<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label>Names</Label>
</Grid>

Names 定義內容 Names。 有些控件知道如何處理內容，有些則不知道。 控件的內容映射到 Content 屬性。 通過 XAML 特性語法設置內容時，將使用以下格式：。 這兩種方法可以實現相同的目的，即，將標簽內容設置為顯示文本 Names。

請注意，標簽占據窗口的一半，因為它自動定位到網格的第一行和列。 對于第一行，我們不需要那么多空間，因為我們只需要在這一行放置標簽。

將第一個 的 Height 特性從 * 更改為 Auto。
Auto 值會自動將網格行的大小調整為其內容（在本例中為標簽控件）的大小。

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

請注意，設計器現在顯示標簽占據的可用高度較少。 現在，下一行有更多空間可用。

八、控件放置

讓我們談談控件的放置。 在上一節(jié)中創(chuàng)建的標簽自動放置在網格的第 0 行和第 0 列。 行和列的編號從 0 開始，遞增 1。 控件無法識別網格，并且不會定義任何屬性來控制其在網格中的位置。

當控件無法識別網格時，如何告訴控件使用其他行或列？ 附加屬性！ 網格采用 WPF 提供的強大屬性系統(tǒng)。

網格控件定義子控件可以附加到自己的新屬性。 控件本身上實際上不存在這些屬性，一旦控件添加到網格中，這些屬性就可供控件使用。

網格定義兩個屬性來確定子控件的行和列位置：Grid.Row 和 Grid.Column。 如果控件中省略了這些屬性，則意味著它們的默認值為 0，因此，控件將放置在網格的第 0 行和第 0 列。 嘗試通過將 Grid.Column 屬性設置為 1 來更改 控件的位置：

<Label Grid.Column="1">Names</Label>

請注意，標簽移動到第二列。 你可以使用 Grid.Row 和 Grid.Column 附加屬性來放置我們接下來要創(chuàng)建的控件。 不過現在，請將標簽還原到第 0 列。

九、創(chuàng)建名稱列表框

現在已經正確調整了網格的大小并創(chuàng)建了標簽，接下來，在標簽下方的行中添加一個列表框控件。

• 聲明控件下的控件。
• 將 Grid.Row 屬性設置為 1。
• 將 x:Name 屬性設置為 lstNames。

為控件命名后，即可在代碼隱藏中對其進行引用。 該名稱通過 x:Name 特性分配給控件。

XAML 應如下所示：

<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />
</Grid>

十、添加其余控件

我們將添加的最后兩個控件是一個文本框和一個按鈕，用戶使用該文本框輸入名稱以添加到列表框。 但是，我們不會嘗試在網格中創(chuàng)建更多行和列來排列這些控件，而是將這些控件放入 布局控件中。

堆疊面板與網格的不同之處在于控件的放置方式。 當告知網格希望控件與Grid.RowGrid.Column附加屬性位于何處時，堆棧面板會自動按順序排列其每個子控件。 它互相“堆疊”每個控件。

• 聲明控件下的控件。
• 將 Grid.Row 屬性設置為 1。
• 將 Grid.Column 屬性設置為 1。
• 將 Margin 設置為 5,0,0,0。

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />
<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
</StackPanel>

之前在網格上使用了 Margin 特性，但我們只輸入了一個值 (10)。 此邊距的值 5,0,0,0與值大相徑 10庭。 margin 屬性是一種類型，可以解釋這兩個 Thickness 值。 粗細定義矩形框每條邊（分別為左、頂、右、底）周圍的空間。 如果邊距的值是單一值，則四條邊均使用該值。

在 控件內部，創(chuàng)建一個 控件。
將 x:Name 屬性設置為 txtName。最后，在之后 ，仍在內部 創(chuàng)建控件 。
將 x:Name 屬性設置為 btnAdd。
將 Margin 設置為 0,5,0,0。
將內容設置為 Add Name.

XAML 應如下所示：

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

窗口的布局已完成。 但是，我們的應用不包含任何邏輯，無法真正發(fā)揮作用。 接下來，我們需要將控件事件掛鉤到代碼，讓應用能夠實際派上用場。

十一、為 Click 事件添加代碼

我們創(chuàng)建的 具有一個 Click 事件，該事件在用戶按下按鈕時引發(fā)。 你可以訂閱此事件并添加代碼，以便向列表框添加名稱。 XAML 屬性用于訂閱事件，就像用于設置屬性一樣。

• 找到控件 。
• 將 Click 特性設置為 ButtonAddName_Click

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

生成事件處理程序代碼。 右鍵單擊 ButtonAddName_Click，然后選擇“轉到定義”。

此操作在代碼隱藏中生成與提供的處理程序名稱匹配的方法。

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
}

接下來，添加以下代碼以執(zhí)行這三個步驟：
確保文本框包含名稱。
驗證文本框中輸入的名稱是否已經存在。
將名稱添加到列表框。

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

十二、運行應用

處理事件后，請運行應用。 隨即顯示窗口，可以在文本框中輸入名稱，然后通過單擊按鈕添加該名稱。

到此這篇關于使用 .NET 創(chuàng)建新的 WPF 應用的文章就介紹到這了,更多相關.net wpf應用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論