建立附注的頁面

現在您將建立一個頁面，讓使用者編輯筆記，然後撰寫程式代碼來儲存或刪除筆記。

小提示

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

首先，將新頁面新增至專案：

在 Visual Studio 的 [方案總管] 窗格中，以滑鼠右鍵按兩下 WinUINotes 專案 >[新增>專案...]。
在 [ 新增專案 ] 對話框中，選取視窗左側範本清單中的 WinUI 。接下來，選取 空白頁面（WinUI 3） 範本。為檔案NotePage.xaml命名，然後選取 [新增]。

檔案 NotePage.xaml 會在新的索引標籤中開啟，顯示代表頁面 UI 的所有 XAML 標記。 <Grid> ... </Grid>以下列標記取代 XAML 中的專案：

<Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

按 CTRL + S 儲存檔案，按一下工具列中的「儲存」圖示，或選取選單「檔案>儲存 NotePage.xaml」。

如果您立即執行應用程式，則不會看到您剛才建立的記事頁面。這是因為您仍然需要將它設定為中的Frame控件內容MainWindow。
開啟MainWindow.xaml並設定NotePage為上的 SourcePageTypeFrame，如下所示：
```
<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>
```
現在當您執行應用程式時， Frame 將會載入的 NotePage 實例，並將其顯示給使用者。

這很重要

XAML 命名空間（xmlns）對應是 C# using 語句的 XAML 對應專案。 local: 是一個前置詞，會在應用程式專案的 XAML 頁面中為您對應（xmlns:local="using:WinUINotes"）。它會對應為參照所建立的相同命名空間，以包含 x:Class 所有 XAML 檔案的屬性和程式碼，包括 App.xaml。只要您在這個相同命名空間中定義要在 XAML 中使用的任何自定義類別，就可以使用 local: 前置詞來參考 XAML 中的自定義類型。

請細分頁面上所放置 XAML 控制項的主要部分：

Visual Studio 醒目提示方格的新記事頁面 UI。

Grid.RowDefinitions 和 Grid.ColumnDefinitions 會定義具有 2 個數據列和 3 個數據行的網格線（位於標題欄下方）。
- 底部數據列會自動重Auto設大小以符合其內容，也就是兩個按鈕。頂端數據列會使用所有剩餘的垂直空間（*）。
- 中間欄是 400epx 寬，而且是記事編輯器的所在位置。任一端的數據行都是空的，並分割它們之間的所有剩餘水平空間（*）。
備註

由於縮放系統的運作方式，當您設計 XAML 應用程式時，您要以有效圖元而非實際實體圖元來設計。有效圖元（epx）是一個虛擬度量單位，用來表示與螢幕密度無關的配置尺寸和間距。
<TextBox x:Name="NoteEditor" ... > ... </TextBox>是針對多行文字輸入設定的文字輸入控件（TextBox），並放在（Grid）的Grid.Column="1"上方置中單元格中。數據列和數據行索引是以 0 為基礎，而且根據預設，控件會放在父 Grid代的數據列 0 和數據行 0 中。因此，這相當於指定數據列 0、數據行 1。
<StackPanel Orientation="Horizontal" ... > ... </StackPanel> 會定義設定控制件（StackPanel），以垂直或水準方式堆疊其子系。它放置在（Grid）的Grid.Row="1" Grid.Column="1"底部中心儲存格中。

備註

Grid.Row="1" Grid.Column="1" 是 XAML 附加屬性的範例。附加屬性可讓一個 XAML 物件設定屬於不同 XAML 物件的屬性。子元素通常可以使用附加屬性，通知其父元素如何在UI中呈現它們。
兩個 <Button> 控件位於內 <StackPanel> ，並以水準方式排列。您將在下一節中新增程式代碼來處理按鈕的 Click 事件。

在檔中深入瞭解：

載入並儲存附註

開啟 NotePage.xaml.cs 程式碼後置檔案。當您新增 XAML 檔案時，程式代碼後置會在建構函式中包含單一行，這是對方法的 InitializeComponent 呼叫：

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

方法 InitializeComponent 會讀取 XAML 標記，並初始化標記所定義的所有物件。物件會以其父子式關聯性連接，而且程式代碼中定義的事件處理程式會附加至 XAML 中設定的事件。

現在，您將將程式碼新增至 NotePage.xaml.cs 程式碼後置檔案，以處理載入和儲存筆記。

將下列變數宣告新增至 NotePage 類別：
```
public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";
```
儲存筆記時，它會以文本檔的形式儲存至應用程式的本機記憶體。

您可以使用 StorageFolder 類別來存取應用程式的本機資料資料資料夾。此資料夾專屬於您的應用程式，因此無法由其他應用程式存取此處儲存的附註。您可以使用 StorageFile 類別來存取儲存在此資料夾中的文字檔。檔案的名稱是由 fileName 變數表示。目前，將設定 fileName 為「note.txt」。
為記事頁面的 Loaded 事件建立事件處理程式。
```
public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
        NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}
```
在此方法中，您會呼叫 TryGetItemAsync ，從資料夾擷取文字檔。如果檔案不存在，則會傳 null回。如果檔案存在，請呼叫 ReadTextAsync ，將檔案中的文字讀入 NoteEditor 控件的 Text 屬性。（請記住， NoteEditor 這是 TextBox 您在 XAML 檔案中建立的控件。您可以在程式代碼後置檔案中使用您指派給您的程式代碼後置檔案 x:Name 中參考它。

