項目設定

在撰寫應用程式程式代碼之前，我們將快速查看Visual Studio專案，並處理某些項目設定。當 Visual Studio 建立 WinUI 3 專案時，會產生數個重要的資料夾和程式代碼檔案。您可以在 Visual Studio 的 [方案總管] 窗格中看到：

方案總管，顯示 Visual Studio 中 WinUI 3 專案的檔案。

此處列出的專案是您主要要與其互動的專案。這些檔案可協助設定並執行 WinUI 3 應用程式。每個檔案都有不同的用途，如下所述：

Assets 資料夾

此資料夾包含您應用程式的標誌、影像和其他媒體資產。它一開始會填入您 app 標誌的佔位符檔案。此標誌代表您的應用程式在 Windows [開始] 選單、Windows 任務列，以及當您的應用程式發行到該處時，Microsoft市集中的應用程式。
App.xaml 和 App.xaml.cs

檔案 App.xaml 包含全應用程式的 XAML 資源，例如色彩、樣式或範本。該 App.xaml.cs 檔案通常包含實例化和啟動應用程式視窗的程式碼。在此專案中，它會指向類別 MainWindow 。
MainWindow.xaml 和 MainWindow.xaml.cs

這些檔案代表您應用程式的視窗。
Package.appxmanifest

此套件指令清單檔案可讓您設定發行者資訊、標誌、處理器架構和其他詳細數據，以決定您的應用程式在 Microsoft Store 中的顯示方式。

XAML 檔案和部分類別

可延伸的應用程式標記語言 （XAML）是一種宣告式語言，可以初始化物件和設定物件的屬性。您可以在宣告式 XAML 標記中建立可見的 UI 元素。然後，您可以為每個 XAML 檔案建立個別的程式代碼檔案關聯（通常稱為程式 碼後置 檔案），以回應事件，並作原本在 XAML 中宣告的物件。

通常有兩個檔案具有任何 XAML 檔案、.xaml檔案本身，以及方案總管中其子項目的對應程式代碼後置檔案。

檔案 .xaml 包含定義應用程式 UI 的 XAML 標記。類別名稱是以屬性宣告 x:Class 。
程式代碼檔案包含您建立以與 XAML 標記互動的程式代碼，以及呼叫 InitializeComponent 方法。類別定義為 partial class。

當您建置專案時， InitializeComponent 會呼叫方法來剖析 .xaml 檔案，併產生與程式代碼聯結的程序代碼 partial class ，以建立完整類別。

在檔中深入瞭解：

更新主視窗

MainWindow專案隨附的類別是 XAML Window 類別的子類別，用來定義應用程式的殼層。應用程式視窗有兩個部份：

視窗的 用戶端 部分是內容所在的位置。
非用戶端部分是由 Windows作系統所控制的部分。其中包含標題列，其中標題控件（最小/最大值/關閉按鈕）、應用程式圖示、標題和拖曳區域為。它也包含視窗外側的框架。

若要讓 WinUI Notes 應用程式與 Fluent Design 指導方針一致，您將對進行一些修改 MainWindow。首先，您將套用 Mica 材質作為視窗背景。 Mica 是一種不透明的動態材質，其中包含主題和桌面桌布來繪製視窗的背景。然後，您會將應用程式的內容延伸至標題列區域，並將系統標題列取代為 XAML TitleBar 控制件。這可讓您更充分地使用空間，並讓您更充分掌控設計，同時提供標題欄所需的所有功能。

您也會將 Frame 新增為視窗的內容。類別 Frame 可與 Page 類別搭配使用，讓您在應用程式中的內容頁面之間巡覽。您將在稍後的步驟中新增頁面。

小提示

您可以從 GitHub 存放庫下載或檢視本教學課程的程式代碼。若要查看此步驟中的程式碼，請參閱此認可：附注頁面 - 初始。

雙擊 MainWindow.xaml 在方案總管中以開啟。

在開頭和結尾<Window.. > 標記之間，使用下列專案取代任何現有的 XAML：

<Window.SystemBackdrop>
    <MicaBackdrop Kind="Base"/>
