Używanie danych czasu projektowania z podglądem XAML

Niektóre układy są trudne do wizualizacji bez danych. Skorzystaj z tych wskazówek, aby jak najlepiej wyświetlać podgląd stron z dużą ilością danych w programie podglądu XAML.

Ostrzeżenie

Program podglądu XAML został wycofany w programie Visual Studio 2019 w wersji 16.8 i Visual Studio dla komputerów Mac w wersji 8.8 i zastąpiony funkcją Przeładowywanie na gorąco XAML w programie Visual Studio 2019 w wersji 16.9 i Visual Studio dla komputerów Mac w wersji 8.9. Dowiedz się więcej o Przeładowywanie na gorąco XAML w dokumentacji.

Uwaga

Jeśli używasz programu Windows Presentation Foundation (WPF) lub platformy UWP, zobacz Use Design Time Data with the XAML Projektant for desktop applications (Używanie danych czasu projektowania z Projektant XAML dla aplikacji klasycznych)

Podstawy danych czasu projektowania

Dane czasu projektowania to fałszywe dane ustawione w celu ułatwienia wizualizacji kontrolek w podglądzie XAML. Aby rozpocząć, dodaj następujące wiersze kodu do nagłówka strony XAML:

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

Po dodaniu przestrzeni nazw można umieścić d: przed dowolnym atrybutem lub kontrolką, aby pokazać ją w podglądzie XAML. Elementy z elementami d: nie są wyświetlane w czasie wykonywania.

Możesz na przykład dodać tekst do etykiety, która zwykle ma powiązane dane.

<Label Text="{Binding Name}" d:Text="Name!" />

W tym przykładzie bez d:Textelementu podgląd XAML nie będzie pokazywał nic dla etykiety. Zamiast tego zostanie wyświetlony komunikat "Name!", w którym etykieta będzie zawierać rzeczywiste dane w czasie wykonywania.

Można użyć d: z dowolnym atrybutem Xamarin.Forms dla kontrolki, takich jak kolory, rozmiary czcionek i odstępy. Możesz nawet dodać go do samej kontrolki:

<d:Button Text="Design Time Button" />

W tym przykładzie przycisk jest wyświetlany tylko w czasie projektowania. Użyj tej metody, aby umieścić symbol zastępczy dla niestandardowej kontrolki, która nie jest obsługiwana przez program podglądu XAML.

Podgląd obrazów w czasie projektowania

Źródło czasu projektowania można ustawić dla obrazów powiązanych ze stroną lub załadowanych dynamicznie. W projekcie systemu Android dodaj obraz, który chcesz wyświetlić w podglądzie XAML, do folderu Resources > Drawable . W projekcie systemu iOS dodaj obraz do folderu Resources . Następnie możesz wyświetlić ten obraz w podglądzie XAML w czasie projektowania:

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

Dane czasu projektowania dla obiektów ListView

ListViews to popularny sposób wyświetlania danych w aplikacji mobilnej. Trudno je jednak wizualizować bez rzeczywistych danych. Aby używać z nimi danych czasu projektowania, musisz utworzyć tablicę czasową projektu, która będzie używana jako element ItemsSource. Podgląd XAML wyświetla zawartość tej tablicy w widoku ListView w czasie projektowania.

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Item One</x:String>
                <x:String>Item Two</x:String>
                <x:String>Item Three</x:String>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding ItemName}"
                          d:Text="{Binding .}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

W tym przykładzie zostanie wyświetlony element ListView z trzema elementami TextCells w podglądzie XAML. Możesz zmienić x:String model danych na istniejący w projekcie.

Można również utworzyć tablicę obiektów danych. Na przykład publiczne właściwości Monkey obiektu danych można utworzyć jako dane czasu projektowania:

namespace Monkeys.Models
{
    public class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
    }
}

Aby użyć klasy w języku XAML, należy zaimportować przestrzeń nazw w węźle głównym:

xmlns:models="clr-namespace:Monkeys.Models"

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:Monkey}">
                <models:Monkey Name="Baboon" Location="Africa and Asia"/>
                <models:Monkey Name="Capuchin Monkey" Location="Central and South America"/>
                <models:Monkey Name="Blue Monkey" Location="Central and East Africa"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="models:Monkey">
                <TextCell Text="{Binding Name}"
                          Detail="{Binding Location}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Korzyścią jest to, że można powiązać z rzeczywistym modelem, który ma być używany.

Alternatywa: Kodowanie statycznego modelu ViewModel

Jeśli nie chcesz dodawać danych czasu projektowania do poszczególnych kontrolek, możesz skonfigurować pozorny magazyn danych, aby powiązać ze stroną. Zapoznaj się z wpisem w blogu Jamesa Montemagno'a dotyczącym dodawania danych czasu projektowania, aby zobaczyć, jak powiązać ze statycznym modelem ViewModel w języku XAML.

Rozwiązywanie problemów

Wymagania

Dane czasu projektowania wymagają minimalnej wersji Xamarin.Forms 3.6.

Funkcja IntelliSense wyświetla zwijane linie pod moimi danymi czasu projektowania

Jest to znany problem i zostanie rozwiązany w nadchodzącej wersji programu Visual Studio. Projekt będzie nadal kompilować bez błędów.

Podgląd XAML przestał działać

Spróbuj zamknąć i ponownie otworzyć plik XAML oraz wyczyścić i ponownie skompilować projekt.