Dados de exemplo na superfície de design e para a criação de protótipoSample data on the design surface, and for prototyping

Observação  Até que ponto você precisa de dados de amostra e que quantidade pode ser útil, depende de as suas associações usarem a extensão de marcação {Binding} ou a extensão de marcação {x:Bind}.Note  The degree to which you need sample data—and how much it will help you—depends on whether your bindings use the {Binding} markup extension or the {x:Bind} markup extension. As técnicas descritas neste tópico se baseiam no uso de um DataContext e, portanto, apenas são apropriadas para {Binding} .The techniques described in this topic are based on the use of a DataContext, so they're only appropriate for {Binding}. Porém, se você estiver usando {x:Bind} , suas associações mostrarão pelo menos valores de espaço reservado na superfície de design (até mesmo para controles de itens) e, portanto, a necessidade de usar dados de amostra não é tão grande.But if you're using {x:Bind} then your bindings at least show placeholder values on the design surface (even for items controls), so you don't have quite the same need for sample data.

Pode ser impossível ou indesejado (talvez por motivos de privacidade ou desempenho) que seu aplicativo exiba dados dinâmicos na superfície de design no Microsoft Visual Studio ou no Blend for Visual Studio.It may be impossible or undesirable (perhaps for reasons of privacy or performance) for your app to display live data on the design surface in Microsoft Visual Studio or Blend for Visual Studio. Para que seus controles sejam populados com dados (e você possa trabalhar no layout, nos modelos e em outras propriedades visuais do seu aplicativo), há várias maneiras de usar dados de amostra de tempo de design.In order to have your controls populated with data (so that you can work on your app's layout, templates, and other visual properties), there are various ways in which you can use design-time sample data. Os dados de exemplo também podem ser muito úteis e economizar tempo se você estiver criando um aplicativo de esboço (ou protótipo).Sample data can also be really useful and time-saving if you're building a sketch (or prototype) app. Você pode usar dados de exemplo em seu esboço ou protótipo em tempo de execução para ilustrar suas ideias sem a necessidade de conexão com dados reais e dinâmicos.You can use sample data in your sketch or prototype at run-time to illustrate your ideas without going as far as connecting to real, live data.

Aplicativos de amostra que demonstram {Binding}Sample apps that demonstrate {Binding}

Observação

As capturas de tela deste artigo foram tiradas de uma versão anterior do Visual Studio.Screenshots in this article were taken from a previous version of Visual Studio. Elas poderão não corresponder exatamente à sua experiência de desenvolvimento se você estiver usando o Visual Studio 2019.They might not precisely match your development experience if you are using Visual Studio 2019.

Definindo DataContext na marcaçãoSetting DataContext in markup

Uma prática bastante comum entre os desenvolvedores é usar um código imperativo (no code-behind) para definir uma página ou o DataContext de um controle de usuário para visualizar uma instância de modelo.It's a fairly common developer practice to use imperative code (in code-behind) to set a page or user control's DataContext to a view model instance.

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

Porém, se você fizer isso, sua página não será tão "projetável" quanto poderia ser.But if you do that then your page isn't as "designable" as it could be. O motivo disso é que, quando a sua página XAML é aberta no Visual Studio ou no Blend for Visual Studio, o código imperativo que atribui o valor de DataContext nunca é executado (na verdade, nenhuma parte do seu code-behind é executada).The reason is that when your XAML page is opened in Visual Studio or Blend for Visual Studio, the imperative code that assigns the DataContext value is never run (in fact, none of your code-behind is executed). As ferramentas XAML analisam sua marcação e instanciam os objetos declarados nela, mas não instanciam o tipo da página em si.The XAML tools do of course parse your markup and instantiate any objects declared in it, but they don't actually instantiate your page's type itself. O resultado é que você não verá os dados em seus controles ou na caixa de diálogo Criar Associação de Dados, e será um desafio maior criar o estilo e o layout de sua página.The result is that you won't see any data in your controls or in the Create Data Binding dialog, and your page will be more challenging to style and to lay out.

Interface de usuário com design escasso.

A primeira solução que pode ser tentada é assinalar como comentário essa atribuição de DataContext e, em vez disso, definir o DataContext na marcação da sua página.The first remedy to try is to comment out that DataContext assignment and set the DataContext in your page markup instead. Dessa maneira, seus dados dinâmicos aparecerão em tempo de design e também em tempo de execução.That way, your live data shows up at design-time as well as at run-time. Para isso, primeiro abra sua página XAML.To do this, first open your XAML page. Em seguida, na janela Estrutura de Tópicos do Documento, clique no elemento raiz designável (em geral, com o rótulo [Page] ) para selecioná-lo.Then, in the Document Outline window, click the root designable element (usually with the label [Page]) to select it. Na janela Propriedades, localize a propriedade DataContext (dentro da categoria Comum) e modifique-a.In the Properties window, find the DataContext property (inside the Common category), and modify it. Selecione o tipo de modelo de exibição na caixa de diálogo Selecionar Objeto e depois em OK.Select your view model type from the Select Object dialog box, and then click OK.

Interface do usuário para definir DataContext.

Consulte a aparência da marcação resultante.Here's what the resulting markup looks like.

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

Consulte também a aparência da superfície de design agora que suas associações podem ser resolvidas.And here’s what the design surface looks like now that your bindings can resolve. Perceba que o seletor de Caminho na caixa de diálogo Criar Associação de Dados está agora preenchido, com base no tipo de DataContext e nas propriedades com as quais é possível criar uma associação.Notice that the Path picker in the Create Data Binding dialog is now populated, based on the DataContext type and the properties that you can bind to.

Interface do usuário projetável.

A caixa de diálogo Criar Associação de Dados precisa somente de um tipo para trabalhar, mas as associações precisam das propriedades para ser inicializadas com valores.The Create Data Binding dialog only needs a type to work from, but the bindings need the properties to be initialized with values. Se você não quiser acessar seu serviço de nuvem em tempo de design (devido ao desempenho, pagamento pela transferência de dados, problemas de privacidade etc.), o código de inicialização pode verificar se seu aplicativo é executado em uma ferramenta de design (como o Visual Studio ou o Blend for Visual Studio) e, nesse caso, carregar dados de exemplo para uso somente em tempo de design.If you don't want to reach out to your cloud service at design-time (due to performance, paying for data transfer, privacy issues, that kind of thing) then your initialization code can check to see whether your app is running in a design tool (such as Visual Studio or Blend for Visual Studio) and in that case load sample data for use at design-time only.

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

Você pode usar um localizador de modelo de exibição se for necessário passar parâmetros para o código de inicialização.You could use a view model locator if you need to pass parameters to your initialization code. Um localizador de modelo de exibição é uma classe que você pode colocar nos recursos do aplicativo.A view model locator is a class that you can put into app resources. Ela tem uma propriedade que expõe o modelo de exibição, e o DataContext se associa a essa propriedade.It has a property that exposes the view model, and your page's DataContext binds to that property. Outro padrão que o localizador ou o modelo de exibição pode usar é a injeção de dependências, que pode construir um provedor de dados em tempo de design ou de execução (cada um deles implementa uma interface comum), conforme aplicável.Another pattern that the locator or the view model can use is dependency injection, which can construct a design-time or a run-time data provider (each of which implements a common interface), as applicable.

"Dados de exemplo da classe" e atributos de tempo de design"Sample data from class", and design-time attributes

Se, por qualquer motivo, nenhuma das opções na seção anterior funcionar para você, ainda há diversas opções de dados de tempo de design disponíveis por meio de recursos de ferramentas XAML e atributos de tempo de design.If for whatever reason none of the options in the previous section work for you then you still have plenty of design-time data options available via XAML tools features and design-time attributes. Uma boa opção é o recurso Criar Dados de Exemplo da Classe no Blend for Visual Studio.One good option is the Create Sample Data from Class feature in Blend for Visual Studio. Você pode encontrar esse comando em um dos botões na parte superior do painel Dados.You can find that command on one of the buttons at the top of the Data panel.

Basta especificar uma classe para o comando usar.All you need to do is to specify a class for the command to use. O comando executa duas ações importantes para você.The command then does two important things for you. Primeiramente, ele gera um arquivo XAML que contém dados de exemplo adequados para recuperar uma instância da classe escolhida e todos os seus membros, recursivamente (na verdade, as ferramentas funcionam igualmente bem com arquivos XAML ou JSON).First, it generates a XAML file that contains sample data suitable for hydrating an instance of your chosen class and all of its members, recursively (in fact, the tooling works equally well with XAML or JSON files). Em segundo lugar, ele preenche o painel Dados com o esquema da sua classe escolhida.Second, it populates the Data panel with the schema of your chosen class. Em seguida, você pode arrastar membros do painel Dados até a superfície de design para realizar várias tarefas.You can then drag members from the Data panel onto the design surface to perform various tasks. Dependendo do conteúdo que você arrasta e de onde esse conteúdo é solto, é possível adicionar associações a controles existentes (usando {Binding} ) ou criar novos controles e associá-los ao mesmo tempo.Depending on what you drag and where you drop it, you can add bindings to existing controls (using {Binding}), or create new controls and bind them at the same time. Seja qual for o caso, a operação também define um contexto de dados em tempo de design (d:DataContext) para você (se ainda não houver um definido) na raiz de layout da sua página.In either case, the operation also sets a design-time data context (d:DataContext) for you (if one is not already set) on the layout root of your page. Esse contexto de dados em tempo de design usa o atributo d:DesignData para obter seus dados de amostra do arquivo XAML que foi gerado (que, a propósito, você tem a opção de encontrar no seu projeto e editar de forma que ele contenha os dados de amostra desejados).That design-time data context uses the d:DesignData attribute to get its sample data from the XAML file that was generated (which, by the way, you are free to find in your project and edit so that it contains the sample data you want).

<Page ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
        <ListView ItemsSource="{Binding Recordings}" ... />
        ...
    </Grid>
</Page>

As várias declarações xmlns significam que atributos com o prefixo d: são interpretados apenas em tempo de design e são ignorados em tempo de execução.The various xmlns declarations mean that attributes with the d: prefix are interpreted only at design-time and are ignored at run-time. Portanto, o atributo d:DataContext afeta somente o valor da propriedade DataContext em tempo de design, não tendo qualquer efeito em tempo de execução.So the d:DataContext attribute only affects the value of the DataContext property at design-time; it has no effect at run-time. Se quiser, você pode até mesmo definir tanto d:DataContext quanto DataContext na marcação.You can even set both d:DataContext and DataContext in markup if you like. d:DataContext será substituído em tempo de design, enquanto a propriedade DataContext será substituída em tempo de execução.d:DataContext will override at design-time, and DataContext will override at run-time. Essas mesmas regras de substituição se aplicam a todos os atributos em tempo de design e em tempo de execução.These same override rules apply to all design-time and run-time attributes.

O atributo d:DataContext e todos os outros atributos em tempo de design estão documentados no tópico sobre atributos em tempo de design, que ainda é válido para aplicativos UWP (Plataforma Universal do Windows).The d:DataContext attribute, and all other design-time attributes, are documented in the Design-Time Attributes topic, which is still valid for Universal Windows Platform (UWP) apps.

CollectionViewSource não tem uma propriedade DataContext, mas tem uma propriedade Source.CollectionViewSource doesn't have a DataContext property, but it does have a Source property. Consequentemente, há uma propriedade d:Source que você pode usar para definir dados de amostra somente em tempo de design em um CollectionViewSource.Consequently, there's a d:Source property that you can use to set design-time-only sample data on a CollectionViewSource.

    <Page.Resources>
        <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
            d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
    </Page.Resources>

    ...

        <ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
    ...

Para que isso funcione, é necessária uma classe denominada Recordings : ObservableCollection<Recording>, e você pode editar o arquivo XAML dos dados de amostra para que ele contenha apenas um objeto Recordings (com objetos Recording dentro dele), conforme mostrado aqui.For this to work, you would have a class named Recordings : ObservableCollection<Recording>, and you would edit the sample data XAML file so that it contains only a Recordings object (with Recording objects inside that), as shown here.

<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
    <Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
        OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
        OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
        OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>

Se você usar um arquivo de dados de amostra JSON em vez da XAML, deverá definir a propriedade Type.If you use a JSON sample data file instead of XAML, you must set the Type property.

    d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"

Até agora, usamos d:DesignData para carregar dados de amostra em tempo de design de um arquivo XAML ou JSON.So far, we've been using d:DesignData to load design-time sample data from a XAML or JSON file. Uma alternativa é a extensão de marcação d:DesignInstance, que indica que a origem em tempo de design baseia-se na classe especificada pela propriedade Type.An alternative to that is the d:DesignInstance markup extension, which indicates that the design-time source is based on the class specified by the Type property. Aqui está um exemplo.Here's an example.

    <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
        d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>

A propriedade IsDesignTimeCreatable indica que a ferramenta de design deve, na verdade, criar uma instância da classe, o que sugere que a classe tem um construtor público padrão e que é populada com dados (reais ou de exemplo).The IsDesignTimeCreatable property indicates that the design tool should actually create an instance of the class, which implies that the class has a public default constructor, and that it populates itself with data (either real or sample). Se você não definir IsDesignTimeCreatable (ou se definir como False), os dados de exemplo não serão exibidos na superfície de design.If you don't set IsDesignTimeCreatable (or if you set it to False) then you won't get sample data displayed on the design surface. Nesse caso, a ferramenta de design analisa a classe para suas propriedades associáveis e exibe-as no painel Dados e na caixa de diálogo Criar Associação de Dados.All the design tool does in that case is to parse the class for its bindable properties and display these in the Data panel and in the Create Data Binding dialog.

Dados de exemplo para criação de protótipoSample data for prototyping

Para a criação de protótipo, você quer dados de exemplo em tempo de design e em tempo de execução.For prototyping, you want sample data at both design-time and at run-time. Para esse caso de uso, o Blend for Visual Studio tem o recurso Novos Dados de Exemplo.For that use case, Blend for Visual Studio has the New Sample Data feature. Você pode encontrar esse comando em um dos botões na parte superior do painel Dados.You can find that command on one of the buttons at the top of the Data panel.

Em vez de especificar uma classe, você pode projetar o esquema da fonte de dados de exemplo diretamente no painel Dados .Instead of specifying a class, you can actually design the schema of your sample data source right in the Data panel. Você também pode editar valores de dados de exemplo no painel Dados: não é necessário abrir e editar um arquivo (embora você ainda possa fazer isso se preferir).You can also edit sample data values in the Data panel: there's no need to open and edit a file (although, you can still do that if you prefer).

O recurso Novos Dados de Exemplo usa DataContext e não d:DataContext, para que os dados de exemplo estejam disponíveis quando você executar seu esboço ou protótipo e durante a criação.The New Sample Data feature uses DataContext, and not d:DataContext, so that the sample data is available when you run your sketch or prototype as well as while you're designing it. E o painel Dados realmente acelera as tarefas de design e associação.And the Data panel really speeds up your designing and binding tasks. Por exemplo, basta arrastar uma propriedade de coleção do painel Dados para a superfície de design para gerar um controle de itens de ligação de dados e os modelos necessários, tudo pronto para compilação e execução.For example, simply dragging a collection property from the Data panel onto the design surface generates a data-bound items control and the necessary templates, all ready to build and run.

Dados de exemplo para criação de protótipo.