Guia de início rápido: ler dados de um serviço (XAML)

Applies to Windows and Windows Phone

Usando o modelo de projeto de Hub, Grade ou Dividido no Visual Studio, você pode criar de forma mais eficiente um aplicativo que exiba dados de qualquer serviço, banco de dados ou outra fonte de dados. Esses modelos compartilham um modelo de dados que organiza as informações em itens e grupos e você pode facilmente adicionar mais funcionalidade ao seu aplicativo se organizar os dados conforme esse modelo.

Este tópico demonstra como criar um aplicativo de exemplo baseado no modelo de projeto de Hub. O aplicativo de exemplo mostra valores de propriedade em tempo real de um serviço que você pode assinar no Microsoft Azure Marketplace. Você também pode aplicar a maioria dos conceitos de dados deste tópico a projetos que sejam baseados no modelo de Grade ou Dividido e que tenham outros tipos de fontes de dados.

Para não haver confusão, este tópico mostra apenas o código ou a marcação que destaca pontos-chave, mas você pode consultar os exemplos completos na Galeria de Códigos do MSDN:

ExemploDescrição
O aplicativo Windows universal que consome dados do Azure MarketplaceUsa um modelo de projeto de aplicativo universal para direcionar para desktops e tablets Windows, assim como dispositivos Windows 8.1. Este exemplo apresenta a versão em C# dos trechos que são discutidos neste tópico.
Biblioteca de classes portátil que consome dados do Azure MarketplaceUsa uma biblioteca de classes portátil para direcionar para desktops e tablets Windows, assim como dispositivos Windows 8.1. Este exemplo apresenta a versão em Visual Basic dos trechos que são discutidos neste tópico.

 

Para ver como você pode usar a biblioteca do Cliente de Serviços de Dados do WCF (Windows Communication Foundation) para exibir dados no seu aplicativo, veja Exemplo de modelo de Hub que consome dados do Azure Marketplace (Windows 8.1). Nenhum código desse exemplo é exibido neste tópico.

Enquanto cria este aplicativo, você vai:

Definir seus dados

Primeiro, imagine que tipo de dados você quer mostrar e onde pode obtê-los. O exemplo usa dados do Microsoft Azure Marketplace. Depois que você encontrar uma fonte de dados, decida como você quer organizar esses dados.

Nesta seção, você vai aprender a:

Localizar dados

O exemplo usa dados dos serviços a seguir, que estão disponíveis no Microsoft Azure Marketplace:

ServiçoDescrição
PropertyDetailsAPIFornece dados sobre uma propriedade, como seu valor estimado, impostos e o número de quartos e banheiros que possui.
NeighborhoodDetailsAPIFornece dados estatísticos sobre a cidade em que a propriedade está localizada, como valores de mercado, comissões e porcentagens de lucro.
BingSearchAPIFornece resultados de pesquisas. O exemplo usa este serviço apenas para obter uma imagem da cidade em que a propriedade está localizada.

 

Para usar esses serviços, primeiro você precisa se inscrever para receber uma chave. Coloque essa chave no código que você escreve para retornar os resultados.

Organizar os dados em grupos e itens

O exemplo organiza as informações que ele obtém dos serviços nos seguintes grupos:

GrupoItens
Imóvel principalimóvel principal
Imóveis comparativos

imóvel comparativo nº 1

imóvel comparativo nº 2

imóvel comparativo nº 3

imóvel comparativo nº 4

imóvel comparativo nº 5

imóvel comparativo nº 6

 

O primeiro grupo é denominado Imóvel principal e contém apenas um item: o imóvel sobre o qual o usuário deseja mais informações. O grupo contém apenas um item por causa do design da página. As fontes de dados podem determinar como os dados são organizados, mas você pode organizar seus grupos e itens da forma que preferir.

Nos grupos de Imóveis comparativos, cada item (por exemplo, imóvel comparativo nº 1) contém vários campos, como Street, ZipCode, YearBuilt e ImagePath. Para obter a lista completa dos campos, veja o exemplo.

