すべてのノートのビューとモデルを追加する

チュートリアルのこの部分では、アプリに新しいページを追加します。このビューには、以前に作成したすべてのノートが表示されます。

現在、[メモ] ビューには 1 つのメモが表示されています。保存したすべてのノートを表示するには、新しいビューとモデル AllNotes を作成します。

Solution Explorer ペインで、Views フォルダーを右クリックし、Add>New Item... を選択します。
[ 新しい項目の追加] ダイアログで、ウィンドウの左側にあるテンプレートの一覧で WinUI を選択します。次に、空白ページ (WinUI) テンプレートを選択します。ファイルに名前を付け、 Add キーを押します。
Solution Explorer ウィンドウで、Models フォルダーを右クリックし、Add>Class... を選択します。
クラスに名前を付け、 Add キーを押します。

ヒント

このチュートリアルのコードは、GitHub リポジトリからダウンロードまたは表示できます。この手順のコードを確認するには、次のコミットを参照してください:すべてのノートビューとモデル。

AllNotes モデルをコーディングする

新しいデータモデルは、複数のノートを表示するために必要なデータを表します。ここでは、アプリのローカルストレージからすべてのメモを取得し、AllNotesPageに表示するNoteオブジェクトのコレクションを作成します。

Solution Explorer ペインで、Models\AllNotes.cs ファイルを開きます。

ファイル内のコードを次のコードに置き換えます。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Windows.Storage;

namespace WinUINotes.Models
{
    public class AllNotes
    {
        public ObservableCollection<Note> Notes { get; set; } = 
                                    new ObservableCollection<Note>();

        public AllNotes()
        {
            LoadNotes();
        }

        public async void LoadNotes()
        {
            Notes.Clear();
            // Get the folder where the notes are stored.
            StorageFolder storageFolder = 
                          ApplicationData.Current.LocalFolder;
            await GetFilesInFolderAsync(storageFolder);
        }

        private async Task GetFilesInFolderAsync(StorageFolder folder)
        {
            // Each StorageItem can be either a folder or a file.
            IReadOnlyList<IStorageItem> storageItems = 
                                        await folder.GetItemsAsync();
            foreach (IStorageItem item in storageItems)
            {
                if (item.IsOfType(StorageItemTypes.Folder))
                {
                    // Recursively get items from subfolders.
                    await GetFilesInFolderAsync((StorageFolder)item);
                }
                else if (item.IsOfType(StorageItemTypes.File))
                {
                    StorageFile file = (StorageFile)item ;
                    Note note = new Note()
                    {
                        Filename = file.Name,
                        Text = await FileIO.ReadTextAsync(file),
                        Date = file.DateCreated.DateTime
                    };
                    Notes.Add(note);
                }
            }
        }
    }
}

前のコードでは、Note という名前の Notes 項目のコレクションを宣言し、LoadNotes メソッドを使用してアプリのローカル storageからメモを読み込みます。

コレクションでは、ObservableCollection が使用されます。これは、データバインディングに適切に機能する特殊なコレクションです。 ItemsView などの複数の項目を一覧表示するコントロールがにバインドされている場合、2 つのコントロールが連携して、アイテムのリストがコレクションと同期した状態に自動的に維持されます。項目がコレクションに追加されると、コントロールは新しい項目で自動的に更新されます。項目がリストに追加されると、コレクションが更新されます。

詳細については、次のドキュメントを参照してください。

AllNotes モデルがビューのデータを提供する準備ができたので、ビューがモデルをaccessできるように、AllNotesPage でモデルのインスタンスを作成する必要があります。

Solution Explorer ペインで、Views\AllNotesPage.xaml.cs ファイルを開きます。

クラスで、次のコードを追加してという名前のモデルを作成します。

public sealed partial class AllNotesPage : Page
{
    // ↓ Add this. ↓
    private AllNotes notesModel = new AllNotes();
    // ↑ Add this. ↑

