Przykładowe dane na powierzchni projektowej i do tworzenia prototypów

Może to być niemożliwe lub niepożądane (być może ze względu na prywatność lub wydajność) dla aplikacji wyświetlanie danych na żywo na powierzchni projektowej w programie Microsoft Visual Studio lub Blend for Visual Studio. Aby kontrolki były wypełniane danymi (dzięki czemu można pracować nad układem, szablonami i innymi właściwościami wizualnymi aplikacji), istnieją różne sposoby używania przykładowych danych w czasie projektowania. Przykładowe dane mogą być naprawdę przydatne i zaoszczędzić czas także wtedy, gdy tworzysz szkic (lub prototyp) aplikacji. Możesz użyć przykładowych danych w szkicu lub prototypie w czasie wykonywania, aby zilustrować swoje pomysły bez konieczności nawiązywania połączenia z rzeczywistymi danymi na żywo.

Przykładowe aplikacje, które demonstrują {Binding}

• Pobierz aplikację Bookstore1.
• Pobierz aplikację Bookstore2.

Ustawianie DataContext w oznaczeniu

Dość powszechną praktyką wśród deweloperów jest używanie kodu imperatywnego (w kodzie-behind) do ustawienia DataContext kontrolki strony lub użytkownika na wystąpienie modelu widoku.

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

Ale jeśli to zrobisz, strona nie jest tak łatwa do zaprojektowania, jak mogłaby być. Przyczyną jest to, że po otwarciu strony XAML w programie Visual Studio lub Blend dla Visual Studio kod imperatywny, który przypisuje wartość DataContext, nigdy nie jest uruchamiany (w rzeczywistości żaden z kodu-behind nie jest wykonywany). Narzędzia XAML oczywiście analizują znaczniki i inicjalizują wszelkie zadeklarowane w nich obiekty, ale w rzeczywistości nie inicjalizują samego typu Twojej strony. W rezultacie nie zobaczysz żadnych danych w kontrolkach ani w oknie dialogowym Tworzenie powiązania danych, a strona będzie trudniejsza do wystylizowania i zaprojektowania.

Pierwszym środkiem, który należy wypróbować, jest zakomentowanie przypisania DataContext i ustawienie DataContext w znacznika strony. Dzięki temu dane w czasie rzeczywistym są widoczne zarówno podczas projektowania, jak i wykonywania. Aby to zrobić, najpierw otwórz stronę XAML. Następnie w oknie konspektu dokumentu kliknij główny element projektowalny (zazwyczaj z etykietą [Strona]), aby go zaznaczyć. W oknie właściwości znajdź właściwość DataContext (wewnątrz kategorii Common) i zmodyfikuj ją. Wybierz typ modelu widoku z okna dialogowego Wybierz obiekt, a następnie kliknij przycisk OK.

Oto, jak wygląda wynikowy znacznik.

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

I oto, jak wygląda powierzchnia projektu teraz, gdy powiązania zostały ustalone. Zwróć uwagę, że selektor ścieżki w oknie dialogowym tworzenie powiązania danych jest teraz wypełniany na podstawie typu DataContext i właściwości, z którymi można powiązać.

Okienko dialogowe Tworzenie powiązania danych wymaga tylko typu, z którym będzie pracować, ale wartości muszą być przypisane do właściwości powiązań. Jeśli nie chcesz skontaktować się z usługą w chmurze w czasie projektowania (ze względu na wydajność, płacenie za transfer danych, problemy z prywatnością, tego rodzaju rzeczy), kod inicjowania może sprawdzić, czy aplikacja jest uruchomiona w narzędziu projektowym (takim jak Visual Studio lub Blend for Visual Studio), a w takim przypadku załaduj przykładowe dane do użycia tylko w czasie projektowania.

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

Jeśli musisz przekazać parametry do kodu inicjowania, możesz użyć lokalizatora modelu widoku. Lokalizator modelu widoku to klasa, którą można umieścić w zasobach aplikacji. Ma właściwość, która uwidacznia model widoku, a DataContext strony jest powiązany z tą właściwością. Innym wzorcem, którego może używać lokalizator lub model widoku, jest wstrzykiwanie zależności, które może konstruować dostawcę danych na czas projektowania lub czas wykonywania, z uwzględnieniem wspólnego interfejsu.

"Przykładowe dane z klasy" i atrybuty czasu projektowania

Jeśli z jakiegokolwiek powodu żadna z opcji w poprzedniej sekcji nie działa, nadal masz wiele opcji danych czasu projektowania dostępnych za pośrednictwem funkcji narzędzi XAML i atrybutów czasu projektowania. Jedną z dobrych opcji jest funkcja Create Sample Data from Class in Blend for Visual Studio (Tworzenie przykładowych danych z klasy w programie Blend for Visual Studio). To polecenie można znaleźć na jednym z przycisków w górnej części panelu Dane.