這很重要

您必須使用 async 關鍵詞來標記這個方法，因為檔案存取呼叫是異步的。簡言之，如果您呼叫以（like） ...Async結尾TryGetItemAsync的方法，您可以將 await 運算元新增至呼叫。這可讓後續程式代碼繼續執行，直到等候的呼叫完成，並讓您的UI保持回應。當您使用 await時，您從呼叫的方法必須以 async 關鍵詞標示。如需詳細資訊，請參閱在 C# 中呼叫異步 API。

在檔中深入瞭解：

新增事件處理程式

接下來，為 [儲存] 和 [刪除] 按鈕新增的 Click 事件處理程式。新增事件處理程式是您在建立應用程式時經常執行的動作，因此 Visual Studio 提供數個功能，讓其更容易。

在檔案中NotePage.xaml，將游標放在Content控制項中的屬性之後Button。輸入 Click=。此時，Visual Studio 應該會快顯如下所示的自動完成 UI：
- 按下向下鍵來選取 <[新增事件處理程式>]，然後按 Tab。Visual Studio 會完成Click="Button_Click"屬性，並新增程式碼後置檔案中Button_Click命名NotePage.xaml.cs的事件處理常式方法。
現在，您應該將 Button_Click 方法重新命名為更有意義的專案。您將在下列步驟中執行此動作。
在 NotePage.xaml.cs中，找到為您新增的方法：
```
private void Button_Click(object sender, RoutedEventArgs e)
{

}
```
小提示

若要在應用程式中尋找程式代碼，請按兩下Visual Studio標題列中的 [ 搜尋 ]，然後使用[ 程式代碼搜尋 ] 選項。按兩下搜尋結果，以在程式碼編輯器中開啟程式代碼。
將游標放在中的「B」 Button 之前，然後輸入 Save。請稍候一會兒，方法名稱會以綠色醒目提示。
當您將滑鼠停留在方法名稱上方時，Visual Studio 會以螺絲起子或燈泡圖示顯示工具提示。按兩下圖示旁的向下箭號按鈕，然後按下 [ 將 'Button_Click' 重新命名為 'SaveButton_Click'。

Visual Studio 會在應用程式中的任何地方重新命名方法，包括在您第一次將它新增至的 XAML 檔案中 Button。
針對 [刪除] 按鈕重複這些步驟，並將方法重新命名為 DeleteButton_Click。

現在事件處理程式已連結，您可以新增程式代碼來儲存和刪除記事檔。

在方法中 SaveButton_Click 新增此程式代碼以儲存盤案。請注意，您也需要使用 async 關鍵詞更新方法簽章。
```
private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}
```
在方法中 SaveButton_Click ，您會先檢查是否已 noteFile 建立。 null如果是，則必須在本機記憶體資料夾中建立新的檔案，並以變數代表fileName的名稱，並將檔案指派給noteFile變數。然後，您會將 TextBox 控件中的文字寫入至所 noteFile表示的檔案。
在方法中 DeleteButton_Click 新增此程式代碼以刪除檔案。您也必須在這裡使用 async 關鍵詞來更新方法簽章。
```
private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}
```
在方法中 DeleteButton_Click ，您會先檢查是否存在 noteFile 。如果這樣做，請從本機記憶體資料夾刪除所 noteFile 代表的檔案，並將設定 noteFile 為 null。然後，將控件中的 TextBox 文字重設為空字串。

這很重要

從檔案系統中移除文字檔案之後，請務必將設定 noteFile 為 null。請記住， noteFile 這是 StorageFile ，可讓您存取應用程式中的系統檔案。刪除系統檔案之後， noteFile 仍會指向系統檔案所在的位置，但不知道該檔案已不存在。如果您現在嘗試讀取、寫入或刪除系統檔案，您會收到錯誤。
按 CTRL + S 儲存檔案，按一下工具列中的「儲存」圖示，或選取選單「檔案>儲存 NotePage.xaml.cs」。

程序代碼後置檔案的最終程式代碼看起來應該像這樣：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

測試附註

在此程式代碼就緒后，您可以測試應用程式，以確定筆記儲存並正確載入。

按 F5、單擊工具列中的 [偵錯] 按鈕，或選取 [ 執行>開始偵錯] 功能表，以建置並執行專案。
在文字框中輸入，然後按 [ 儲存] 按鈕。
關閉應用程式，然後重新啟動它。您輸入的附註應該從裝置的記憶體載入。
按下 [ 刪除] 按鈕。
關閉應用程式，重新啟動它。您應該會看到新的空白附註。

這很重要

確認儲存和刪除筆記正常運作之後，請再次建立並儲存新的附註。您會想要有儲存的附註，以在後續步驟中測試應用程式。

繼續進行步驟 3 - 新增註記的檢視和模型

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-09-03