Exempeldata på designytan och för prototyper

Det kan vara omöjligt eller oönskat (kanske av sekretess- eller prestandaskäl) att appen visar livedata på designytan i Microsoft Visual Studio eller Blend för Visual Studio. För att dina kontroller ska fyllas med data (så att du kan arbeta med appens layout, mallar och andra visuella egenskaper) finns det olika sätt på vilka du kan använda exempeldata för designtid. Exempeldata kan också vara mycket användbara och tidsbesparande om du skapar en skissapp (eller en prototyp). Du kan använda exempeldata i din skiss eller prototyp i realtid för att illustrera dina idéer utan att behöva gå så långt som att ansluta till realtidsdata.

Exempelappar som demonstrerar {Binding}

• Ladda ned Bookstore1-appen .
• Ladda ned Bookstore2-appen .

Ange DataContext i markeringsspråk

Det är en ganska vanlig utvecklarpraxis att använda imperativ kod (i koden bakom) för att ange en sida eller användarkontrolls DataContext till en instans av en visningsmodell.

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

Men om du gör det är din sida inte så "designbar" som den kan vara. Anledningen är att när XAML-sidan öppnas i Visual Studio eller Blend för Visual Studio körs aldrig den imperativa kod som tilldelar DataContext-värdet (i själva verket körs ingen kod bakom). XAML-verktygen parsar naturligtvis din markering och instansierar alla objekt som deklareras i den, men de instansierar inte själva sidans typ. Resultatet är att du inte ser några data i dina kontroller eller i dialogrutan Skapa databindning , och att sidan blir mer utmanande att utforma och lägga ut.

Det första steget är att utkommentera DataContext-tilldelningen och istället ställa in DataContext i din sidmarkup. På så sätt visas dina livedata både i designläge och vid körtid. Det gör du genom att först öppna XAML-sidan. I fönstret Dokumentdisposition klickar du sedan på det rotdesignbara elementet (vanligtvis med etiketten [Sida]) för att välja det. I fönstret Egenskaper letar du upp egenskapen DataContext (i kategorin Common) och ändrar den. Välj din vymodelltyp i dialogrutan Välj objekt och klicka sedan på OK.

Så här ser den resulterande markupen ut.

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

Och så här ser designytan ut nu när dina bindningar kan lösas. Observera att Path-väljaren i dialogrutan Create Data Binding nu är ifylld, baserat på typen av DataContext och de egenskaper som du kan binda till.

Dialogrutan Skapa databindning behöver bara en typ att utgå ifrån, men bindningarna behöver att egenskaperna initialiseras med värden. Om du inte vill kontakta din molntjänst vid designtid (på grund av prestanda, betalning för dataöverföring, sekretessproblem, sådana saker) kan din initieringskod kontrollera om din app körs i ett designverktyg (till exempel Visual Studio eller Blend för Visual Studio) och i så fall läsa in exempeldata för användning endast vid designtid.

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

Du kan använda en visningsmodelllokaliserare om du behöver skicka parametrar till initieringskoden. En visningsmodelllokaliserare är en klass som du kan placera i appresurser. Den har en egenskap som exponerar vymodellen och sidans DataContext binder till den egenskapen. Ett annat mönster som positioneraren eller vymodellen kan använda är beroendeinjektion, vilket kan konstruera en designtids- eller en körtidsdataprovider (som var och en implementerar ett gemensamt gränssnitt), vid behov.

"Exempeldata från klass" och designtidsattribut

Om inget av alternativen i föregående avsnitt av någon anledning fungerar för dig har du fortfarande gott om tillgängliga dataalternativ för designtid via XAML-verktygsfunktioner och designtidsattribut. Ett bra alternativ är funktionen Skapa exempeldata från klass i Blend för Visual Studio. Du hittar kommandot på en av knapparna överst i panelen Data .