Mostrar os dados em suas páginas de acordo com seu design personalizado

Para exibir dados de exemplo em seu designer enquanto personaliza o layout das suas páginas, execute estas tarefas:

Adicionar campos às classes de dados de exemplo

O modelo de dados contém uma classe de grupo e uma classe de item e você pode adicionar seus campos a essas classes.

Para localizar as classes de grupo e de item, abra o Gerenciador de Soluções, depois expanda o nó Modelo de Dados do seu projeto. As classes de grupo e de item estão no arquivo SampleDataSource.cs ou SampleDataSource.vb.

O código a seguir mostra as classes de grupo e de item no exemplo.


public class SampleDataGroup
{
    public SampleDataGroup(String uniqueId, String title)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Items = new ObservableCollection<SampleDataItem>();
    }
}    

public class SampleDataItem
{
    public SampleDataItem(String uniqueId, String title, String imagePath, String street, String zipcode, String city,
        String state, String taxassessment, String yearbuilt, String lotsizesqft,
        String finishedsqft, String bathrooms, String bedrooms, String lastsolddate, String lastsoldprice,
        String zestimateamount, String zestimatevaluechange, String zestimatevaluechangeduration,
        String chartMedianCondoValue, String chartMedianHomeValue, String chartDollarsPSquareFt,
        String chartZillowHomeValueIndex, String chartHomeType, String chartOwnRent, 
        String chartHomeSize, String chartYearBuilt, string neighborhoodImage)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.ImagePath = imagePath;
        this.Street = street;
        this.ZipCode = zipcode;
        this.City = city;
        this.State = state;
        this.TaxAssessment = taxassessment;
        this.YearBuilt = yearbuilt;
        this.LotSizeSqFt = lotsizesqft;
        this.FinishedSqFt = finishedsqft;
        this.Bathrooms = bathrooms;
        this.Bedrooms = bedrooms;
        this.LastSoldDate = lastsolddate;
        this.LastSoldPrice = lastsoldprice;
        this.ZestimateAmount = zestimateamount;
        this.ZestimateValueChange = zestimatevaluechange;
        this.ZestimateValueChangeDuration = zestimatevaluechangeduration;
        this.ChartMedianCondoValue = chartMedianCondoValue;
        this.ChartMedianHomeValue = chartMedianHomeValue;
        this.ChartDollarsPSquareFt = chartDollarsPSquareFt;
        this.ChartZillowHomeValueIndex = chartZillowHomeValueIndex;
        this.ChartHomeType = chartHomeType;
        this.ChartOwnRent = chartOwnRent;
        this.ChartHomeSize = chartHomeSize;
        this.ChartYearBuilt = chartYearBuilt;          
        this.NeighborhoodImage = neighborhoodImage;
    }


Adicionar dados de exemplo

Ao personalizar o layout das suas páginas, adicione os dados que você quer que seu designer exiba. O modelo de projeto de Hub contém um arquivo que já possui dados de exemplo. O arquivo chama-se SampleData.json e pode ser encontrado no nó Modelo de Dados do seu projeto.

Para mostrar seus dados, modifique o SampleData.json. A seguir veremos dados de exemplo para apenas um grupo e um item desse grupo. O arquivo de dados de exemplo não aparece por inteiro.


