Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
Observação
O grau em que você precisa de dados de exemplo — e o quanto isso o ajudará — depende se suas ligações usam a extensão de marcação {Binding} ou a extensão de marcação {x:Bind} . As técnicas descritas neste tópico são baseadas no uso de um DataContext, portanto, elas são apropriadas apenas para {Binding}. Mas se estiveres a usar {x:Bind}, as tuas ligações pelo menos mostram valores de espaço reservado na superfície de design (mesmo para controlos de itens), pelo que não terás a mesma necessidade de dados de exemplo.
Pode ser impossível ou indesejável (talvez por motivos de privacidade ou desempenho) para seu aplicativo exibir dados dinâmicos na superfície de design no Microsoft Visual Studio ou no Blend for Visual Studio. Para ter seus controles preenchidos com dados (para que você possa trabalhar no layout, modelos e outras propriedades visuais do seu aplicativo), há várias maneiras de usar dados de exemplo em tempo de design. 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). Você pode usar dados de exemplo em seu esboço ou protótipo em tempo de execução para ilustrar suas ideias sem chegar ao ponto de se conectar a dados reais e dinâmicos.
Aplicações de exemplo que demonstram {Binding}
- Descarregue a app Bookstore1.
- Descarregue a app Bookstore2.
Observação
As capturas de tela neste artigo foram tiradas de uma versão anterior do Visual Studio. Eles podem não corresponder com precisão à sua experiência de desenvolvimento se você estiver usando o Visual Studio 2019.
Definir o DataContext no código de marcação
É uma prática de desenvolvedor bastante comum usar código imperativo (em code-behind) para definir DataContext de uma página ou controle de usuário para uma instância de modelo de exibição.
public MainPage()
{
InitializeComponent();
this.DataContext = new BookstoreViewModel();
}
Mas se fizeres isso, a tua página não será tão "fácil de personalizar" quanto poderia ser. O motivo é que, quando sua página XAML é aberta no Visual Studio ou no Blend for Visual Studio, o código imperativo que atribui o valor DataContext nunca é executado (na verdade, nenhum dos code-behind é executado). É claro que as ferramentas XAML analisam sua marcação e instanciam quaisquer objetos declarados nela, mas na verdade não instanciam o tipo da página em si. O resultado é que você não verá nenhum dado em seus controles ou na caixa de diálogo Criar vinculação de dados
A primeira solução a tentar é comentar a atribuição do DataContext, e definir o DataContext na sua marcação de página. Dessa forma, os seus dados em tempo real aparecem tanto durante o tempo de conceção como no tempo de execução. Para fazer isso, primeiro abra sua página XAML. Em seguida, na janela Esquema do Documento, clique no elemento raiz designável (geralmente com o rótulo [Página]) para selecioná-lo. Na janela Properties, localize a propriedade DataContext (dentro da categoria Common) e modifique-a. Selecione o tipo de modelo de visualização na caixa de diálogo Selecionar Objeto e clique em OK.
Veja como é a marcação resultante.
<Page ... >
<Page.DataContext>
<local:BookstoreViewModel/>
</Page.DataContext>
E aqui está o aspecto da superfície de design agora que as suas ligações podem ser resolvidas. Observe que o seletor do Caminho na caixa de diálogo Criar Vinculação de Dados agora está preenchido, com base no tipo DataContext e nas propriedades às quais pode associar-se.
A caixa de diálogo Criar Vinculação de Dados só precisa de um tipo para funcionar, mas as ligações precisam que as propriedades sejam inicializadas com valores. Se você não quiser entrar em contato com seu serviço de nuvem em tempo de design (devido ao desempenho, pagamento pela transferência de dados, problemas de privacidade, esse tipo de coisa), seu código de inicialização poderá verificar se seu aplicativo está sendo executado em uma ferramenta de design (como Visual Studio ou Blend for Visual Studio) e, nesse caso, carregar dados de exemplo para uso somente em tempo de design.
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 precisar passar parâmetros para o código de inicialização. Um localizador de modelo de exibição é uma classe que você pode colocar nos recursos do aplicativo. Ele tem uma propriedade que expõe o modelo de exibição e o DataContext da sua página se liga a essa propriedade. Outro padrão que o localizador ou o modelo de exibição pode usar é a injeção de dependência, que pode construir um provedor de dados em tempo de desenvolvimento ou em tempo de execução (cada um dos quais implementa uma interface comum), conforme aplicável.
"Dados de amostra da classe" e atributos de tempo de desenvolvimento
Se, por qualquer motivo, nenhuma das opções na seção anterior funcionar para você, você ainda terá muitas opções de dados em tempo de design disponíveis por meio de ferramentas, recursos e atributos de tempo de design XAML. Uma boa opção é o recurso Criar dados de exemplo da classe no Blend for Visual Studio. Você pode encontrar esse comando em um dos botões na parte superior do painel Data.
Tudo o que você precisa fazer é especificar uma classe para o comando usar. O comando então faz duas coisas importantes para você. Primeiro, ele gera um arquivo XAML que contém dados de exemplo adequados para hidratar uma instância da classe escolhida e todos os seus membros, recursivamente (na verdade, as ferramentas funcionam igualmente bem com arquivos XAML ou JSON). Em segundo lugar, ele preenche o painel Data com o esquema da classe escolhida. Em seguida, você pode arrastar membros do painel Data para a superfície de design para executar várias tarefas. Dependendo do que você arrastar e onde soltá-lo, você pode adicionar associações aos controles existentes (usando {Binding}), ou criar novos controles e vinculá-los ao mesmo tempo. Em ambos os casos, a operação também define um contexto de dados durante o design (d:DataContext) para si (se ainda não estiver definido) na raiz de layout da sua página. Esse contexto de dados em tempo de design usa o atributo d:DesignData para obter seus dados de exemplo do arquivo XAML que foi gerado (que, a propósito, você é livre para encontrar em seu projeto e editar para que ele contenha os dados de exemplo desejados).
<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 os atributos com o prefixo d: são interpretados somente em tempo de design e ignorados em tempo de execução. Portanto, o atributo
O atributo d:DataContext, assim como todos os outros atributos em tempo de design, estão documentados no tópico Design-Time Attributes, o qual ainda é válido para aplicações da Plataforma Universal do Windows (UWP).
CollectionViewSource não tem uma propriedade DataContext, mas tem uma propriedade Source. Consequentemente, há uma propriedade d:Source que pode ser usada para definir dados de exemplo destinados apenas ao tempo de design num 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 isto funcione, teria uma classe chamada
<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 exemplo JSON em vez de XAML, deverá definir a propriedade Type.
d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"
Até agora, temos usado d:DesignData para carregar dados de exemplo para a fase de design a partir de um ficheiro XAML ou JSON. Uma alternativa a isso é a extensão de marcação
<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 efetivamente criar uma instância da classe, o que implica que a classe possui um construtor padrão público e que se preenche automaticamente com dados (sejam eles reais ou de amostra). Se não definir o IsDesignTimeCreatable (ou se o definir como Falso), não obterá os dados de exemplo exibidos na área de design. Tudo o que a ferramenta de design faz nesse caso é analisar a classe para suas propriedades vinculáveis e exibi-las no painel Data e na caixa de diálogo Create Data Binding.
Dados de exemplo para prototipagem
Para prototipagem, você deseja dados de exemplo em tempo de design e em tempo de execução. Para esse caso de uso, o Blend for Visual Studio tem o recurso New Sample Data. Você pode encontrar esse comando em um dos botões na parte superior do painel Data.
Em vez de especificar uma classe, você pode realmente projetar o esquema de sua fonte de dados de exemplo diretamente no painel Data. Você também pode editar valores de dados de exemplo no painel Data: não há necessidade de abrir e editar um arquivo (embora, você ainda possa fazer isso se preferir).
O recurso New Sample Data 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, bem como durante a sua criação. E o painel Data realmente acelera suas tarefas de design e vinculação. Por exemplo, simplesmente arrastar uma propriedade de coleção do painel Data para a superfície de design gera um controle de itens ligados a dados e os modelos necessários, todos prontos para serem criados e executados.