Allt du behöver göra är att ange en klass som kommandot ska använda. Kommandot gör sedan två viktiga saker åt dig. Först genererar den en XAML-fil som innehåller exempeldata som är lämpliga för att återfukta en instans av din valda klass och alla dess medlemmar, rekursivt (i själva verket fungerar verktygen lika bra med XAML- eller JSON-filer). För det andra fyller den i datapanelen med schemat för den valda klassen. Du kan sedan dra medlemmar från panelen Data till designytan för att utföra olika uppgifter. Beroende på vad du drar och var du släpper den kan du lägga till bindningar till befintliga kontroller (med hjälp av {Binding}) eller skapa nya kontroller och binda dem samtidigt. I båda fallen anger åtgärden även en designtidsdatakontext (d:DataContext) åt dig (om en inte redan har angetts) i layoutroten på sidan. Den designtidsdatakontexten använder attributet d:DesignData för att hämta sina exempeldata från XAML-filen som genererades (som du förresten kan hitta i projektet och redigera så att den innehåller de exempeldata du vill ha).

<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 olika xmlns-deklarationerna innebär att attribut med prefixet d: endast tolkas vid designtid och ignoreras vid körning. Attributet d:DataContext påverkar därför bara värdet för egenskapen DataContext vid designtid. det har ingen effekt vid körning. Du kan till och med ange både d:DataContext och DataContext i markering om du vill. d:DataContext åsidosätts under designfasen och DataContext åsidosätts under körfasen. Samma åsidosättningsregler gäller för alla designtids- och körtidsattribut.

Attributet d:DataContext och alla andra designtidsattribut dokumenteras i avsnittet Design-Time Attribut , som fortfarande är giltigt för UWP-appar (Universal Windows Platform).

CollectionViewSource inte har en DataContext- egenskap, men den har egenskapen Source. Därför finns det en egenskap d:Source som du kan använda för att ange exempeldata för endast designtid på en 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}}" ... />
    ...

För att detta ska fungera skulle du ha en klass med namnet Recordings : ObservableCollection<Recording>, och du skulle redigera XAML-exempeldatafilen så att den endast innehåller ett Inspelningsobjekt (med Inspelningsobjekt inuti), som du ser här.

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

Om du använder en JSON-exempeldatafil i stället för XAML måste du ange egenskapen Typ .

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

Hittills har vi använt d:DesignData för att läsa in exempeldata för designtid från en XAML- eller JSON-fil. Ett alternativ till det är d:DesignInstance markeringstillägg, vilket anger att designtidskällan baseras på den klass som anges av egenskapen Type. Här är ett exempel.

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

Egenskapen IsDesignTimeCreatable anger att designverktyget faktiskt ska skapa en instans av klassen, vilket innebär att klassen har en offentlig standardkonstruktor och att den fyller sig med data (verkliga eller exempel). Om du inte anger IsDesignTimeCreatable (eller om du ställer in den på False) visas inte exempeldata på designytan. Allt designverktyget gör i så fall är att parsa klassen för dess bindbara egenskaper och visa dessa i panelen Data och i dialogrutan Skapa databindning .

Exempeldata för prototyper

För prototyper vill du ha exempeldata både vid design och vid körning. För det användningsfallet har Blend för Visual Studio funktionen Nya exempeldata . Du hittar kommandot på en av knapparna överst i panelen Data .

I stället för att ange en klass kan du utforma schemat för exempeldatakällan direkt i panelen Data . Du kan också redigera exempeldatavärden i panelen Data : det finns inget behov av att öppna och redigera en fil (även om du fortfarande kan göra det om du vill).

Funktionen Nya exempeldata använder DataContext och inte d:DataContext, så att exempeldata är tillgängliga när du kör skissen eller prototypen samt när du utformar den. Och datapanelen påskyndar verkligen dina design- och bindningsuppgifter. Om du till exempel bara drar en samlingsegenskap från panelen Data till designytan genereras en databunden objektkontroll och nödvändiga mallar, som alla är redo att byggas och köras.