{"Groups":[
  {
    "UniqueId": "houseItems",
    "Title": "Your Selected Home",
    "Items":
    [
      {
        "UniqueId": "houseOfInterest",
        "Title": "Your Selected Home",
        "ImagePath": "Assets/PhotoNotAvailable.jpg",
		 "Street" : "4567 Main St",
		 "ZipCode" : "98052",
		 "City" : "Buffalo",
		 "State" : "NY",
	     "TaxAssessment" : "288500.0",
	     "YearBuilt" : "2007",
		 "LotSizeSqFt" : "6969",
		 "FinishedSqFt" : "2530",
		 "Bathrooms" : "3.0",
		 "Bedrooms" : "3",
		 "LastSoldDate" : "10/11/2007",
	     "LastSoldPrice" : "444000",
		 "ZestimateAmount" : "$391,357",
		 "ZestimateValueChange" : "13977",
		 "ZestimateValueChangeDuration" : "30",
		 "ChartMedianCondoValue" : "http://www.zillow.com/app?chartType=affordability_avgCondoValue&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "ChartMedianHomeValue" : "http://www.zillow.com/app?chartType=affordability_avgHomeValue&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "ChartDollarsPSquareFt" : "http://www.zillow.com/app?chartType=affordability_pricePerSqft&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "ChartZillowHomeValueIndex" : "http://www.zillow.com/app?chartType=affordability_ZindexByDistribution&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "ChartHomeType" : "http://www.zillow.com/app?chartType=home_homeType&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "ChartOwnRent" : "http://www.zillow.com/app?chartType=home_ownVsRent&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "ChartHomeSize" : "http://www.zillow.com/app?chartType=home_homeSize&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "ChartYearBuilt" : "http://www.zillow.com/app?chartType=home_yearBuilt&graphType=barChart&regionId=17222&regionType=6&service=chart",
		 "NeighborhoodImage" : "http://www.hanifworld.com/Buffalo/15-Downtown%20Buffalo-New%20York.JPG"
      }
    ]
  },


Associar os controles na página aos dados de exemplo

Cada seção de Hub em seu arquivo HubPage.xaml contém uma referência ao seu arquivo de dados de exemplo. Por exemplo, a primeira seção de Hub do exemplo contém o seguinte conjunto de valores de atributo:


d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, 
Type=data:SampleDataSource}}"


A propriedade d:DataContext corresponde ao contexto de dados do tempo de design. Essa propriedade especifica os dados que vão aparecer em seu designer conforme você modificar as páginas. A propriedade contém três atributos.

AtributoFinalidade
TipoO nome do tipo em seu projeto que contém a propriedade à qual você vai fazer referência no atributo Binding. No exemplo, o nome do tipo é SampleDataSource. O nome do grupo é Groups. Observe o prefixo data: na frente do termo SampleDataSource. Esse prefixo é um namespace XML que é definido como a seguir na parte superior do arquivo XAML da página de hub: xmlns:data="using:ZillowHub.Data". O prefixo data: é apenas uma forma abreviada de fazer referência a esse namespace.
AssociaçãoA propriedade à qual você quer fazer a associação. Este exemplo faz a associação ao primeiro grupo na coleção Groups.
FonteUma referência ao arquivo de dados de exemplo.

 

Para mostrar os dados em sua página de Hub, associe a propriedade Text de qualquer campo a um campo correspondente em seu arquivo de dados de exemplo. Por exemplo, a propriedade Text do campo a seguir está associada ao campo City do primeiro item no grupo.


<TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="0" Grid.Column="0" 
    Margin="0,10,0,0" TextWrapping ="Wrap" Text="{Binding Items[0].City, Mode=OneWay}"  />


Lembre-se de que o grupo no contexto é o grupo ao qual você associou toda a seção de Hub no exemplo anterior.

Obter dados de um serviço

Até agora, você configurou o projeto para mostrar dados de exemplo em seu designer. Essa configuração ajuda você a criar suas páginas e atribui parte dos princípios fundamentais para as etapas seguintes. Porém, você quer que os usuários visualizem dados dinâmicos ao executarem seu aplicativo. Para permitir essa funcionalidade, siga estas etapas:

Consultar um serviço

