前言

在本教程中，你將了解：

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

一、先決條件

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

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

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

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

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

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

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

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

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

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

生成應(yīng)用后，Visual Studio 應(yīng)打開默認(rèn)窗口 MainWindow 的 XAML 設(shè)計(jì)器窗口。 如果設(shè)計(jì)器不可見，請(qǐng)?jiān)诮鉀Q方案資源管理器窗口中雙擊 MainWindow.xaml 文件以打開設(shè)計(jì)器。

三、Visual Studio 的重要部分

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

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

屬性
此窗口顯示可以根據(jù)所選項(xiàng)配置的屬性設(shè)置。 例如，如果從“解決方案資源管理器”中選擇一個(gè)項(xiàng)，你會(huì)看到與該文件相關(guān)的屬性設(shè)置。 如果在設(shè)計(jì)器中選擇對(duì)象，你將看到元素的設(shè)置。 在上一張圖像中，在設(shè)計(jì)器中選擇了窗口的標(biāo)題欄。

工具箱
工具箱包含可添加到設(shè)計(jì)圖面的所有控件。 若要向當(dāng)前圖面添加控件，請(qǐng)雙擊控件或拖放該控件。 通常使用 XAML 代碼編輯器窗口設(shè)計(jì)用戶界面（UI），同時(shí)使用 XAML 設(shè)計(jì)器窗口預(yù)覽結(jié)果。

XAML 設(shè)計(jì)器
這是 XAML 文檔的設(shè)計(jì)器。 它是交互式的，可以從“工具箱”拖放對(duì)象。 通過選擇和移動(dòng)設(shè)計(jì)器中的項(xiàng)，可以直觀地為應(yīng)用組合 UI。
當(dāng)設(shè)計(jì)器和編輯器都可見時(shí)，對(duì)設(shè)計(jì)器的更改會(huì)反映在編輯器中，反之亦然。
在設(shè)計(jì)器中選擇項(xiàng)時(shí)，“ 屬性” 窗口將顯示有關(guān)該對(duì)象的屬性和屬性。

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

四、檢查 XAML

創(chuàng)建項(xiàng)目后，將顯示 XAML 代碼編輯器，并以最少的 XAML 代碼顯示窗口。 如果未打開編輯器，請(qǐng)?jiān)诮鉀Q方案資源管理器窗口中雙擊 MainWindow.xaml 項(xiàng)。 你應(yīng)該會(huì)看到類似于以下示例的 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 使用對(duì)象的類名，并將命名空間省略到該類。

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

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

• XML 命名空間

XML 命名空間為 XML 提供結(jié)構(gòu)，確定可在文件中聲明的 XML 內(nèi)容。
主要 xmlns 特性將導(dǎo)入整個(gè)文件的 XML 命名空間，在本例中，將映射到 WPF 聲明的類型。 其他 XML 命名空間聲明一個(gè)前綴，并導(dǎo)入 XAML 文件的其他類型和對(duì)象。 例如，xmlns:local 命名空間聲明 local 前綴，并映射到項(xiàng)目聲明的對(duì)象，即，在 Names 代碼命名空間中聲明的對(duì)象。

• x:Class 屬性

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

• Title 屬性

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

五、更改窗口

對(duì)于我們的示例應(yīng)用，此窗口太大，并且標(biāo)題欄不是描述性的。 現(xiàn)在來解決此問題。

首先，按 F5 鍵或從菜單中選擇“調(diào)試>開始調(diào)試”來運(yùn)行應(yīng)用。
你將看到模板生成的默認(rèn)窗口，其中未顯示任何控件，以及 MainWindow 的標(biāo)題：

通過將窗口的標(biāo)題設(shè)置為 Title Names。

通過設(shè)置 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>

六、準(zhǔn)備布局

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

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

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

調(diào)整此應(yīng)用所需的控件的網(wǎng)格布局。

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

此設(shè)置將網(wǎng)格從窗口邊緣引入，使其看起來更美觀。

• 定義兩行和兩列，將網(wǎng)格劃分為四個(gè)單元格：

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

在 XAML 代碼編輯器或 XAML 設(shè)計(jì)器中選擇網(wǎng)格，你將看到 XAML 設(shè)計(jì)器顯示每一行和每一列：

七、添加第一個(gè)控件

配置網(wǎng)格后，我們可以開始向其添加控件。 首先，從標(biāo)簽控件開始。

在元素內(nèi)在行和列定義之后創(chuàng)建一個(gè)新元素。 將元素的內(nèi)容設(shè)置為以下字符串 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 定義內(nèi)容 Names。 有些控件知道如何處理內(nèi)容，有些則不知道。 控件的內(nèi)容映射到 Content 屬性。 通過 XAML 特性語法設(shè)置內(nèi)容時(shí)，將使用以下格式：。 這兩種方法可以實(shí)現(xiàn)相同的目的，即，將標(biāo)簽內(nèi)容設(shè)置為顯示文本 Names。

請(qǐng)注意，標(biāo)簽占據(jù)窗口的一半，因?yàn)樗詣?dòng)定位到網(wǎng)格的第一行和列。 對(duì)于第一行，我們不需要那么多空間，因?yàn)槲覀冎恍枰谶@一行放置標(biāo)簽。

將第一個(gè) 的 Height 特性從 * 更改為 Auto。
Auto 值會(huì)自動(dòng)將網(wǎng)格行的大小調(diào)整為其內(nèi)容（在本例中為標(biāo)簽控件）的大小。

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

請(qǐng)注意，設(shè)計(jì)器現(xiàn)在顯示標(biāo)簽占據(jù)的可用高度較少。 現(xiàn)在，下一行有更多空間可用。

八、控件放置

讓我們談?wù)効丶姆胖谩?在上一節(jié)中創(chuàng)建的標(biāo)簽自動(dòng)放置在網(wǎng)格的第 0 行和第 0 列。 行和列的編號(hào)從 0 開始，遞增 1。 控件無法識(shí)別網(wǎng)格，并且不會(huì)定義任何屬性來控制其在網(wǎng)格中的位置。

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

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

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

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

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

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

現(xiàn)在已經(jīng)正確調(diào)整了網(wǎng)格的大小并創(chuàng)建了標(biāo)簽，接下來，在標(biāo)簽下方的行中添加一個(gè)列表框控件。

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

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

XAML 應(yīng)如下所示：

<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>

十、添加其余控件

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

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

• 聲明控件下的控件。
• 將 Grid.Row 屬性設(shè)置為 1。
• 將 Grid.Column 屬性設(shè)置為 1。
• 將 Margin 設(shè)置為 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>

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

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

XAML 應(yīng)如下所示：

<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>

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

十一、為 Click 事件添加代碼

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

• 找到控件 。
• 將 Click 特性設(shè)置為 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，然后選擇“轉(zhuǎn)到定義”。

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

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

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

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();
    }
}

十二、運(yùn)行應(yīng)用

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

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

最新評(píng)論