Wystarczy określić klasę polecenia do użycia. Następnie polecenie wykonuje dwie ważne czynności. Najpierw generuje plik XAML, który zawiera przykładowe dane odpowiednie do utworzenia instancji wybranej klasy i wszystkich jej członków, rekursywnie (w rzeczywistości narzędzie działa równie dobrze z plikami XAML lub JSON). Po drugie wypełnia panel Dane schematem wybranej klasy. Następnie można przeciągać członków z panelu Data na obszar projektowy, aby wykonywać różne zadania. W zależności od tego, co przeciągasz i gdzie to upuszczasz, możesz dodawać wiązania do istniejących kontrolek (przy użyciu {Binding}) lub utworzyć nowe kontrolki i powiązać je jednocześnie. W obu przypadkach operacja ustawia również kontekst danych projektowych (d:DataContext) dla Ciebie (jeśli jeszcze nie został ustawiony) w głównej sekcji układu strony. Ten kontekst danych w czasie projektowania używa atrybutu d:DesignData, aby pobrać przykładowe dane z wygenerowanego pliku XAML (który w ten sposób można znaleźć w projekcie i edytować tak, aby zawierał przykładowe dane, które chcesz).

<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óżne deklaracje xmlns oznaczają, że atrybuty z d: prefiks są interpretowane tylko w czasie projektowania i są ignorowane w czasie wykonywania. W związku z tym atrybut d:DataContext wpływa tylko na wartość właściwości DataContext w czasie projektowania; nie ma wpływu na czas wykonywania. Można nawet ustawić zarówno d:DataContext, jak i DataContext w kodzie znaczników, jeśli chcesz. d:DataContext zostanie nadpisane w czasie projektowania, a DataContext zostanie nadpisane w czasie wykonywania. Te same reguły przesłonięcia mają zastosowanie do wszystkich atrybutów czasu projektowania i czasu wykonywania.

Atrybut d:DataContext i wszystkie inne atrybuty czasu projektowania są udokumentowane w temacie Design-Time Attributes, który jest nadal ważny dla aplikacji platformy uniwersalnej systemu Windows (UWP).

CollectionViewSource nie ma właściwości DataContext, ale ma właściwość Source. W związku z tym istnieje właściwość d:Source, której można użyć, aby ustawić przykładowe dane tylko na czas projektowania w 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}}" ... />
    ...

W tym celu będziesz mieć klasę o nazwie Recordings : ObservableCollection<Recording>i edytować przykładowy plik XAML danych tak, aby zawierał tylko obiekt Recordings (z Nagrywanie obiektów wewnątrz), jak pokazano poniżej.

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

Jeśli używasz przykładowego pliku danych JSON zamiast XAML, musisz ustawić właściwość Type.

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

Do tej pory używaliśmy d:DesignData do ładowania przykładowych danych czasu projektowania z pliku XAML lub JSON. Alternatywą dla tego jest rozszerzenie znaczników d:DesignInstance, które wskazuje, że źródło w czasie projektowania jest oparte na klasie określonej przez właściwość Type. Oto przykład.

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

Właściwość IsDesignTimeCreatable wskazuje, że narzędzie projektowe powinno utworzyć wystąpienie klasy, co oznacza, że klasa ma publiczny konstruktor domyślny i że wypełnia się danymi (rzeczywistymi lub przykładowymi). Jeśli nie ustawisz IsDesignTimeCreatable (lub jeśli ustawisz ją na wartość False), nie uzyskasz przykładowych danych wyświetlanych na powierzchni projektowej. W takim przypadku jedynym zadaniem narzędzia projektowego jest analizowanie klasy pod kątem jej powiązanych właściwości i wyświetlanie ich w panelu Dane oraz w oknie dialogowym Tworzenie powiązania danych.

Przykładowe dane do tworzenia prototypów

Do tworzenia prototypów potrzebne są przykładowe dane zarówno w czasie projektowania, jak i w czasie wykonywania. W tym przypadku Blend for Visual Studio oferuje funkcję Nowe przykładowe dane. To polecenie można znaleźć na jednym z przycisków w górnej części panelu Dane.

Zamiast określać klasę, można faktycznie zaprojektować schemat przykładowego źródła danych bezpośrednio w panelu Dane. Możesz również edytować przykładowe wartości danych w panelu Dane: nie ma potrzeby otwierania i edytowania pliku (chociaż nadal możesz to zrobić, jeśli wolisz).

Funkcja "Nowe przykładowe dane" wykorzystuje DataContext, a nie d:DataContext, co zapewnia dostępność przykładowych danych zarówno podczas uruchamiania szkicu lub prototypu, jak i podczas ich projektowania. Panel Data naprawdę przyspiesza projektowanie i wiązanie zadań. Na przykład, przeciągnięcie właściwości kolekcji z panelu Data na powierzchnię projektową generuje kontrolkę elementów powiązanych z danymi oraz niezbędne szablony, wszystko gotowe do kompilacji i uruchomienia.