Os serviços do Microsoft Azure Marketplace retornam informações como feeds OData. A maneira mais fácil do seu aplicativo consumir um feed OData é usar um objeto HttpWebRequest. O seguinte exemplo usa um objeto HTTPWebRequest para solicitar dados a partir de um serviço e, em seguida, obter um objeto de resposta que contenha uma resposta formatada em JSON.



        private async Task<dynamic> getDataFromService(string queryString) 
        { 
            try 
            { 
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(queryString); 
 
                request.Credentials = new NetworkCredential("<Your account key goes here>", 
                                    "<Your account key goes here>"); 
 
                var response = await request.GetResponseAsync().ConfigureAwait(false); 
                var stream = response.GetResponseStream(); 
 
                var streamReader = new StreamReader(stream); 
                string responseText = streamReader.ReadToEnd(); 
 
                dynamic data = JsonConvert.DeserializeObject(responseText); 
 
                return data; 
            } 
            catch (Exception) 
            { 
                return null; 
            } 
             
        } 


Preencher grupos e itens

Este exemplo executa as seguintes tarefas para organizar dados em grupos e itens:

  • Obtém dados do serviço.
  • Preenche um objeto de item usando dados a partir da resposta do serviço.
  • Adiciona o item a um grupo e, em seguida, retorna esse grupo ao chamador.


        public async Task<SampleDataGroup> GetHouse(string address, string cityStateZip) 
        { 
            // Get house. 
            string queryString =  
                "https://api.datamarket.azure.com/data.ashx/Zillow/PropertyDetailsAPIs/v1/GetDeepSearchResults?" + 
                "Address='" + address + "'&CityStateAndZipCode='" + cityStateZip + 
                "'&$format=json"; 
 
            dynamic results = await getDataFromService(queryString).ConfigureAwait(false); 
 
            if (results == null) 
            { 
                return null; 
            } 
 
            dynamic house = results["d"]["results"][0]; 
 
            SampleDataGroup myGroup = new SampleDataGroup("house", ""); 
 
            SampleDataItem item = new SampleDataItem((string)house["ZillowPropertyId"], 
                                                       "", "Assets/PhotoNotAvailable.jpg", 
                                                       (string)house["Street"], 
                                                       (string)house["ZipCode"], 
                                                       (string)house["City"], 
                                                       (string)house["State"], 
                                                       (string)house["TaxAssessment"], 
                                                       (string)house["YearBuilt"], 
                                                       (string)house["LotSizeSqFt"], 
                                                       (string)house["FinishedSqFt"], 
                                                       (string)house["Bathrooms"], 
                                                       (string)house["Bedrooms"], 
                                                       (string)house["LastSoldDate"], 
                                                       (string)house["LastSoldPrice"], 
                                                       (string)house["ZestimateAmount"], 
                                                       (string)house["ZestimateValueChange"], 
                                                       (string)house["ZestimateValueChangeDuration"], 
                                                       "", 
                                                       "", 
                                                       "", 
                                                       "", 
                                                       "", 
                                                       "", 
                                                       "", 
                                                       "", 
                                                       ""); 
       
 
            // get an image of the house. 
            queryString =  
                "https://api.datamarket.azure.com/data.ashx/Zillow/PropertyDetailsAPIs/v1/GetUpdatedPropertyDetails?" + 
                "ZillowPropertyID=" + house["ZillowPropertyId"] + "&$format=json";  
 
            results = await getDataFromService(queryString).ConfigureAwait(false); 
 
            if (results != null) 
            { 
                dynamic houseImage = results["d"]["results"][0]; 
                item.ImagePath = (string)houseImage["ImageUrl"]; 
            } 
            else 
            { 
                item.ImagePath = "Assets/PhotoNotAvailable.jpg"; 
            } 
             
            // get demographic data for the city. 
 
            queryString =  
                "https://api.datamarket.azure.com/data.ashx/Zillow/NeighborhoodDataAPIs/v1/GetDemographicsByCity?" + 
                "City='" + item.City + "'&State='" + item.State + "'&$format=json"; 
 
            results = await getDataFromService(queryString).ConfigureAwait(false); 
 
            if (results != null) 
            { 
                dynamic demographics = results["d"]["results"]; 
 
                item.ChartMedianCondoValue = (string)demographics[0]["ChartUrl"]; 
                item.ChartMedianHomeValue = (string)demographics[1]["ChartUrl"]; 
                item.ChartDollarsPSquareFt = (string)demographics[2]["ChartUrl"]; 
                item.ChartZillowHomeValueIndex = (string)demographics[3]["ChartUrl"]; 
                item.ChartHomeType = (string)demographics[4]["ChartUrl"]; 
                item.ChartOwnRent = (string)demographics[5]["ChartUrl"]; 
                item.ChartHomeSize = (string)demographics[6]["ChartUrl"]; 
                item.ChartYearBuilt = (string)demographics[7]["ChartUrl"]; 
            } 
            else 
            { 
                item.ChartMedianCondoValue = "None found"; 
                item.ChartMedianHomeValue = "None found"; 
                item.ChartDollarsPSquareFt = "None found"; 
                item.ChartZillowHomeValueIndex = "None found"; 
                item.ChartHomeType = "None found"; 
                item.ChartOwnRent = "None found"; 
                item.ChartHomeSize = "None found"; 
                item.ChartYearBuilt = "None found"; 
            } 
 
 
 
            // get image of the city. 
            queryString =  
                "https://api.datamarket.azure.com/Bing/Search/v1/Image?Query='" + 
                item.City + ", " + item.State + "'&$format=json"; 
 
            results = await getDataFromService(queryString).ConfigureAwait(false); 
 
            if (results != null) 
            { 
                dynamic images = results["d"]["results"][0]; 
                item.NeighborhoodImage = (string)images["MediaUrl"]; 
            } 
            else 
            { 
                item.NeighborhoodImage = "Assets/PhotoNotAvailable.jpg"; 
            } 
             
            myGroup.Items.Add(item); 
 
            return myGroup; 
 
        } 


