Como personalizar dados do modelo do Visual Studio (XAML)

Applies to Windows and Windows Phone

Os dados já aparecem nas páginas de um projeto Hub, Grade, Dividido e Pivot. Isso ocorre porque esses modelos contêm arquivos, código e marcas XAML que tornam isso possível. É bem mais fácil modificar esses arquivos para mostrar seus dados do que iniciar com uma página em branco e adicionar tudo desde o princípio.

Para obter um exemplo mais detalhado, consulte Início rápido: ler dados de um serviço.

Itens e grupos

Os projetos Hub, Grade, Dividido e Pivot organizam dados em grupos de itens. O arquivo SampleDataSource no projeto contém estes grupos de itens. Ele faz isso definindo três classes:

  • SampleDataGroup
  • SampleDataItem
  • SampleDataSource

The SampleDataSource cria instâncias de grupos e itens e preenche-os usando dados do arquivo SampleData.json do projeto.

Se os seus dados forem muito semelhantes com a estrutura das classes SampleDataItem e SampleDataGroup, você poderá atualizar o código na função GetSampleDataAsync para recuperar os dados. Se você decidir adicionar novas propriedades de dados, terá de atualizar os construtores SampleDataItem e SampleDataGroup.

Se estiver conectando a dados dinâmicos possivelmente indisponíveis no tempo de design (ou que talvez não sejam carregados com a rapidez necessária), você poderá alterar a fonte de DesignData para fornecer dados de exemplo alternativos. Dessa maneira, você poderá ver os dados na área de design do XAML Designer. Veja aqui um exemplo de GroupDetailPage.xaml no modelo Aplicativo de Grade. Ele também usa os dados de exemplo padrão definidos em SampleData.json, no tempo de design.


<CollectionViewSource
    x:Name="itemsViewSource"
    Source="{Binding Items}"
    d:Source="{Binding Groups[0].Items, Source={d:DesignData Source=/DataModel/SampleData.json}}"/>


Se não mexer NA fonte de DesignData, nem em algumas outras referências de DesignData no arquivo XAML, os valores de tempo de design serão extraídos de SampleData.json.

Como dados de grupo e de item estão associados à interface do usuário

Nos modelos, os dados são geralmente associados à interface do usuário por meio do Default DataContext. O DataContext é associado ao DefaultViewModel que, por sua vez, é definido em cada página.

Na página, os dados são carregados no evento LoadState, com uma chamada para SampleDataSource. Depois de recuperados, os dados são atribuídos ao DefaultViewModel, como ilustrado no exemplo a seguir.


var sampleDataGroups = await SampleDataSource.GetGroupsAsync((String)e.NavigationParameter);
this.DefaultViewModel["Groups"] = sampleDataGroups;

Os modelos de dados, que são definidos em páginas XAML, geralmente são usados para formatar e exibir várias instâncias de dados. Cada modelo de dados é associado às propriedades que são explicitamente definidas em xaml, como mostra este exemplo:


<DataTemplate>
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
             <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                 Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
             <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
                 Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>>

É importante entender que os modelos de projeto esperam que determinadas propriedades estejam presentes nos dados, e essas propriedades são explicitamente nomeadas no XAML. No código XAML anterior de GroupedItemsPage, você pode encontrar propriedades como título, subtítulo e caminho de imagem. Se os dados de aplicativo personalizados não usarem esses nomes específicos de propriedades, você precisará executar um dos procedimentos a seguir:

  • Mapeie seus dados para os nomes dessas propriedades (geralmente em SampleDataSource).
  • Corrija todas as referências de código XAML estabelecidas para essas propriedades no código do modelo, de modo que correspondam aos nomes das propriedades usadas nos seus dados.

Um exemplo de como incorporar seus dados no projeto

Primeiro, atualize o arquivo SampleDataSource para que os grupos e itens definam campos a partir de seus dados. Em seguida, vincule esses dados aos campos em suas páginas. Esta seção usa uma solicitação para gerar dados RSS.

