Voorbeeldgegevens op het ontwerpoppervlak en voor prototypen

Het kan onmogelijk of ongewenst zijn (mogelijk om redenen van privacy of prestaties) voor uw app om livegegevens weer te geven op het ontwerpoppervlak in Microsoft Visual Studio of Blend voor Visual Studio. Als u uw besturingselementen wilt laten vullen met gegevens (zodat u kunt werken aan de indeling, sjablonen en andere visuele eigenschappen van uw app), zijn er verschillende manieren waarop u ontwerptijdvoorbeeldgegevens kunt gebruiken. Voorbeeldgegevens kunnen ook heel nuttig en tijd besparen als u een schets-app (of prototype) bouwt. U kunt voorbeeldgegevens in uw schets of prototype tijdens runtime gebruiken om uw ideeën te illustreren zonder verbinding te maken met echte, live gegevens.

voorbeeld-apps die {Binding} demonstreren

• Download de Bookstore1 app.
• Download de Bookstore2 app.

DataContext instellen in markeringen

Het is een vrij gangbare praktijk voor ontwikkelaars om imperatieve code (in codeachter) te gebruiken om de DataContext- van een pagina of gebruikersbesturingselement in te stellen op een exemplaar van een weergavemodel.

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

Maar als u dat doet, is uw pagina niet zo 'ontwerpbaar' als mogelijk. De reden hiervoor is dat wanneer uw XAML-pagina wordt geopend in Visual Studio of Blend voor Visual Studio, de code die imperatief de DataContext waarde toewijst nooit wordt uitgevoerd (in feite wordt uw code-behind helemaal niet uitgevoerd). De XAML-hulpprogramma's parseren natuurlijk uw markeringen en instantiëren van objecten die erin zijn gedeclareerd, maar ze instantiëren het type van uw pagina zelf niet. Het resultaat is dat u geen gegevens in uw besturingselementen of in het dialoogvenster Gegevensbinding maken ziet, en dat uw pagina lastiger is om te stylen en in te delen.

De eerste oplossing om te proberen is uit te maken dat DataContext toewijzing en de DataContext- in plaats daarvan instelt in de paginamarkeringen. Op die manier worden uw livegegevens weergegeven op het ontwerptijdstip en tijdens de uitvoering. Hiervoor opent u eerst uw XAML-pagina. Klik vervolgens in het venster Documentoverzicht op het hoofdontwerpbare element (meestal met het label [Pagina]) om het te selecteren. Zoek in het venster Eigenschappen de eigenschap DataContext (binnen de categorie Algemeen) en wijzig deze. Selecteer het weergavemodeltype in het dialoogvenster Object selecteren en klik vervolgens op OK.

Hier ziet u hoe de resulterende markering eruitziet.

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

En zo ziet het ontwerpoppervlak eruit nu uw bindingen kunnen worden opgelost. U ziet dat het pad kiezer in het dialoogvenster Gegevensbinding maken nu is ingevuld, op basis van het DataContext- type en de eigenschappen waarmee u kunt verbinden.

Het dialoogvenster Gegevensbinding maken heeft alleen een type nodig om te functioneren, maar de bindingen moeten de eigenschappen met waarden worden geïnitialiseerd. Als u tijdens het ontwerp geen contact wilt opnemen met uw cloudservice (vanwege prestaties, betalen voor gegevensoverdracht, privacyproblemen, dat soort zaken), kunt u met uw initialisatiecode controleren of uw app wordt uitgevoerd in een ontwerpprogramma (zoals Visual Studio of Blend voor Visual Studio) en in dat geval voorbeeldgegevens laden voor gebruik in ontwerptijd.

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

U kunt een weergavemodelzoeker gebruiken als u parameters moet doorgeven aan uw initialisatiecode. Een weergavemodelzoeker is een klasse die u in app-resources kunt plaatsen. Deze bevat een eigenschap waarmee het weergavemodel wordt weergegeven en de DataContext- van uw pagina wordt gekoppeld aan die eigenschap. Een ander patroon dat de locator of het weergavemodel kan gebruiken, is afhankelijkheidsinjectie, waarmee, indien van toepassing, een ontwerptijdgegevensprovider of een uitvoeringstijdgegevensprovider (die elk een gemeenschappelijke interface implementeert) kan worden samengesteld.

"Voorbeeldgegevens uit klasse" en ontwerptijdkenmerken

Als om welke reden dan ook geen van de opties in de vorige sectie voor u werkt, hebt u nog steeds voldoende ontwerptijdgegevensopties beschikbaar via functies en ontwerptijdkenmerken van XAML-hulpprogramma's. Een goede optie is de Voorbeeldgegevens maken van klasse functie in Blend voor Visual Studio. U kunt dat commando vinden op een van de knoppen bovenaan het Gegevens deelvenster.