</Window.SystemBackdrop>

<Grid>
    <Grid.RowDefinitions>
        <!-- Title Bar -->
        <RowDefinition Height="Auto" />
        <!-- App Content -->
        <RowDefinition Height="*" />     
    </Grid.RowDefinitions>
    <TitleBar x:Name="AppTitleBar"
              Title="WinUI Notes">
        <TitleBar.IconSource>
            <FontIconSource Glyph="&#xF4AA;"/>
        </TitleBar.IconSource>
    </TitleBar>

    <!-- App content -->
    <Frame x:Name="rootFrame" Grid.Row="1"/>
</Grid>

按 CTRL + S、單擊工具列中的 [儲存] 圖示，或選取 [ 檔案>儲存 MainPage.xaml] 選單來儲存盤案。

如果您不瞭解這所有 XAML 標記現在的功能，請不要擔心。當您建置其餘的應用程式 UI 時，我們將更詳細地說明 XAML 概念。

備註

在此標記中，您會看到兩種不同的方式在 XAML 中設定屬性。第一個和最短的方式是使用 XAML 屬性語法，如下所示： <object attribute="value">。這適用於簡單的值，例如 <MicaBackdrop Kind="Base"/>。但它只適用於 XAML 剖析器知道如何將字串轉換成預期的實值型別的值。

如果屬性值比較複雜，或 XAML 剖析器不知道如何轉換它，您必須使用 屬性元素語法 來建立物件。像這樣：

<object ... >
    <object.property>
        value
    </object.property>
</object>

例如，若要設定 Window.SystemBackdrop 屬性，您必須使用屬性元素語法，並明確建立 MicaBackdrop 專案。但是您可以使用簡單的屬性語法來設定 MicaBackdrop.Kind 屬性。

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

在 MainWindow.xaml中， <Window.SystemBackdrop>、 <Grid.RowDefinitions>和 <TitleBar.IconSource> 包含必須以屬性專案語法設定的複雜值。

在檔中深入瞭解：

XAML 語法指南

如果您現在執行應用程式，您會看到您新增的 XAML TitleBar 元素，但它將會在系統標題列下方顯示。

顯示系統標題列和自定義標題列的空白 WinUI Notes 應用程式視窗。

您需要撰寫一些程序代碼，才能完成取代系統標題列。

開啟 MainWindow.xaml.cs。您可以透過三種方式開啟（或任何 XAML 檔案）的 MainWindow.xaml 程式碼後置：
- 如果檔案已開啟且是正在編輯的作用中文件，請 MainWindow.xaml 按 F7。
- 如果檔案 MainWindow.xaml 已開啟且是正在編輯的作用中文件，請在文字編輯器中按一下滑鼠右鍵，然後選取「 檢視程式碼」。
- 使用 [方案總管] 展開 MainWindow.xaml 專案，以顯示 MainWindow.xaml.cs 檔案。按兩下檔案加以開啟。
在的 MainWindow建構函式中，於呼叫 InitializeComponent之後新增此程式代碼：
```
public MainWindow()
{
    this.InitializeComponent();

    // ↓ Add this. ↓
    // Hide the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar.
    SetTitleBar(AppTitleBar);
    // ↑ Add this. ↑
}
```
ExtendsContentIntoTitleBar 屬性會隱藏預設系統標題欄，並將您的應用程式 XAML 延伸至該區域。接著，對 SetTitleBar 的呼叫會指示系統將您指定的 XAML 元素視為AppTitleBar應用程式的標題列。
按 F5、單擊工具列中的 [偵錯] 按鈕，或選取 [ 執行>開始偵錯] 功能表，以建置並執行專案。

當您立即執行應用程式時，您會看到具有Mica背景的空白視窗，以及取代系統標題列的 XAML 標題列。

標題列中具有圖示和應用程式名稱的空白 WinUI Notes 應用程式視窗。

繼續進行步驟 2 - 新增附註頁面

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-09-03

共用方式為

項目設定

XAML 檔案和部分類別

更新主視窗

意見反應

其他資源