JJ655409.wedge(pt-br,WIN.10).gifAtualizar SampleDataSource

  1. No menu Visual Studio, clique em Arquivo > Novo Projeto.
  2. No painel esquerdo da caixa de diálogo Novo Projeto, expanda o nó Visual C#, Visual Basic ou Visual C++.
  3. No painel central, clique em Aplicativo Hub, Aplicativo de Grade ou Aplicativo Dividido.
  4. Na caixa Nome, digite ExemploModeloPesquisa e clique em OK.

    A solução é criada e os arquivos de projeto aparecem no Gerenciador de Soluções. Para saber mais sobre os arquivos de projeto, veja Modelos de projeto C#, VB e C++.

    Importante  Quando você executa o Visual Studio pela primeira vez, ele pede para você obter uma licença de desenvolvedor. Para saber mais, veja Obter uma licença de desenvolvedor.

  5. Na pasta DataModel, abra SampleDataSource.
  6. No SampleDataItem, adicione propriedades para data de publicação, autor e link, e atualize o construtor. Aqui está o novo código construtor para SampleDataItem:
    
    public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath,
         String description, String content, String pubDate, String author, String uriLink)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Subtitle = subtitle;
        this.Description = description;
        this.ImagePath = imagePath;
        this.Content = content;
        // Added
        this.PubDate = pubDate;
        this.Author = author;
        this.Link = uriLink;
    }
    
    
    
  7. Adicione essas declarações para as novas propriedades a SampleDataItem:
    
        // Added
        public string PubDate { get; private set; }
        public string Author { get; private set; }
        public string Link { get; private set; }
    
    
  8. No SampleDataGroup, adicione uma nova propriedade para data da publicação e atualize o construtor: Aqui está o novo código construtor para SampleDataGroup:
    
    public SampleDataGroup(String uniqueId, String title, String subtitle, String imagePath,
        String description, String pubDate)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Subtitle = subtitle;
        this.Description = description;
        this.ImagePath = imagePath;
        // Added
        this.PubDate = pubDate;
    
        this.Items = new ObservableCollection<SampleDataItem>();
    
    }
    
    
  9. Adicione uma declaração para a nova propriedade a SampleDataGroup:
    
        public string PubDate { get; private set; }
    
    
  10. No SampleDataSource, remova a função GetSampleDataAsync e todo o código que ele contém. Substitua essa função pela função a seguir, também denominada GetSampleDataAsync:
    
    private async Task GetSampleDataAsync()
    {
        if (this._allGroups.Count != 0)
            return;
    
        await GetFeedsAsync();
    
    }
    
    

    Dica  Se puder recuperar os dados no formato JSON, você poderá reutilizar mais do código de exemplo no GetSampleDataAsync.

  11. No SampleDataSource, adicione a seguinte função:
    
    
    public async Task GetFeedsAsync()
    {
        Task<SampleDataGroup> feed1 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/developers/atom.aspx");
        Task<SampleDataGroup> feed2 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowsexperience/atom.aspx");
        Task<SampleDataGroup> feed3 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/extremewindows/atom.aspx");
        Task<SampleDataGroup> feed4 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/business/atom.aspx");
        Task<SampleDataGroup> feed5 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/bloggingwindows/atom.aspx");
        Task<SampleDataGroup> feed6 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowssecurity/atom.aspx");
        Task<SampleDataGroup> feed7 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/springboard/atom.aspx");
        Task<SampleDataGroup> feed8 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowshomeserver/atom.aspx");
        // There is no Atom feed for this blog, so we use the RSS feed.
        Task<SampleDataGroup> feed9 =
            GetFeedAsync("http://windowsteamblog.com/windows_live/b/windowslive/rss.aspx");
        Task<SampleDataGroup> feed10 =
            GetFeedAsync("http://windowsteamblog.com/windows_live/b/developer/atom.aspx");
        Task<SampleDataGroup> feed11 =
            GetFeedAsync("http://windowsteamblog.com/ie/b/ie/atom.aspx");
        Task<SampleDataGroup> feed12 =
            GetFeedAsync("http://windowsteamblog.com/windows_phone/b/wpdev/atom.aspx");
        Task<SampleDataGroup> feed13 =
            GetFeedAsync("http://windowsteamblog.com/windows_phone/b/wmdev/atom.aspx");
    
        this._allGroups.Add(await feed1);
        this._allGroups.Add(await feed2);
        this._allGroups.Add(await feed3);
        this._allGroups.Add(await feed4);
        this._allGroups.Add(await feed5);
        this._allGroups.Add(await feed6);
        this._allGroups.Add(await feed7);
        this._allGroups.Add(await feed8);
        this._allGroups.Add(await feed9);
        this._allGroups.Add(await feed10);
        this._allGroups.Add(await feed11);
        this._allGroups.Add(await feed12);
        this._allGroups.Add(await feed13);
    }
    
    
  12. Adicione o seguinte usando declaração para a parte superior:
    
    using Windows.Web.Syndication;
    
    
    
  13. Adicione o seguinte método ao SampleDataSource:
    
    private async Task<SampleDataGroup> GetFeedAsync(string feedUriString)
    {
        // using Windows.Web.Syndication;
        SyndicationClient client = new SyndicationClient();
        Uri feedUri = new Uri(feedUriString);
    
        try
        {
            SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri);
    
            string description = "tbd";
            // Use the date of the latest post as the last updated date.
            string date = feed.Items[0].PublishedDate.DateTime.ToString();
    
    
            if (feed.Subtitle != null && feed.Subtitle.Text != null)
            {
                description = feed.Subtitle.Text;
            }
    
            // This code is executed after RetrieveFeedAsync returns the SyndicationFeed.
            // Process it and copy the data we want into our FeedData and FeedItem classes.
            SampleDataGroup feedData = new SampleDataGroup(feed.Id, feed.Title.Text, 
                feed.Subtitle.Text, null, description, date);
    
            foreach (SyndicationItem item in feed.Items)
            {
                string content = "tbd";
                string uriLink = "tbd";
                string author = item.Authors[0].Name.ToString();
                string datePub = item.PublishedDate.DateTime.ToString();
    
                // Handle the differences between RSS and Atom feeds.
                if (feed.SourceFormat == SyndicationFormat.Atom10)
                {
                    content = item.Content.Text;
                    uriLink = new Uri("http://windowsteamblog.com" + item.Id).ToString();
                }
                else if (feed.SourceFormat == SyndicationFormat.Rss20)
                {
                    content = item.Summary.Text;
                    uriLink = item.Links[0].Uri.ToString();
                }
    
                SampleDataItem feedItem = new SampleDataItem(item.Id, item.Title.Text, "tbd",
                    null, null, content, datePub, author, uriLink);
               
                feedData.Items.Add(feedItem);
            }
    
            return feedData;
        }
        catch (Exception)
        {
           return null;
        }
    }
    
    
    
  14. Clique em Compilar > Compilar solução ou pressione F7 para garantir que a solução seja compilada sem erros.

