Usar dados de tempo de design com o visualizador XAML

Artigo
07/13/2023

Alguns layouts são difíceis de visualizar sem dados. Use essas dicas para aproveitar ao máximo a visualização de suas páginas pesadas de dados no Visualizador XAML.

Aviso

O Visualizador XAML foi preterido no Visual Studio 2019 versão 16.8 e Visual Studio para Mac versão 8.8 e substituído pelo recurso XAML Recarga Dinâmica no Visual Studio 2019 versão 16.9 e Visual Studio para Mac versão 8.9. Saiba mais sobre Recarga Dinâmica XAML na documentação.

Observação

Se você estiver usando Windows Presentation Foundation (WPF) ou UWP, consulte Usar dados de tempo de design com o Designer XAML para aplicativos da área de trabalho

Noções básicas de dados de tempo de design

Dados de tempo de design são dados falsos que você define para facilitar a visualização de seus controles no Visualizador XAML. Para começar, adicione as seguintes linhas de código ao cabeçalho da página XAML:

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

Depois de adicionar os namespaces, você pode colocar d: na frente de qualquer atributo ou controle para mostrá-lo no Visualizador XAML. Elementos com d: não são mostrados em runtime.

Por exemplo, você pode adicionar texto a um rótulo que geralmente tem dados associados a ele.

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

Criar dados de tempo com texto em um rótulo

Neste exemplo, sem d:Text, o Visualizador XAML não mostraria nada para o rótulo. Em vez disso, ele mostra "Nome!" em que o rótulo terá dados reais em runtime.

Você pode usar d: com qualquer atributo para um Xamarin.Forms controle, como cores, tamanhos de fonte e espaçamento. Você pode até mesmo adicioná-lo ao próprio controle:

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

Nesse exemplo, o botão só aparece em tempo de design. Use esse método para colocar um espaço reservado para um controle personalizado sem suporte do Visualizador XAML.

Pré-visualização de imagens em tempo de design

Você pode definir um tempo de design Fonte para imagens associadas à página ou carregadas dinamicamente. Em seu projeto android, adicione a imagem que você deseja mostrar no Visualizador XAML à pasta Recursos > Desenháveis . No projeto do iOS, adicione a imagem à pasta Recursos . Em seguida, você pode mostrar essa imagem no Visualizador XAML em tempo de design:

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

Dados de tempo de design para ListViews

ListViews são uma maneira popular de exibir dados em um aplicativo móvel. No entanto, eles são difíceis de visualizar sem dados reais. Para usar dados de tempo de design com eles, você precisa criar uma matriz de tempo de design para usar como um ItemsSource. O Visualizador XAML exibe o que está nessa matriz em seu ListView em tempo de design.

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

Este exemplo mostrará um ListView de três TextCells no Visualizador XAML. Você pode alterar x:String para um modelo de dados existente em seu projeto.

Você também pode criar uma matriz de objetos de dados. Por exemplo, as propriedades públicas de um Monkey objeto de dados podem ser construídas como dados de tempo de design:

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

Para usar a classe em XAML, você precisará importar o namespace no nó raiz:

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>

O benefício aqui é que você pode associar ao modelo real que planeja usar.

Alternativa: codificar um ViewModel estático

Se você não quiser adicionar dados de tempo de design a controles individuais, poderá configurar um armazenamento de dados fictício para associar à sua página. Consulte a postagem no blog de James Montemagno sobre como adicionar dados de tempo de design para ver como associar a um ViewModel estático em XAML.

Solução de problemas

Requisitos

Os dados de tempo de design exigem uma versão mínima de Xamarin.Forms 3.6.

O IntelliSense mostra linhas onduladas em meus dados de tempo de design

Esse é um problema conhecido e será corrigido em uma versão futura do Visual Studio. O projeto ainda será compilado sem erros.

O visualizador XAML parou de funcionar

Tente fechar e reabrir o arquivo XAML e limpar e recompilar seu projeto.

Compartilhar via