Compartilhar via

Usar dados de exemplo em tempo de design com o Designer XAML no Visual Studio

  • Artigo

Alguns controles dependentes de dados, como ListView, ListBox e DataGrid, são difíceis de visualizar sem dados. Neste artigo, examinaremos uma nova abordagem que permite que os desenvolvedores que estão trabalhando em projetos do .NET Core do WPF (Windows Presentation Foundation) ou projetos do WPF .NET Framework com o Designer XAML no Visual Studio habilitem dados de exemplo nesses controles.

Requisitos

O recurso Dados de Exemplo requer o Visual Studio 2019 versão 16.10 ou posterior.

O recurso dá suporte a projetos da área de trabalho do Windows direcionados ao WPF para .NET Core ou .NET Framework quando você estiver usando o novo designer. Para habilitar o novo designer para .NET Framework:

  1. Acesse Ferramentas>Opções>Ambiente>Versão Prévia dos Recursos.
  2. Selecione Novo Designer XAML do WPF para .NET Framework e reinicie o Visual Studio.

Noções básicas do recurso Dados de Exemplo

O recurso Dados de Exemplo destina-se apenas à visualização em tempo de design. Ele aparece apenas no designer XAML, não no aplicativo em execução. Dessa forma, ele é aplicado à versão em tempo de design da propriedade d:ItemsSource de ItemsSource. Os dados de exemplo precisam que o namespace de tempo de design funcione.

Observação

Para saber mais sobre as propriedades de tempo de design em XAML, confira Propriedades de tempo de design XAML.

Para começar, adicione as seguintes linhas de código ao cabeçalho do documento XAML se elas ainda não estiverem presentes:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

Depois de adicionar os namespaces, você pode usar d:ItemsSource="{d:SampleData}" para habilitar dados de exemplo no controle ListView, Listbox ou DataGrid. Por exemplo:

<DataGrid d:ItemsSource="{d:SampleData}"/>

Screenshot that shows sample data on a data grid.

Neste exemplo, sem d:ItemsSource="{d:SampleData}", o Designer XAML mostraria uma grade de dados vazia. Em vez disso, com d:SampleData, ele agora mostra os dados de exemplo padrão gerados.

Por padrão, cinco itens são exibidos. No entanto, você pode usar a propriedade ItemCount para especificar quantos itens deseja exibir. Por exemplo: d:ItemsSource="{d:SampleData ItemCount=2}".

Dados de exemplo com modelos de dados

O recurso Dados de Exemplo funciona para controles ListBox, ListView ou DataGrid quando você usa modelos de dados. O recurso analisará o controle DataTemplate e tentará gerar os dados apropriados para ele.

Os dados de exemplo serão gerados apenas para elementos em modelos de dados que usam associações. Os dados de exemplo serão gerados mesmo se as associações ainda não tiverem uma origem. Por exemplo:

<ListView d:ItemsSource="{d:SampleData ItemCount=3}">
     <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="50" Source="{Binding ProfilePicture}"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding FirstName}" Margin="5"/>
                    <Label Content="{Binding LastName}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Screenshot that shows sample data in a list view with a data template.

Dados de exemplo com Ações Sugeridas

Para habilitar ou desabilitar facilmente dados de exemplo para um controle do designer, você pode usar o recurso Ações Sugeridas. Ações Sugeridas é uma lâmpada no designer que aparece no canto superior direito quando você seleciona um controle. Você pode habilitar dados de exemplo selecionando seu controle, selecionando a lâmpada e selecionando Mostrar Dados de Exemplo. Por exemplo:

Screenshot that shows sample data with Suggested Actions.

Dados de exemplo com a interface IValueConverter

O recurso Dados de Exemplo não dá suporte total a conversores ou à interface IValueConverter. No entanto, você pode fazê-lo funcionar fazendo um ou ambos os seguintes:

  • Verifique se sua função Convert pode lidar com um cenário em que o valor já é seu tipo de destino.
  • Implemente a função ConvertBack que converterá seu valor de volta para o tipo original.

Solução de problemas

Se os dados de exemplo não estiverem mostrando nada ou não mostrarem o tipo correto, você poderá tentar atualizar o designer ou fechar e reabrir a página.

Se você tiver um problema que não esteja listado nesta seção ou que não possa ser corrigido atualizando a página, informe-nos usando a ferramenta Relatar um Problema.

Conteúdo relacionado