Estas etapas supõem que você criou um projeto usando o modelo de projeto Grade.

JJ655409.wedge(pt-br,WIN.10).gifUm exemplo de como vincular dados às suas páginas

  1. Para usar o código de exemplo no modelo de projeto Aplicativo de Grade, abra GroupedItemsPage.xaml.
  2. No GroupedItemsPage.xaml, abra o menu de atalho para o Designer XAML GridView, depois selecione Editar Modelos Adicionais, Editar Itens Gerados (ItemTemplate), Editar Atual.

    O DataTemplate de GridView é selecionado no Editor XAML.

  3. Substitua a vinculação para a propriedade Subtitle por uma vinculação à propriedade PubDate.

    O controle TextBox que contém essa vinculação deve ser parecido com este exemplo:

    
    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
        Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
    
    
  4. Abra GroupDetailPage.xaml.
  5. Abra o menu de atalho para o Designer XAML GridView, depois selecione Editar Modelos Adicionais, Editar Itens Gerados (ItemTemplate), Editar Atual.

    O DataTemplate de GridView é selecionado no Editor XAML.

  6. No DataTemplate, localize StackPanel e altere Subtitle para Author.

    O controle TextBox que contém essa vinculação deve ser parecido com este exemplo:

    
    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}"
        TextWrapping="NoWrap"/>
    
    
  7. No painel esquerdo do Designer XAML, selecione GroupSubtitle: 1.

    O TextBlock correspondente é selecionado no Editor XAML.

  8. Substitua a vinculação para a propriedade Subtitle por uma vinculação à propriedade PubDate de grupo.

    O controle TextBox que contém essa vinculação deve ser parecido com este exemplo:

    
    <TextBlock Text="{Binding PubDate}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}"
        MaxHeight="60"/>
    
    
  9. Salve o projeto e selecione a tecla F5 para depurar o aplicativo.

    O título da página aparece imediatamente, mas os dados de feed podem levar alguns segundos para serem recuperados. Quando todas as promessas estiverem cumpridas, você verá cada blog na home page. Escolha um dos cabeçalhos do grupo para ver a página de detalhes do grupo.

 

 

Mostrar:
© 2015 Microsoft