    public AllNotesPage()
    {
        this.InitializeComponent();
    }
}

AllNotes ページを設計する

次に、モデルをサポートするようにビューを設計する必要があります。

Solution Explorer ペインで、Views\AllNotesPage.xaml ファイルを開きます。

要素を次のマークアップに置き換えます。

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

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton Icon="Add" Label="New note"/>
        <CommandBar.Content>
            <TextBlock Text="Quick notes" Margin="16,8" 
                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
        </CommandBar.Content>
    </CommandBar>

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}" 
           Grid.Row="1" Padding="16" >
        <ItemsView.Layout>
            <UniformGridLayout MinItemWidth="200"
                           MinColumnSpacing="12"
                           MinRowSpacing="12"
                           ItemsJustification="Start"/>
        </ItemsView.Layout>
    </ItemsView>
</Grid>

前の XAML では、いくつかの新しい概念が導入されています。

CommandBar コントロールには、AppBarButton が含まれています。このボタンにはとがあり、そのボタンを含むの影響を受けられます。たとえば、このでは、ボタンのラベル位置をに設定します。コマンドバーは通常、ページタイトルと共にアプリの上部に表示されます。
ItemsView コントロールには項目のコレクションが表示され、この場合はモデルのプロパティにバインドされます。項目ビューでアイテムを表示する方法は、プロパティを使用して設定します。ここでは UniformGridLayout を使用します。

を作成したので、最後にを更新して、個々のではなくを読み込むようにする必要があります。

Solution Explorer ペインで、MainWindow.xaml ファイルを開きます。

次のように、がを指すよう、要素を更新します。

<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="views:AllNotesPage"/>

ここでアプリを実行すると、前に作成したメモがコントロールに読み込まれていることがわかります。ただし、オブジェクトの文字列表現として表示されるだけです。では、この項目の表示方法がわかりません。これは次のセクションで修正します。

ノートコンテンツの代わりにノートクラス名を示すノートリストを含むノートアプリ UI。

データテンプレートを追加する

データ項目をどのように表示するかをDataTemplateで指示するためには、を指定する必要があります。は、のプロパティに割り当てられます。コレクション内の各項目に対して、は宣言された XAML を生成します。

Solution Explorer ペインで、AllNotesPage.xaml エントリをダブルクリックして XAML エディターで開きます。
この新しい名前空間マッピングを、のマッピングの下の行に追加します。
```
xmlns:models="using:WinUINotes.Models"
```
開始タグの後に要素を追加します。これにより、XAML リソースを追加できるように、のプロパティから ResourceDictionary が取得されます。
```
<Page
    x:Class="WinUINotes.Views.AllNotesPage"
    ... >

<Page.Resources>

</Page.Resources>
```

要素内に、項目を表示する方法を説明するを追加します。

<Page.Resources>
    <!-- ↓ Add this. ↓ -->
    <DataTemplate x:Key="NoteItemTemplate" 
                  x:DataType="models:Note">
        <ItemContainer>
            <Grid Background="LightGray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="120"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{x:Bind Text}" Margin="12,8"
                           TextWrapping="Wrap"
                           TextTrimming="WordEllipsis"/>
                <Border Grid.Row="1" Padding="8,6,0,6"
                        Background="Gray">
                    <TextBlock Text="{x:Bind Date}"
                               Foreground="White"/>
                </Border>
            </Grid>
        </ItemContainer>
    </DataTemplate>
    <!-- ↑ Add this. ↑ -->
</Page.Resources>

の XAML で、作成したデータテンプレートにプロパティを割り当てます。

<ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24"
           <!-- ↓ Add this. ↓ -->
           ItemTemplate="{StaticResource NoteItemTemplate}">

アプリケーションをビルドし、実行します。

