Partilhar via

Usar dados de exemplo durante a conceção 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, analisaremos uma nova abordagem que permite que os desenvolvedores que estão trabalhando em projetos .NET Core do Windows Presentation Foundation (WPF) ou projetos do WPF .NET Framework com o Designer XAML no Visual Studio habilitem dados de exemplo nesses controles.

Requerimentos

O recurso Dados de Exemplo requer o Visual Studio 2019 versão 16.10 ou posterior. O recurso oferece suporte a projetos de á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

A funcionalidade 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. Como tal, aplica-se à versão em tempo de conceção da propriedade ItemsSourced:ItemsSource. Os dados de exemplo precisam do namespace de tempo de design para funcionar.

Observação

Para saber mais sobre propriedades em tempo de desenvolvimento em XAML, consulte propriedades em tempo de desenvolvimento XAML.

Para começar, adicione as seguintes linhas de código ao cabeçalho do documento XAML se 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, ele agora 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 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 quando você usa modelos de dados. O recurso analisará o controle de 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 amostra serão gerados mesmo que as ligações ainda não tenham 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 ecrã que mostra dados de exemplo numa vista 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 é um ícone de lâmpada no designer que aparece no canto superior direito quando se seleciona um controlo. Você pode habilitar dados de exemplo selecionando seu controle, selecionando a lâmpada e, em seguida, selecionando Mostrar dados de amostra. Por exemplo:

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

Dados de exemplo com a interface IValueConverter

O recurso Dados de exemplo ainda não suporta completamente os conversores ou a interface IValueConverter. No entanto, você pode fazê-lo funcionar seguindo um destes procedimentos ou ambos:

  • Certifique-se de que sua função Convert pode lidar com um cenário onde 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ê pode 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