Permitir que a página de hub consuma os grupos de dados

O arquivo SampleDataSource do seu projeto já contém um método chamado GetGroupsAsync que retorna grupos dos dados para a página de hub do seu projeto. O exemplo a seguir modifica o método GetGroupsAsync.


        public static async Task<IEnumerable<SampleDataGroup>> GetGroupsAsync(string address, string cityStateZip) 
        { 
            // if you are returning from an item details page, then there should already be groups in the collection. 
            if (address == "") 
            { 
                return _sampleDataSource.Groups; 
            } 
            _sampleDataSource.Groups.Clear(); 
 
            var houseGroup = await _sampleDataSource.GetHouse(address, cityStateZip).ConfigureAwait(false); 
             
            if (houseGroup != null) 
            { 
                _sampleDataSource.Groups.Add(houseGroup); 
            } 
            
            // If no house is found, then there is no need to look for comparable houses and demographics. 
            if (_sampleDataSource.Groups.Count != 0) 
            { 
                var comparableGroup = await _sampleDataSource.GetComparableHouses(_sampleDataSource.Groups[0].Items[0].UniqueId).ConfigureAwait(false); 
 
                if (comparableGroup != null) 
                { 
                    _sampleDataSource.Groups.Add(comparableGroup); 
                } 
            }            
            return _sampleDataSource.Groups; 
 
        } 


Consumir dados na página de Hub