でマークアップ拡張機能を使用する場合は、にを指定する必要があります。この場合、これは個々のです (そのため、の XAML 名前空間参照を追加する必要があります)。ノートのテンプレートでは、ノートのプロパティとプロパティにバインドされている 2 つのコントロールが使用されます。 Grid 要素は、レイアウトに使用され、背景色を提供するために使用されます。 Border 要素は、日付の背景に使用されます。 (XAML 要素は、アウトラインと背景の両方を提供できます)。

アプリを実行すると、データテンプレートが項目に適用され、Windows の個人用設定色の設定でライトモードが使用されている場合は、次のようになります。

ノートアプリの UI。メモの一覧には、データテンプレートで書式設定されたメモの内容と日付が表示されます。

ただし、Windows の個人用設定色の設定でダークモードを使用する場合は、次のようになります。

暗い背景に淡い灰色のノートテンプレートを持つノートアプリの UI。

これは、アプリを目的とした外観ではありません。これは、メモのデータテンプレートにハードコーディングされた色の値があるために発生しました。既定では、WinUI 3 要素はユーザーの濃色または明るい色の好みに合わせて調整されます。独自の要素、例えばデータテンプレートを定義する際には、同様に注意する必要があります。

XAML でリソースを定義する場合は、リソースを識別するために値を割り当てる必要があります。その後、そのを使用して、マークアップ拡張またはマークアップ拡張を使用して XAML でリソースを取得できます。

は、色のテーマに関係なく同じであるため、や設定などに使用されます。
は、選択した色テーマに基づいて変更されるため、、、およびその他の色関連のプロパティに使用されます。

WinUI には、Fluent スタイルのガイドラインとアクセシビリティガイドラインに従ってアプリを作成するために使用できるさまざまな組み込みリソースが含まれています。データテンプレートのハードコーディングされた色を組み込みのテーマリソースに置き換え、Fluent Design のガイドラインに合わせて他のいくつかのリソースを適用します。

前に追加したデータテンプレートで、組み込みのリソースを使用するように、ここで示されているセクションを更新します。

<DataTemplate x:Key="NoteItemTemplate" 
              x:DataType="models:Note">

<!-- ↓ Update this. ↓ -->
    <ItemContainer CornerRadius="{StaticResource OverlayCornerRadius}">
        <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
              BorderThickness="1" 
              BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
              CornerRadius="{StaticResource OverlayCornerRadius}">
<!-- ↑ Update this. ↑ -->

            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Text="{x:Bind Text}" Margin="12,8"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"/>

<!-- ↓ Update this. ↓ -->
            <Border Grid.Row="1" Padding="8,6,0,6"
                    Background="{ThemeResource SubtleFillColorSecondaryBrush}">
                <TextBlock Text="{x:Bind Date}"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
<!-- ↑ Update this. ↑ -->

            </Border>
        </Grid>
    </ItemContainer>
</DataTemplate>

ライトカラー設定でアプリを実行すると、次のようになります。

明るい背景とライトノートテンプレートを備えたノートアプリ UI。

また、濃色設定でアプリを実行すると、次のようになります。

暗い背景と暗いノートテンプレートを含むノートアプリの UI。

詳細については、次のドキュメントを参照してください。

項目コンテナーとテンプレート
ResourceDictionary および XAML リソース参照

ヒント

アプリは、さまざまな WinUI コントロールと設計ガイドラインについて学習するための優れた方法です。データテンプレートで使用されているテーマリソースを表示するには、アプリを開いて色のガイダンスを表示します。そこから、リソースの外観を確認し、必要な値をアプリから直接コピーできます。

[文字体裁] ページと [Geometry] ページを開いて、このデータテンプレートで使用されている他の組み込みリソースを表示することもできます。

アイコンアプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを参照します。

手順 5 に進む - ページ間のナビゲーションを追加する

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-05

次の方法で共有

すべてのノートのビューとモデルを追加する

複数のメモとナビゲーション

AllNotes モデルをコーディングする

AllNotes ページを設計する

データ テンプレートを追加する

フィードバック

その他のリソース

データテンプレートを追加する