Delen via

Een weergave en model toevoegen voor alle notities

In dit gedeelte van de zelfstudie wordt een nieuwe pagina aan de app toegevoegd, een weergave waarin alle notities worden weergegeven die eerder zijn gemaakt.

Meerdere notities en navigatie

Op dit moment wordt in de weergave één notitie weergegeven. Als u al uw opgeslagen notities wilt weergeven, maakt u een nieuwe weergave en een nieuw model: AllNotes.

  1. Klik in het deelvenster Solution Explorer met de rechtermuisknop op de map Views en selecteer Add>New Item...
  2. Selecteer In het dialoogvenster Nieuw item toevoegenWinUI in de sjabloonlijst aan de linkerkant van het venster. Selecteer vervolgens de sjabloon Lege pagina (WinUI 3 ). Geef het bestand AllNotesPage.xaml een naam en druk op Toevoegen.
  3. Klik in het deelvenster Solution Explorer met de rechtermuisknop op de map Models en selecteer >Klasse toevoegen...
  4. Geef de klas AllNotes.cs een naam en druk op Toevoegen.

Aanbeveling

U kunt de code voor deze zelfstudie downloaden of bekijken vanuit de GitHub-opslagplaats. Als u de code in deze stap wilt zien, raadpleegt u deze doorvoering: alle notitieweergave en -model.

Het AllNotes-model codeeren

Het nieuwe gegevensmodel vertegenwoordigt de gegevens die nodig zijn om meerdere notities weer te geven. Hier krijgt u alle notities uit de lokale opslag van Note de app en maakt u een verzameling objecten die u in de AllNotesPageapp weergeeft.

  1. Open in het deelvenster Solution Explorer het bestand Modellen\AllNotes.cs .

  2. Vervang de code in het AllNotes.cs bestand door deze code:

    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);
                }
            }
        }
    }
}

De vorige code declareert een verzameling items met de naam Noteen gebruikt de methode voor het Notes laden van LoadNotes notities uit de lokale opslag van de app.

De Notes verzameling maakt gebruik van een ObservableCollection, een gespecialiseerde verzameling die goed werkt met gegevensbinding. Wanneer een besturingselement met meerdere items, zoals een ItemsView, is gebonden aan een ObservableCollection, werken de twee samen om de lijst met items automatisch gesynchroniseerd te houden met de verzameling. Als een item wordt toegevoegd aan de verzameling, wordt het besturingselement automatisch bijgewerkt met het nieuwe item. Als een item wordt toegevoegd aan de lijst, wordt de verzameling bijgewerkt.

Meer informatie in de documenten:

Nu het AllNotes model klaar is om gegevens voor de weergave te leveren, moet u een exemplaar van het model AllNotesPage maken, zodat de weergave toegang heeft tot het model.

  1. Open in het deelvenster Solution Explorer het bestand Views\AllNotesPage.xaml.cs .

  2. Voeg in de klasse deze code toe om een AllNotesPage model met de AllNotes naam notesModel te maken:

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

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

De pagina AllNotes ontwerpen

Vervolgens moet u de weergave ontwerpen om het AllNotes model te ondersteunen.

  1. Open in het deelvenster Solution Explorer het bestand Views\AllNotesPage.xaml .

  2. Vervang het <Grid> ... </Grid> element door de volgende markeringen:

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

In de vorige XAML worden enkele nieuwe concepten geïntroduceerd:

  • Het besturingselement CommandBar bevat een AppBarButton. Deze knop heeft een Label en Icon, en wordt beïnvloed door de CommandBar knop die deze bevat. Hiermee stelt u bijvoorbeeld CommandBar de labelpositie van de knoppen in op Right. Opdrachtbalken worden meestal boven aan de app weergegeven, samen met de paginatitel.
  • In het besturingselement ItemsView wordt een verzameling items weergegeven en in dit geval is het afhankelijk van de eigenschap van Notes het model. De manier waarop items worden weergegeven in de weergave Items, wordt ingesteld via de ItemsView.Layout eigenschap. Hier gebruikt u een UniformGridLayout.

Nu u hebt gemaakt AllNotesPage, moet u een laatste keer bijwerken MainWindow.xaml , zodat deze wordt geladen AllNotesPage in plaats van een persoon NotePage.

  1. Open in het deelvenster Solution Explorer het bestand MainWindow.xaml .

  2. Werk het rootFrame element zo bij dat de SourcePageType punten naar views.AllNotesPage, zoals deze:

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

Als u de app nu uitvoert, ziet u dat de notitie die u eerder hebt gemaakt, in het ItemsView besturingselement wordt geladen. Het wordt echter alleen weergegeven als de tekenreeksweergave van het object. Het ItemsView item weet niet hoe dit item moet worden weergegeven. U corrigeert dit in de volgende sectie.

De gebruikersinterface van de notitie-app met de notitielijst met de naam van de notitieklasse in plaats van de notitie-inhoud.

Een gegevenssjabloon toevoegen