Agora você está pronto para mostrar dados de grupos e itens em sua página de Hub associando grupos de dados ao modelo de exibição padrão dessa página. O modelo de exibição padrão é basicamente um par de nome/valor que é associado à página. Veja Modelo de navegação (em C#/VB/C++ e XAML). Você vai associar os controles da sua página a informações vinculadas ao seu modelo de exibição padrão. No aplicativo de exemplo, os usuários também podem pesquisar propriedades. Nesta seção, você vai aprender a:

Permitir que os usuários pesquisem uma propriedade

Você pode adicionar controles a uma barra de aplicativos para que os usuários possam pesquisar informações no aplicativo de exemplo. Para obter informações gerais sobre como criar e modificar barras de aplicativos, veja Adicionando barras de aplicativos. O exemplo a seguir adiciona duas caixas de texto e um botão à barra de aplicativos.

Observação  Este exemplo é de uma versão do Windows da página de hub. Veja os exemplos descritos no início deste tópico para visualizar uma versão do Windows Phone.



<Page.BottomAppBar >
    <AppBar x:Name="MyAppBar" IsOpen="true" IsSticky="True">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <TextBlock x:Name="ErrorText" FontSize="16" Foreground="#FFFD0404" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0" />
                <ProgressRing x:Name="Progress" FontSize="20" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Address: " VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="18" Margin="0,0,10,0" />
                    <TextBox x:Name="AddressTextBox" Grid.Row="1" Grid.Column="0"  VerticalAlignment="Center" Width="400" HorizontalAlignment="Right" FontSize="20" />
                    <TextBlock Grid.Row="0" Grid.Column="1" Text="City, State or Zip: " VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="18" Margin="10,0" />
                    <TextBox x:Name="CityStateZipTextBox" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Width="250" HorizontalAlignment="Left" FontSize="20" Margin="10,0,0,0" />
                    <Button Grid.Row="1" Grid.Column="2" FontSize="20" Content="Search" Margin="10,0,0,0" Click="Button_Click"/>
                </Grid>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Preencher o modelo de exibição padrão

O exemplo a seguir preenche o modelo de exibição padrão da página de Hub quando os usuários pesquisam uma propriedade. O código executa estas ações:

  • Informa o endereço e a cidade, estado ou CEP ao método GetGroupsAsync do seu modelo de dados e retorna uma coleção de grupos.
  • Associa o grupo que contém o imóvel a uma chave que é nomeada como "houseItems".
  • Associa o grupo que contém os imóveis comparativos a uma chave que é nomeada como "comparableHouseItems".

Este exemplo também armazena em cache os termos de pesquisa, gerencia os indicadores da interface do usuário e realiza outras tarefas.

Observação  Este exemplo é de uma versão do Windows da página de hub. Veja o exemplo descrito no início deste tópico para visualizar a versão do Windows Phone.



#region "Populate the view model by querying the data model"
private async void Button_Click(object sender, RoutedEventArgs e)
{

    if (AddressTextBox.Text == "")
    {
        ErrorText.Text = "Please enter an address";
    }
    else if (CityStateZipTextBox.Text == "")
    {
        ErrorText.Text = "Please enter city and state or a zip code";
    }
    else
    {
        Windows.Storage.ApplicationDataContainer roamingSettings =
            Windows.Storage.ApplicationData.Current.RoamingSettings;

        roamingSettings.Values["address"] = AddressTextBox.Text;
        roamingSettings.Values["cityStateZip"] = CityStateZipTextBox.Text;

        pageTitle.Text = "Searching ...";
        pageTitle.Foreground = new SolidColorBrush(Windows.UI.Colors.White);
        titleProgressRing.Foreground = new SolidColorBrush(Windows.UI.Colors.White);
        titleProgressRing.IsActive = true;

        var groups = await SampleDataSource.GetGroupsAsync(AddressTextBox.Text, CityStateZipTextBox.Text);

        if (groups.Count() > 0)
        {
            this.DefaultViewModel["houseItems"] = groups.ElementAt(0);
            this.DefaultViewModel["comparableHouseItems"] = groups.ElementAt(1);
            pageTitle.Text = "Real Estate Hub";
            pageTitle.Foreground = new SolidColorBrush(Windows.UI.Colors.White);
            titleProgressRing.IsActive = false;
        }
        else
        {
            ErrorText.Text = "Please search for a property";
        }

    }
}

#endregion

Preencher o modelo de exibição padrão sempre que a página for carregada

Quando um usuário escolhe um item na página de hub, aparece uma página de itens. Se você quiser que os dados apareçam na página de hub quando os usuários retornam nela, escreva o código que restaura o modelo de exibição padrão. Como os grupos e itens no seu modelo de dados mantêm o estado entre as exibições da página, você pode reutilizar os dados nos grupos e itens já preenchidos. Eles ainda estão na memória. O próximo exemplo restaura os valores do modelo de exibição padrão realizando essas ações:

  • Se o usuário estiver abrindo a página pela primeira vez, localiza os termos de pesquisa armazenados em cache.
  • Se o usuário estiver abrindo a página retornando de uma página de itens, chama o método GetGroupsAsync com termos de pesquisa em branco. Esse método retorna grupos e itens que já estão na memória.
  • Associa as chaves "houseItems" e "ComparableHouseItems" aos grupos apropriados.

Observação  Este exemplo é de uma versão do Windows da página de hub. Veja o exemplo descrito no início deste tópico para visualizar a versão do Windows Phone.



#region "Populate page controls every time the page loads"
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
    string address = "";
    string cityStateZip = "";
           
    // First time page is loaded. See if we've saved the results of a previous search.
    if (e.PageState == null)
    {
        Windows.Storage.ApplicationDataContainer roamingSettings =
            Windows.Storage.ApplicationData.Current.RoamingSettings;

        if (roamingSettings.Values.ContainsKey("address") &&
            roamingSettings.Values.ContainsKey("cityStateZip"))
        {
            address = roamingSettings.Values["address"].ToString();
            cityStateZip = roamingSettings.Values["cityStateZip"].ToString();
        }
        houseItemSection.Visibility = Visibility.Collapsed;
        comparableSection.Visibility = Visibility.Collapsed;
        demographicSection.Visibility = Visibility.Collapsed;
        pageTitle.Text = "Loading Page...";
        titleProgressRing.IsActive = true;
        titleProgressRing.Foreground = new SolidColorBrush(Windows.UI.Colors.White);
        ErrorText.Text = "";
        Progress.IsActive = false;
    }
    var groups = await SampleDataSource.GetGroupsAsync(address, cityStateZip);

    ErrorText.Text = "";
    Progress.IsActive = false;
    titleProgressRing.IsActive = false;
    pageTitle.Text = "Real Estate Hub";
    houseItemSection.Visibility = Visibility.Visible;
    comparableSection.Visibility = Visibility.Visible;
    demographicSection.Visibility = Visibility.Visible;

    if (groups.Count() > 0)
    {
        this.DefaultViewModel["houseItems"] = groups.ElementAt(0);
        this.DefaultViewModel["comparableHouseItems"] = groups.ElementAt(1);
    }
    else
    {
        ErrorText.Text = "Please search for a property";
    }

}
#endregion