U hoeft alleen maar een klasse op te geven die moet worden gebruikt voor de opdracht. De opdracht doet vervolgens twee belangrijke dingen voor u. Ten eerste genereert het een XAML-bestand dat voorbeeldgegevens bevat die geschikt zijn voor het hydrateren van een exemplaar van uw gekozen klasse en alle bijbehorende leden, recursief (in feite werkt de tooling net zo goed met XAML- of JSON-bestanden). Ten tweede wordt het deelvenster Data gevuld met het schema van uw gekozen klasse. U kunt vervolgens leden uit het deelvenster Gegevens naar het ontwerpoppervlak slepen om verschillende taken uit te voeren. Afhankelijk van wat u sleept en waar u deze neerbrengt, kunt u bindingen toevoegen aan bestaande besturingselementen (met behulp van {Binding}), of nieuwe besturingselementen maken en deze tegelijkertijd binden. In beide gevallen stelt de bewerking ook een ontwerptijdgegevens-context (d:DataContext) voor u in (als deze nog niet is ingesteld) op de layoutrit van uw pagina. Deze ontwerptijdgegevenscontext maakt gebruik van het kenmerk d:DesignData om de voorbeeldgegevens op te halen uit het XAML-bestand dat is gegenereerd (wat u trouwens gratis kunt vinden in uw project en bewerken zodat deze de gewenste voorbeeldgegevens bevat).

<Page ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
        <ListView ItemsSource="{Binding Recordings}" ... />
        ...
    </Grid>
</Page>

De verschillende XMLNS-declaraties betekenen dat kenmerken met de d: voorvoegsel alleen worden geïnterpreteerd tijdens het ontwerpen en worden genegeerd tijdens runtime. Het kenmerk d:DataContext heeft dus alleen invloed op de waarde van de eigenschap DataContext op ontwerptijd; het heeft geen effect tijdens runtime. U kunt zelfs d:DataContext en DataContext instellen als u wilt. d:DataContext wordt tijdens het ontwerpen overschreven en DataContext wordt tijdens uitvoeringstijd overschreven. Dezelfde overschrijvingsregels zijn van toepassing op alle ontwerpkenmerken en runtime-attributen.

Het kenmerk d:DataContext en alle andere ontwerptijdkenmerken worden beschreven in het onderwerp Design-Time Kenmerken, dat nog steeds geldig is voor UWP-apps (Universal Windows Platform).

CollectionViewSource- heeft geen eigenschap DataContext, maar wel een eigenschap Source. Daarom is er een d:Source- eigenschap die u kunt gebruiken om uitsluitend voor ontwerp voorbeeldgegevens in te stellen op een CollectionViewSource.

    <Page.Resources>
        <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
            d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
    </Page.Resources>

    ...

        <ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
    ...

Dit werkt alleen als u een klasse met de naam Recordings : ObservableCollection<Recording>hebt en u het XAML-voorbeeldbestand bewerkt zodat het alleen een Opnamen object bevat (met Opname objecten erin), zoals hier wordt weergegeven.

<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
    <Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
        OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
        OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
        OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>

Als u een JSON-voorbeeldgegevensbestand gebruikt in plaats van XAML, moet u de eigenschap Type instellen.

    d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"

Tot nu toe hebben we d:DesignData gebruikt om voorbeeldgegevens uit een XAML- of JSON-bestand te laden. Een alternatief hiervoor is de d:DesignInstance markeringsextensie, die aangeeft dat de ontwerptijdbron is gebaseerd op de klasse die is opgegeven door de eigenschap Type. Hier volgt een voorbeeld.

    <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
        d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>

De eigenschap IsDesignTimeCreatable geeft aan dat het ontwerphulpprogramma daadwerkelijk een exemplaar van de klasse moet maken, wat impliceert dat de klasse een openbare standaardconstructor heeft en dat deze zichzelf vult met gegevens (echt of voorbeeld). Als u IsDesignTimeCreatable niet instelt (of als u deze instelt op False), worden er geen voorbeeldgegevens weergegeven op het ontwerpoppervlak. In dat geval zoekt de ontwerptool naar de bindbare eigenschappen van de klasse en geeft deze weer in het Gegevens-deelvenster en in het Gegevensbinding maken-dialoogvenster.

Voorbeeldgegevens voor prototypen

Voor prototypen wilt u voorbeeldgegevens op zowel ontwerptijd als tijdens runtime. Voor deze use-case heeft Blend voor Visual Studio de functie Nieuwe voorbeeldgegevens. U kunt dat commando vinden op een van de knoppen bovenaan het Gegevens deelvenster.

In plaats van een klasse op te geven, kunt u het schema van uw voorbeeldgegevensbron rechtstreeks in het deelvenster Gegevens ontwerpen. U kunt ook voorbeeldgegevenswaarden bewerken in het deelvenster Gegevens: u hoeft geen bestand te openen en te bewerken (maar u kunt dat desgewenst nog steeds doen).

De functie Nieuwe voorbeeldgegevens maakt gebruik van DataContext-en niet d:DataContext, zodat de voorbeeldgegevens beschikbaar zijn wanneer u uw schets of prototype uitvoert en wanneer u deze ontwerpt. En het deelvenster Data versnelt het ontwerpen en binden van taken. Als u bijvoorbeeld een verzamelingseigenschap vanuit het deelvenster Gegevens naar het ontwerpoppervlak sleept, wordt een besturingselement voor gegevensgebonden items en de benodigde sjablonen gegenereerd, die allemaal klaar zijn om te bouwen en uit te voeren.