Usar dados de tempo de design com o designer XAML no Visual Studio

Alguns layouts são difíceis de visualizar sem dados. Neste documento, analisaremos uma das abordagens que os desenvolvedores que trabalham em projetos de área de trabalho podem usar para simular dados no designer XAML. Essa abordagem é feita usando o namespace Ignorable "d:" existente. Com essa abordagem, você pode adicionar rapidamente dados em tempo de design às suas páginas ou controles sem a necessidade de criar um ViewModel simulado completo, ou apenas testar como uma alteração de propriedade pode afetar seu aplicativo sem se preocupar que essas alterações afetarão suas compilações de versão. Todos os dados d: são usados apenas pelo Designer XAML e nenhum valor de namespace ignorável é compilado no aplicativo.

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

Dados de simulação são dados fictícios definidos para facilitar a visualização dos controles no Designer 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 colocád: na frente de qualquer atributo ou controle para mostrá-lo somente no Designer XAML, mas não em tempo de execução.

Por exemplo, você pode adicionar texto a um TextBlock que geralmente tem dados vinculados a ele.

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

Neste exemplo, sem d:Text, o Designer XAML não mostraria nada para o TextBlock. Em vez disso, ele mostra "Name!" onde o TextBlock terá dados reais em tempo de execução.

Você pode usar d: com atributos para qualquer controle UWP ou WPF .NET Core, como cores, tamanhos de fonte e espaçamento. Você pode até adicioná-lo ao próprio controle.

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

Neste exemplo, o botão só aparece em tempo de desenvolvimento. Use esse método para colocar um espaço reservado para um controle personalizado ou para experimentar controles diferentes. Todos os atributos e controles d: serão ignorados durante o tempo de execução.

Visualizar imagens em tempo de desenvolvimento

Você pode definir uma fonte durante o tempo de design para imagens vinculadas à página ou carregadas dinamicamente. Adicione a imagem que você deseja mostrar no Designer XAML ao seu projeto. Em seguida, pode mostrar essa imagem no Designer XAML durante o design:

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

Dados em tempo de desenvolvimento para ListViews

ListViews é uma maneira popular de exibir dados em seu aplicativo da área de trabalho. No entanto, são difíceis de visualizar sem quaisquer dados. Você pode usar esta funcionalidade para criar um ItemSource ou itens de dados em linha durante o tempo de design. O Designer XAML exibe o que está nessa matriz em seu ListView em tempo de design.

Exemplo do WPF .NET Core

Para usar o tipo system:String, certifique-se de incluir xmlns:system="clr-namespace:System;assembly=mscorlib no cabeçalho XAML.

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type system:String}">
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </x:Array>
        </d:ListView.ItemsSource>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ItemName}" d:Text="{Binding .}" />
        </DataTemplate>
    </ListView.ItemTemplate>
   </ListView>
</StackPanel>

Este exemplo anterior mostra um ListView com três TextBlocks no Designer XAML.

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

namespace Cities.Models
{
    public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

Para usar a classe em XAML, você deve importar o namespace no nó raiz.

xmlns:models="clr-namespace:Cities.Models"

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:City}">
                <models:City Name="Seattle" Country="United States"/>
                <models:City Name="London" Country="United Kingdom"/>
                <models:City Name="Panama City" Country="Panama"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                 <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Name}" Margin="0,0,5,0" />
                    <TextBlock Text="{Binding Country}" />
                 </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

O benefício aqui é que você pode vincular seus controles a uma versão estática em tempo de design do seu modelo.

Exemplo de UWP

x:Array não é suportado na UWP. Por conseguinte, podemos utilizá<d:ListView.Items> em vez disso. Para usar o tipo system:String, certifique-se de incluir http://schemas.microsoft.com/winfx/2009/xaml no cabeçalho XAML.

    <StackPanel>
        <ListView>
            <d:ListView.Items>
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </d:ListView.Items>
        </ListView>
    </StackPanel>

Usar dados em tempo de design com tipos e propriedades personalizados

Por padrão, esse recurso funciona apenas com controles e propriedades da plataforma. Nesta seção, abordaremos as etapas necessárias para permitir que você use seus próprios controles personalizados como controles de tempo de design, um novo recurso disponível para clientes que usam o Visual Studio 2019 versão 16.8 ou posterior. Há três requisitos para permitir isso:

• Um namespace xmlns personalizado

  xmlns:myControls="http://MyCustomControls"
  

• Uma versão em tempo de desenvolvimento do seu namespace. Isto pode ser conseguido simplesmente anexando /design no final.

  xmlns:myDesignTimeControls="http://MyCustomControls/design"
  

• Adicionando seu prefixo de tempo de design ao mc:Ignorable

  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d myDesignTimeControls"
  

Depois de executar todas essas etapas, você pode usar o prefixo myDesignTimeControls para criar seus controles de tempo de design.

<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>

Criando um namespace xmlns personalizado

Para criar um namespace xmlns personalizado no WPF .NET Core, você precisa mapear seu namespace XML personalizado para o namespace CLR em que seus controles estão. Você pode fazer isso adicionando o atributo de nível de assembly XmlnsDefinition no seu arquivo AssemblyInfo.cs. O arquivo é encontrado na hierarquia raiz do seu projeto.

[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]

Solução de problemas

Se tiver um problema que não esteja listado nesta secção, informe-nos utilizando a ferramenta Comunicar um problema.

O Designer XAML parou de funcionar

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

Ver também

• Dados de Design em Tempo Real com o Previewer do Xamarin.Forms
• XAML em aplicações WPF
• XAML em aplicações UWP
• XAML em aplicativos Xamarin.Forms
• XAML em aplicações .NET MAUI