Usare i dati della fase di progettazione con il visualizzatore anteprima XAML

Alcuni layout sono difficili da visualizzare senza dati. Usa questi suggerimenti per sfruttare al meglio l'anteprima delle tue pagine complesse dai dati nel visualizzatore anteprima XAML.

Avviso

Xaml Previewer è stato deprecato in Visual Studio 2019 versione 16.8 e Visual Studio per Mac versione 8.8 e sostituito dalla funzionalità Ricaricamento rapido XAML in Visual Studio 2019 versione 16.9 e Visual Studio per Mac versione 8.9. Altre informazioni sui Ricaricamento rapido XAML sono disponibili nella documentazione.

Nota

Se usi Windows Presentation Foundation (WPF) o UWP, vedi Usare i dati della fase di progettazione con la finestra di progettazione XAML per le applicazioni desktop

Nozioni di base dei dati in fase di progettazione

I dati in fase di progettazione sono dati falsi impostati per semplificare la visualizzazione dei controlli nell'anteprima XAML. Per iniziare, aggiungere le righe di codice seguenti all'intestazione della pagina XAML:

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

Dopo aver aggiunto gli spazi dei nomi, puoi inserire d: davanti a qualsiasi attributo o controllo per visualizzarlo nell'anteprima XAML. Gli elementi con d: non vengono visualizzati in fase di esecuzione.

Ad esempio, è possibile aggiungere testo a un'etichetta che in genere contiene dati associati.

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

In questo esempio, senza d:Text, l'anteprima XAML non mostrerà nulla per l'etichetta. Mostra invece "Name!" in cui l'etichetta avrà dati reali in fase di esecuzione.

È possibile usare d: con qualsiasi attributo per un Xamarin.Forms controllo, ad esempio colori, dimensioni del carattere e spaziatura. È anche possibile aggiungerlo al controllo stesso:

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

In questo esempio il pulsante viene visualizzato solo in fase di progettazione. Usa questo metodo per inserire un segnaposto in per un controllo personalizzato non supportato dal visualizzatore anteprima XAML.

Visualizzare in anteprima le immagini in fase di progettazione

È possibile impostare un'origine in fase di progettazione per le immagini associate alla pagina o caricate in modo dinamico. Nel progetto Android aggiungere l'immagine da visualizzare nell'anteprima XAML alla cartella Risorse > disegnabili . Nel progetto iOS aggiungere l'immagine alla cartella Risorse . È quindi possibile visualizzare l'immagine nel visualizzatore anteprima XAML in fase di progettazione:

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

Dati della fase di progettazione per ListViews

ListViews è un modo comune per visualizzare i dati in un'app per dispositivi mobili. Tuttavia, sono difficili da visualizzare senza dati reali. Per usare i dati della fase di progettazione con essi, è necessario creare una matrice temporale di progettazione da usare come ItemsSource. Il visualizzatore anteprima XAML visualizza ciò che si trova in tale matrice in ListView in fase di progettazione.

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

Questo esempio mostrerà un controllo ListView di tre TextCell nel visualizzatore anteprima XAML. È possibile passare x:String a un modello di dati esistente nel progetto.

È anche possibile creare una matrice di oggetti dati. Ad esempio, le proprietà pubbliche di un Monkey oggetto dati possono essere costruite come dati in fase di progettazione:

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

Per usare la classe in XAML, è necessario importare lo spazio dei nomi nel nodo radice:

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>

Il vantaggio è che è possibile associare al modello effettivo che si prevede di usare.

Alternativa: impostare come hardcoded un viewModel statico

Se non si vogliono aggiungere dati in fase di progettazione a singoli controlli, è possibile configurare un archivio dati fittizio da associare alla pagina. Per informazioni su come eseguire il binding a un ViewModel statico in XAML, vedere il post di blog di James Montemagno sull'aggiunta di dati in fase di progettazione.

Risoluzione dei problemi

Requisiti

I dati della fase di progettazione richiedono una versione minima di Xamarin.Forms 3.6.

IntelliSense mostra linee ondulate sotto i dati della fase di progettazione

Si tratta di un problema noto e verrà risolto in una versione futura di Visual Studio. Il progetto verrà comunque compilato senza errori.

Il visualizzatore anteprima XAML ha smesso di funzionare

Provare a chiudere e riaprire il file XAML e a pulire e ricompilare il progetto.