Compartilhar via

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

Alguns controles dependentes de dados, como ListView, ListBoxe 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 destinados ao WPF para .NET Core ou .NET Framework quando você estiver usando o novo designer.

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

O recurso de Dados de Exemplo destina-se apenas à visualização durante o 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 ItemsSource de d:ItemsSource. Os dados de exemplo precisam que o namespace de tempo de design funcione.

Nota

Para saber mais sobre as propriedades de tempo de desenvolvimento no XAML, consulte propriedades de tempo de desenvolvimento 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 em seu controle ListView, Listboxou DataGrid. Por exemplo:

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

Captura de tela que mostra dados de exemplo em uma grade de dados.

Neste exemplo, sem d:ItemsSource="{d:SampleData}", o Designer XAML mostraria uma grade de dados vazia. Em vez disso, com d:SampleData, agora ele mostra 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 você 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, ListViewou DataGrid ao usar 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 fonte. 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>

Captura de tela que mostra dados de exemplo em uma exibição de lista com um modelo de dados.

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:

Captura de tela que mostra dados de exemplo com Ações Sugeridas.

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

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

Resolução de Problemas

Se os dados de exemplo não mostrarem 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

  • Last updated on