Použití dat pro čas návrhu v náhledu XAML

Některá rozložení je obtížné vizualizovat bez dat. Pomocí těchto tipů můžete na stránkách v náhledu XAML využít náhled stránek s velkým objemem dat.

Upozornění

náhled jazyka xaml byl zastaralý v Visual Studio 2019 verze 16,8 a Visual Studio pro Mac verze 8,8 a nahrazen funkcí Hot reload load v Visual Studio 2019 verze 16,9 a Visual Studio pro Mac verze 8,9. Přečtěte si další informace o Hot reloading XAML v dokumentaci.

Poznámka

pokud používáte Windows Presentation Foundation (WPF) nebo UWP, přečtěte si téma použití dat o době návrhu v Návrhář XAML pro desktopové aplikace .

Základy časových údajů návrhu

Data návrhu jsou falešná data, která jste nastavili tak, aby se vaše ovládací prvky lépe vizualizovat v náhledu XAML. Chcete-li začít, přidejte do záhlaví stránky XAML následující řádky kódu:

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

Po přidání oborů názvů můžete umístit d: před libovolný atribut nebo ovládací prvek, který chcete zobrazit v náhledu XAML. Prvky, které d: nejsou zobrazeny za běhu.

Například můžete přidat text do popisku, který má obvykle data s ním spojená.

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

Design time data with text in a Label

V tomto příkladu by d:Text Náhled jazyka XAML neměl pro popisek nic zobrazit. Místo toho zobrazuje "název!", kde popisek bude mít skutečná data za běhu.

Můžete použít d: s libovolným atributem pro Xamarin.Forms ovládací prvek, jako jsou barvy, velikosti písem a mezery. Můžete ho dokonce přidat do samotného ovládacího prvku:

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

Design time data with a Button control

V tomto příkladu se tlačítko zobrazí pouze v době návrhu. Tuto metodu použijte, chcete-li vložit zástupný symbol pro vlastní ovládací prvek, který není podporován náhledem XAML.

Náhled obrázků v době návrhu

Můžete nastavit zdroj doby návrhu pro obrázky, které jsou vázány na stránku nebo dynamicky načteny. V projektu pro Android přidejte obrázek, který chcete zobrazit v náhledu XAML, do složky vykreslené prostředky . V projektu iOS přidejte image do složky Resources . Tento obrázek pak můžete zobrazit v náhledu XAML v době návrhu:

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

Design time data with images

Data pro čas návrhu pro zobrazení ListView

Zobrazení ListView představují oblíbený způsob, jak zobrazit data v mobilní aplikaci. Je ale obtížné je vizualizovat bez reálných dat. Chcete-li s nimi používat data o době návrhu, je nutné vytvořit pole pro dobu návrhu, které se použije jako ItemsSource. Náhled XAML zobrazuje, co je v tomto poli v zobrazení ListView v době návrhu.

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

Design time data with a ListView

V tomto příkladu se zobrazí zobrazení ListView tří TextCells v náhledu XAML. x:StringV projektu můžete změnit na existující datový model.

Můžete také vytvořit pole datových objektů. Veřejné vlastnosti Monkey datového objektu lze například sestavit jako data doby návrhu:

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

Chcete-li použít třídu v jazyce XAML, budete muset importovat obor názvů do kořenového uzlu:

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>

Výhodou je, že se můžete připojit ke skutečnému modelu, který plánujete použít.

Alternativa: nekódujte pevně statického ViewModel

Pokud nechcete přidávat data o době návrhu na jednotlivé ovládací prvky, můžete nastavit napodobné úložiště dat, které se bude navazovat na vaši stránku. Informace o tom, jak vytvořit vazby na statický ViewModel v jazyce XAML, najdete v příspěvku na blogu Montemagno.

Řešení potíží

Požadavky

Data doby návrhu vyžadují minimální verzi Xamarin.Forms 3,6.

Technologie IntelliSense zobrazuje v části data při návrhu vlnové čáry

Jedná se o známý problém, který bude vyřešen v nadcházející verzi Visual Studio. Projekt se stále sestaví bez chyb.

Prohlížeč XAML Preview přestal fungovat.

Zkuste soubor XAML zavřít a znovu otevřít a vyčistěte a znovu sestavte projekt.