Добавление представления и модели для всех заметок

Эта часть руководства добавляет новую страницу в приложение, представление, отображающее все созданные ранее заметки.

В настоящее время в представлении заметок отображается одна заметка. Чтобы отобразить все сохраненные заметки, создайте новое представление и модель : 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управления, они работают вместе, чтобы автоматически сохранить список элементов в синхронизации с коллекцией. Если элемент добавляется в коллекцию, элемент управления автоматически обновляется с помощью нового элемента. Если элемент добавляется в список, коллекция обновляется.

Дополнительные сведения см. в документации:

Теперь, когда AllNotes модель готова предоставить данные для представления, необходимо создать экземпляр модели в AllNotesPage представлении, чтобы получить доступ к модели.

В области обозревателя решений откройте файл Views\AllNotesPage.xaml.cs .

AllNotesPage В классе добавьте этот код для создания AllNotes модели с именем notesModel:

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, необходимо обновить MainWindow.xaml один раз, чтобы он загружал AllNotesPage вместо отдельного пользователя NotePage.

В области обозревателя решений откройте файл MainWindow.xaml .
rootFrame Обновите элемент таким образом, чтобы SourcePageType точки были views.AllNotesPageследующими:
```
<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="views:AllNotesPage"/>
```

При запуске приложения вы увидите, что созданная ранее заметка загружается в ItemsView элемент управления. Однако это просто отображается как строковое представление объекта. Не ItemsView знает, как должен отображаться этот элемент. Вы исправите это в следующем разделе.

Пользовательский интерфейс приложения заметок со списком заметок с именем класса Note вместо содержимого заметки.

Добавление шаблона данных

Необходимо указать DataTemplate , чтобы узнать, ItemsView как должен отображаться элемент данных. Присваивается DataTemplate свойству ItemsTemplate объекта ItemsView. Для каждого элемента в коллекции ItemsView.ItemTemplate создается объявленный XAML.

В области обозревателя решений дважды щелкните AllNotesPage.xaml запись, чтобы открыть ее в редакторе XAML.
Добавьте это новое сопоставление пространства имен в строке ниже сопоставления:local
```
xmlns:models="using:WinUINotes.Models"
```
<Page.Resources> Добавьте элемент после открывающего <Page...> тега. Возвращает ResourceDictionary из Pageсвойства Resources , чтобы добавить в него ресурсы XAML.
```
<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>

В XAML для ItemsViewэтого назначьте ItemTemplate свойство только что созданному шаблону данных:

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

Создайте и запустите приложение.

При использовании расширения разметки x:Bind в объекте DataTemplateнеобходимо указать его x:DataTypeDataTemplate. В этом случае это отдельный пользователь Note (поэтому необходимо добавить ссылку на пространство имен XAML).Models Шаблон заметки использует два TextBlock элемента управления, которые привязаны к заметке Text и Date свойствам. Элемент Grid используется для макета и предоставляет цвет фона. Элемент Border используется для фона даты. (Элемент XAML Border может предоставлять как структуру, так и фон.)

При запуске приложения шаблон данных применяется к Note элементам и выглядит следующим образом, если параметры персонализации > Windows используют режим light:

Пользовательский интерфейс приложения заметок с списком заметок, показывающий содержимое заметки и дату, отформатированные шаблоном данных.

Однако если параметры персонализации > Windows используют темный режим, он будет выглядеть следующим образом:

Пользовательский интерфейс приложения заметок с темным фоном, но светло-серым шаблоном заметок.

Это не предназначено для поиска приложения. Это произошло, так как в шаблоне данных для заметки имеются жестко закодированные значения цвета. По умолчанию элементы WinUI адаптируются к предпочтениям цвета темного или светлого цвета пользователя. При определении собственных элементов, таких как шаблон данных, необходимо быть осторожным, чтобы сделать то же самое.

При определении ресурса в XAML ResourceDictionaryнеобходимо назначить x:Key значение для идентификации ресурса. Затем вы можете использовать это x:Key для получения ресурса в XAML с помощью {StaticResource} расширения разметки или {ThemeResource} расширения разметки.

Это {StaticResource} то же самое независимо от цветовой темы, поэтому она используется для таких вещей Font или Style параметров.
Изменения {ThemeResource} на основе выбранной цветовой темы, поэтому они используются для Foregroundиных Backgroundсвойств, связанных с цветом.

WinUI включает в себя множество встроенных ресурсов, которые можно использовать для выполнения приложений рекомендаций по стилю Fluent, а также рекомендаций по специальным возможностям. Вы замените жестко закодированные цвета в шаблоне данных встроенными ресурсами темы и примените несколько других ресурсов, чтобы соответствовать рекомендациям По проектированию Fluent.

В добавленном ранее шаблоне данных обновите разделы, указанные здесь, чтобы использовать встроенные ресурсы:

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

Теперь при запуске приложения с параметром светлого цвета он будет выглядеть следующим образом:

Пользовательский интерфейс приложения заметок с легким фоном и шаблоном светлой заметки.

И при запуске приложения с параметром темного цвета он будет выглядеть следующим образом:

Пользовательский интерфейс приложения заметок с темным фоном и шаблоном темной заметки.

Дополнительные сведения см. в документации:

Подсказка

Приложение WinUI 3 Gallery — отличный способ узнать о различных элементах управления WinUI и рекомендациях по проектированию. Чтобы просмотреть ресурсы темы, используемые в шаблоне данных, откройте WinUI 3 Gallery приложение в руководстве по цвету. Оттуда вы увидите, как выглядят ресурсы, и скопируйте необходимые значения непосредственно из приложения.

Вы также можете открыть страницу "Типография " и "Геометрия ", чтобы просмотреть другие встроенные ресурсы, используемые в этом шаблоне данных.

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Продолжить шаг 5. Добавление навигации между страницами

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-09-03

Поделиться через

Добавление представления и модели для всех заметок

Несколько заметок и навигации

Код модели AllNotes

Проектирование страницы AllNotes

Добавление шаблона данных

Обратная связь

Дополнительные ресурсы