Associar controles da página de Hub ao modelo de exibição

Para mostrar os dados na sua página de Hub, defina o contexto dos dados de cada seção para uma chave no seu modelo de exibição padrão. Por exemplo, se você quiser que uma seção de Hub mostre os dados do grupo que está associado à chave "houseItems", defina o atributo DataContext da sua seção de Hub como a seguir: DataContext="{Binding houseItems}. No exemplo, toda a declaração da seção aparece assim:


<HubSection x:Name="houseItemSection" Width="500" x:Uid="houseItems" 
Header="Featured House" IsHeaderInteractive="True" 
DataContext="{Binding houseItems}" d:DataContext="{Binding Groups[0], 
Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">

Você pode associar os controles da seção a campos no item apropriado de um grupo. Nesse caso, faça a associação a campos no primeiro item do grupo "houseItems" porque esse grupo contém apenas um item. Por exemplo, adicione o seguinte código XAML para mostrar o nome da cidade em que a propriedade está localizada: <TextBlock Text="{Binding Items[0].City >.

Tópicos relacionados

Acessando dados e arquivos
Como personalizar dados do modelo do Visual Studio (XAML)
Modelos de projetos C#, VB e C++
O aplicativo Windows universal que consome dados do Azure Marketplace
Biblioteca de classes portátil que consome dados do Azure Marketplace
Amostra de modelo Hub que consome dados do Azure Marketplace (Windows 8.1)
Criar aplicativos destinados ao Windows e Windows Phone usando o Visual Studio
Desenvolvimento entre Plataformas com a Bibliotecas de Classes Portátil
Compartilhando código entre plataformas

 

 

Mostrar:
© 2014 Microsoft