Ukázková data na návrhové ploše a pro vytváření prototypů

Poznámka:

 Stupeň, do jaké míry potřebujete ukázková data – a jak moc vám to pomůže – závisí na tom, jestli vaše vazby používají rozšíření značek {Binding} nebo rozšíření značek {x:Bind}. Techniky popsané v tomto tématu vycházejí z použití objektu DataContext, takže jsou vhodné pouze pro {Binding}. Pokud ale používáte {x:Bind} , vaše vazby alespoň zobrazují zástupné hodnoty na návrhové ploše (i u ovládacích prvků položek), takže nemáte úplně stejnou potřebu ukázkových dat.

Může to být nemožné nebo nežádoucí (možná z důvodů ochrany osobních údajů nebo výkonu), aby aplikace zobrazovala živá data na návrhové ploše v sadě Microsoft Visual Studio nebo Blendu pro Visual Studio. Abyste měli ovládací prvky naplněné daty (abyste mohli pracovat s rozložením, šablonami a dalšími vizuálními vlastnostmi aplikace), existují různé způsoby použití ukázkových dat v době návrhu. Ukázková data můžou být také velmi užitečná a ušetřit čas, pokud vytváříte skicu (nebo prototyp) aplikaci. Ukázková data můžete použít ve skici nebo prototypu za běhu a ilustrovat vaše nápady, aniž byste se museli připojovat ke skutečným živým datům.

Ukázkové aplikace, které demonstrují {Binding}

• Stáhněte si aplikaci Bookstore1 .
• Stáhněte si aplikaci Bookstore2.

Poznámka:

Snímky obrazovky v tomto článku byly pořízeny z předchozí verze sady Visual Studio. Pokud používáte Visual Studio 2019, nemusí přesně odpovídat vašemu vývojovému prostředí.

Nastavení DataContext v označení

Je poměrně běžnou praxí vývojářů používat imperativní kód (v kódu na pozadí) k nastavení stránky nebo uživatelského ovládacího prvku DataContext na instanci zobrazovacího modelu.

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

Pokud to ale uděláte, stránka není tak navržená, jak by mohla být. Důvodem je, že když se stránka XAML otevře ve Visual Studiu nebo v Blendu for Visual Studio, imperativní kód, který přiřadí DataContext hodnotu, se nikdy nespustí (ve skutečnosti se nespustí žádný kód na pozadí). Nástroje XAML samozřejmě parsují vaše značky a vytvářejí instance všech objektů v nich deklarovaných, ale ve skutečnosti nevytvářejí samotný typ vaší stránky. Výsledkem je, že v ovládacích prvcích ani v dialogovém okně Vytvořit datovou vazbu neuvidíte žádná data a stránka bude náročnější na styl a rozložení.

První věc, kterou byste měli vyzkoušet, je zakomentovat přiřazení DataContext a místo toho nastavit DataContext v kódu stránky. Díky tomu se živá data zobrazují v době návrhu i za běhu. Uděláte to tak, že nejprve otevřete stránku XAML. Potom v okně Osnova dokumentu klikněte na kořenový designovatelný prvek (obvykle s popiskem [Stránka]) a vyberte ho. V okně Vlastnosti vyhledejte vlastnost DataContext (uvnitř společné kategorie) a upravte ji. V dialogovém okně Vybrat objekt vyberte typ modelu zobrazení a klepněte na tlačítko OK.

Výsledné značky vypadají takto.

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

A takto vypadá návrhová plocha teď, když se vaše vazby dají vyřešit. Všimněte si, že v dialogovém okně Vytvořit datovou vazbu je nyní výběr cesta vyplněn na základě typu DataContext a vlastností, které lze svázat.

Dialogové okno Vytvořit datovou vazbu potřebuje pouze typ jako základ, ale vazby musí mít vlastnosti inicializované hodnotami. Pokud se nechcete spojit s cloudovou službou v době návrhu (kvůli výkonu, placení za přenos dat, problémy s ochranou osobních údajů, tento druh věci) pak váš inicializační kód může zkontrolovat, jestli je vaše aplikace spuštěná v návrhovém nástroji (například v sadě Visual Studio nebo Blendu pro Visual Studio) a v takovém případě načtěte ukázková data, která se dají použít jenom v době návrhu.

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

Pokud potřebujete předat parametry inicializačnímu kódu, můžete použít lokátor modelu zobrazení. Lokátor modelu zobrazení je třída, kterou můžete vložit do zdrojů aplikace. Má vlastnost, která zpřístupňuje model zobrazení, a DataContext vaší stránky se váže na tuto vlastnost. Dalším vzorem, který může lokátor nebo model zobrazení použít, je injektáž závislostí, která může podle potřeby vytvořit poskytovatele dat pro dobu návrhu nebo za běhu (každý z nich implementuje společné rozhraní).

