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

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

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

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

ヒント

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

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

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

ソリューションエクスプローラー ウィンドウで、Models\AllNotes.cs ファイルを開きます。

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 メソッドを使用してアプリのローカルストレージからメモを読み込みます。

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

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

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

ソリューションエクスプローラー ウィンドウで、Views\AllNotesPage.xaml.cs ファイルを開きます。

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

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

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

AllNotes ページを設計する

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

ソリューションエクスプローラー ウィンドウで、Views\AllNotesPage.xaml ファイルを開きます。

<Grid> ... </Grid>要素を次のマークアップに置き換えます。

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

AllNotesPageを作成したので、前回の 1 回MainWindow.xaml更新して、個々のAllNotesPageではなくNotePageを読み込む必要があります。

ソリューションエクスプローラー ウィンドウで、MainWindow.xaml ファイルを開きます。
次のように、rootFrameがSourcePageTypeを指すよう、views.AllNotesPage要素を更新します。
```
<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="views:AllNotesPage"/>
```

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

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

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

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

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

<Page.Resources>

</Page.Resources>
```

<Page.Resources>要素内に、DataTemplate項目を表示する方法を説明するNoteを追加します。

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

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

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

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

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

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

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

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

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

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

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

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

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。

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

ヒント

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

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

WinUI 3 Gallery アプリには、ほとんどの WinUI 3 コントロール、機能、および機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを取得する

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

フィードバック

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

Last updated on 2025-09-03

次の方法で共有

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

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

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

AllNotes ページを設計する

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

フィードバック

その他のリソース

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