U moet een DataTemplate opgeven om aan te ItemsView geven hoe uw gegevensitem moet worden weergegeven. De DataTemplate eigenschap Is toegewezen aan de eigenschap ItemsTemplate van de ItemsView. Voor elk item in de verzameling genereert de ItemsView.ItemTemplate de gedeclareerde XAML.

  1. Dubbelklik in het deelvenster Solution Explorer op de AllNotesPage.xaml vermelding om deze te openen in de XAML-editor.

  2. Voeg deze nieuwe naamruimtetoewijzing toe op de regel onder de toewijzing voor local:

    xmlns:models="using:WinUINotes.Models"

  3. Voeg een <Page.Resources> element toe na de openingstag <Page...> . Hiermee haalt u de ResourceDictionary op uit de Pageeigenschap Resources , zodat u XAML-resources eraan kunt toevoegen.

    <Page
    x:Class="WinUINotes.Views.AllNotesPage"
    ... >
<!-- ↓ Add this. ↓ -->
<Page.Resources>

</Page.Resources>

  4. Voeg in het <Page.Resources> element het DataTemplate item toe waarin wordt beschreven hoe u een Note item weergeeft.

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

  5. Wijs in de XAML for ItemsViewde ItemTemplate eigenschap toe aan de gegevenssjabloon die u zojuist hebt gemaakt:

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

  6. Bouw en voer de app uit.

Wanneer u de x:Bind markeringsextensie in een DataTemplategebruikt, moet u de op de x:DataTypeDataTemplate. In dit geval is dat een persoon Note (dus moet u een XAML-naamruimtereferentie toevoegen voor Models). De sjabloon voor de notitie maakt gebruik van twee TextBlock besturingselementen, die zijn gebonden aan de en Text eigenschappen van Date de notitie. Het rasterelement wordt gebruikt voor indeling en om een achtergrondkleur te bieden. Een randelement wordt gebruikt voor de achtergrond van de datum. (Het XAML-element Border kan zowel een overzicht als een achtergrond bieden.)

Wanneer u de app uitvoert, wordt de gegevenssjabloon toegepast op uw Note items en ziet er als volgt uit als de instellingen voor Persoonlijke instellingen > van Windows de light-modus gebruiken:

De gebruikersinterface van de notitie-app met de notitielijst met de inhoud van de notitie en de datum die is opgemaakt door een gegevenssjabloon.

Als de instellingen voor Persoonlijke instellingen > van Windows echter gebruikmaken van de donkere modus, ziet deze er als volgt uit:

De gebruikersinterface van de notitie-app met een donkere achtergrond, maar lichtgrijs notitiesjabloon.

Dit is niet het beoogde uiterlijk voor de app. Dit is gebeurd omdat er in code vastgelegde kleurwaarden in de gegevenssjabloon voor de notitie staan. WinUI-elementen worden standaard aangepast aan de voorkeur voor donkere of lichte kleuren van de gebruiker. Wanneer u uw eigen elementen definieert, zoals een gegevenssjabloon, moet u ervoor zorgen dat u hetzelfde doet.

Wanneer u een resource in een XAML ResourceDictionarydefinieert, moet u een x:Key waarde toewijzen om de resource te identificeren. Vervolgens kunt u deze x:Key gebruiken om de resource op te halen in XAML met behulp van de {StaticResource} markeringsextensie of {ThemeResource} markeringsextensie.

  • Een {StaticResource} is hetzelfde, ongeacht het kleurenthema, dus het wordt gebruikt voor zaken zoals Font of Style instellingen.
  • Een {ThemeResource} wijziging op basis van het geselecteerde kleurthema, zodat het wordt gebruikt voor Foreground, Backgrounden andere kleurgerelateerde eigenschappen.

WinUI bevat een verscheidenheid aan ingebouwde resources die u kunt gebruiken om uw app te laten voldoen aan de Fluent-stijlrichtlijnen en toegankelijkheidsrichtlijnen. U vervangt de in code vastgelegde kleuren in de gegevenssjabloon door ingebouwde themabronnen en past enkele andere resources toe zodat deze overeenkomen met de Fluent Design-richtlijnen.

  1. Werk in de gegevenssjabloon die u eerder hebt toegevoegd, de secties bij die hier worden aangegeven om ingebouwde resources te gebruiken:

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

Wanneer u de app nu uitvoert met een instelling lichtkleur, ziet deze er als volgt uit:

De gebruikersinterface van de notities-app met een lichte achtergrond en lichte notitiesjabloon.

En wanneer u de app uitvoert met een donkere kleurinstelling, ziet deze er als volgt uit:

De gebruikersinterface van de notities-app met een donkere achtergrond en een donkere notitiesjabloon.

Meer informatie in de documenten:

Aanbeveling

De WinUI 3 Gallery app is een uitstekende manier om meer te weten te komen over verschillende WinUI-besturingselementen en ontwerprichtlijnen. Als u de themabronnen wilt zien die in de gegevenssjabloon worden gebruikt, opent u de WinUI 3 Gallery app in de richtlijnen voor kleur. Hier ziet u hoe de resources eruitzien en kopieert u de waarden die u rechtstreeks vanuit de app nodig hebt.

U kunt ook de pagina Typografie en geometrie openen om andere ingebouwde resources te bekijken die in deze gegevenssjabloon worden gebruikt.

De WinUI 3 Gallery app bevat interactieve voorbeelden van de meeste WinUI 3-besturingselementen, -functies en -functionaliteit. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Doorgaan naar stap 5 - Navigatie tussen pagina's toevoegen

  • Last updated on