Použití dat doby návrhu s náhledem XAML

Článek
03/05/2024

Některá rozložení se obtížně vizualizují bez dat. Tyto tipy vám pomůžou maximálně využít náhled stránek náročných na data v prohlížeči náhledu XAML.

Upozorňující

Náhled XAML je zastaralý v sadě Visual Studio 2019 verze 16.8 a Visual Studio pro Mac verze 8.8 a nahrazen funkcí Opětovné načítání za provozu XAML v sadě Visual Studio 2019 verze 16.9 a Visual Studio pro Mac verze 8.9. Další informace o Opětovné načítání za provozu XAML najdete v dokumentaci.

Poznámka:

Pokud používáte Windows Presentation Foundation (WPF) nebo UPW, přečtěte si téma Použití dat doby návrhu v Návrháři XAML pro desktopové aplikace.

Základy dat návrhu

Data času návrhu jsou falešná data, která nastavíte, aby se ovládací prvky snadněji vizualizovaly v náhledu XAML. Začněte tím, že do záhlaví stránky XAML přidáte 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 před libovolný atribut nebo ovládací prvek vložit d: , aby se zobrazil v náhledu XAML. Elementy s d: nejsou zobrazeny za běhu.

Do popisku, který má obvykle svázaná data, můžete například přidat text.

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

V tomto příkladu bez d:Textnáhledu XAML by se pro popisek nic nezobrazuje. Místo toho se zobrazí název, ve kterém bude popisek obsahovat skutečná data za běhu.

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

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

V tomto příkladu se tlačítko zobrazí pouze v době návrhu. Tuto metodu použijte k vložení zástupného symbolu pro vlastní ovládací prvek, který náhled XAML nepodporuje.

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

Můžete nastavit zdroj času návrhu pro obrázky, které jsou vázané na stránku nebo načteny dynamicky. V projektu androidu přidejte obrázek, který chcete zobrazit v náhledu XAML, do složky Zdroje > kreslení . V projektu iOS přidejte obrázek 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" />

Data času návrhu pro ListViews

ListViews představují oblíbený způsob zobrazení dat v mobilní aplikaci. Je ale obtížné je vizualizovat bez skutečných dat. Pokud chcete použít data času návrhu s nimi, musíte vytvořit pole času návrhu, které se použije jako Zdroj položek. Náhled XAML zobrazí, co je v daném 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>

Tento příklad zobrazí ListView ze tří TextCells v náhledu XAML. V projektu můžete přejít x:String na existující datový model.

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

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

Pokud chcete použít třídu v XAML, budete muset importovat obor názvů v kořenovém 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 můžete svázat se skutečným modelem, který plánujete použít.

Alternativní: Pevně zakódování statického modelu ViewModel

Pokud nechcete přidávat data času návrhu do jednotlivých ovládacích prvků, můžete nastavit napodobené úložiště dat pro vytvoření vazby na stránku. Přečtěte si blogový příspěvek Jamese Montemagna o přidání dat návrhu a zjistěte, jak vytvořit vazbu na statický model ViewModel v XAML.

Řešení problému

Požadavky

Data doby návrhu Xamarin.Forms vyžadují minimální verzi 3.6.

IntelliSense zobrazuje vlnovky pod mými daty času návrhu.

Jedná se o známý problém a opravíme ho v nadcházející verzi sady Visual Studio. Projekt se stále sestaví bez chyb.

Náhled XAML přestal fungovat.

Zkuste zavřít a znovu otevřít soubor XAML a vyčistit a znovu sestavit projekt.

Sdílet prostřednictvím