"Ukázková data ze třídy" a atributy návrhového času

Pokud z jakéhokoli důvodu žádná z možností v předchozí části nefunguje, máte stále k dispozici spoustu možností dat návrhu a času návrhu prostřednictvím funkcí nástrojů XAML a atributů návrhu. Jednou z vhodných možností je funkce Vytvořit ukázková data z třídy v Blendu pro Visual Studio. Tento příkaz najdete na jednom z tlačítek v horní části panelu Data .

Stačí zadat třídu, kterou má příkaz použít. Příkaz pak pro vás provede dvě důležité věci. Nejprve vygeneruje soubor XAML obsahující ukázková data vhodná pro hydrataci instance zvolené třídy a všech jejích členů rekurzivně (ve skutečnosti nástroje fungují stejně dobře se soubory XAML nebo JSON). Za druhé, naplní datový panel schématem zvolené třídy. Potom můžete přetáhnout členy z datového panelu na návrhovou plochu a provádět různé úlohy. V závislosti na tom, co přetáhnete a kam ho přetáhnete, můžete přidat vazby k existujícím ovládacím prvkům (pomocí {Binding}) nebo vytvořit nové ovládací prvky a současně je svázat. V obou případech operace také nastaví kontext dat v době návrhu (d:DataContext) pro vás (pokud ještě není nastavený) v kořenovém adresáři rozložení stránky. Tento kontext dat v době návrhu používá atribut d:DesignData k získání ukázkových dat ze vygenerovaného souboru XAML (který mimochodem můžete v projektu najít a upravit tak, aby obsahovala požadovaná ukázková data).

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

Různé deklarace xmlns znamenají, že atributy s předponou d: jsou interpretovány pouze v době návrhu a jsou ignorovány za běhu. Atribut d:DataContext tedy ovlivňuje pouze hodnotu Vlastnosti DataContext v době návrhu; nemá žádný účinek za běhu. Můžete dokonce nastavit d:DataContext i DataContext v kódu, pokud chcete. d:DataContext přepíše v době návrhu a DataContext přepíše za běhu. Stejná pravidla přepsání platí pro všechny atributy návrhu a doby běhu.

Atribut d:DataContext a všechny ostatní atributy návrhu jsou zdokumentované v tématu Design-Time Atributy , které je stále platné pro aplikace univerzální platformy Windows (UPW).

CollectionViewSource nemá vlastnost DataContext , ale má vlastnost Source . V důsledku toho existuje vlastnost d:Source, kterou můžete použít k nastavení ukázkových dat jen pro návrh na 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}}" ... />
    ...

Aby to fungovalo, měli byste třídu s názvem Recordings : ObservableCollection<Recording>a upravili byste ukázkový datový soubor XAML tak, aby obsahoval pouze objekt Záznamy (s objekty Záznam uvnitř), jak je znázorněno zde.

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

Pokud místo XAML použijete ukázkový datový soubor JSON, musíte nastavit vlastnost Typ .

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

Zatím jsme k načtení ukázkových dat v době návrhu ze souboru XAML nebo JSON používali d:DesignData . Alternativou k tomu je d:DesignInstance rozšíření značek, které indikuje, že zdroj času návrhu je založen na třídě určené vlastností Type. Tady je příklad.

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

IsDesignTimeCreatable vlastnost označuje, že návrhový nástroj by měl skutečně vytvořit instanci třídy, což znamená, že třída má veřejný výchozí konstruktor a že se naplní daty (skutečné nebo ukázky). Pokud nenastavíte IsDesignTimeCreatable (nebo pokud jej nastavíte na False), nezobrazí se ukázková data na návrhové ploše. V takovém případě nástroj pro návrh pouze analyzuje třídu, aby zjistil její vlastnosti s vazbou, a zobrazuje je na panelu Data a v dialogovém okně Vytvořit datovou vazbu.

Ukázková data pro vytváření prototypů

Pro vytváření prototypů chcete ukázková data v době návrhu i za běhu. Pro tento případ použití má Blend pro Visual Studio funkci Nová ukázková data . Tento příkaz najdete na jednom z tlačítek v horní části panelu Data .

Místo zadávání třídy můžete ve skutečnosti navrhnout schéma ukázkového zdroje dat přímo na panelu Data . Ukázkové hodnoty dat můžete také upravit na panelu Data : Není nutné otevírat a upravovat soubor (i když to můžete udělat i v případě potřeby).

Funkce Nová ukázková data používá dataContext, nikoli d:DataContext, aby byla ukázková data k dispozici při spuštění skicy nebo prototypu i při návrhu. Panel Data skutečně urychlí navrhování a kompletaci úloh. Například jednoduše přetažením vlastnosti kolekce z panelu Data na návrhovou plochu vygeneruje ovládací prvek vázané na data a potřebné šablony, které jsou připravené k sestavení a spuštění.