Windows Dev Center

Idioma: HTML | XAML

Guia de início rápido: adicionando pesquisa a um aplicativo (XAML)

A maioria dos usuários contará com a pesquisa para encontrar o que eles estão procurando. Por exemplo, se seu aplicativo reproduzir arquivos de mídia, os usuários vão esperar que possam procurar uma música ou um vídeo específico. Se o seu aplicativo for um aplicativo de receitas, os usuários vão esperar que possam procurar receitas ou ingredientes específicos.

Com um pouco de planejamento, não é muito difícil adicionar pesquisa ao seu aplicativo. Eis o que você precisa:

  • Uma fonte de dados para pesquisa. Você precisa de um tipo de catálogo ou inventário de itens que os usuários possam querer procurar. Quanto mais descritivo você puder tornar esse inventário, melhores serão os resultados da pesquisa.
  • Um controle para inserir consultas de pesquisa. O Windows fornece um controle SearchBox que o seu aplicativo pode usar. O SearchBox fornece uma área de entrada para inserir consultas, um botão de pesquisa para a execução da pesquisa e eventos para lidar com consultas de pesquisa. Ele fornece até mesmo algumas sugestões de pesquisa automaticamente.
  • Uma página de exibição dos resultados da pesquisa. O Microsoft Visual Studio fornece o modelo de Página de Resultados da Pesquisa que cria grande parte do código que você precisa para lidar com consultas de pesquisa e resultados de exibição.

Este guia de início rápido ensina como usar esses itens para adicionar a funcionalidade de pesquisa ao seu aplicativo.

Veja este recurso em ação como parte da nossa série Recursos para aplicativos, do início ao fim:  Interface do usuário de aplicativo da Windows Store, do início ao fim.

Pré-requisitos

Configurar seus dados

Quando o usuário insere uma consulta de pesquisa, seu aplicativo procura por itens que o usuário pode estar procurando. Os dados de pesquisas do aplicativo podem assumir várias formas: podem ser um arquivo XML, JSON (JavaScript Object Notation), um banco de dados, um serviço da Web ou arquivos no sistema de arquivos.

Os exemplos neste guia de início rápido usam os dados de exemplo fornecidos quando você cria um novo projeto no Microsoft Visual Studio.

Quando você usa Visual Studio para criar um novo aplicativo Grade, Hub ou Dividido, ele cria uma pasta chamada DataModel que contém um arquivo JSON que contém dados de amostra e um arquivo de código que fornece objetos para acessar os dados JSON.

Dados de exemplo em um novo projeto do aplicativo Hub

Os arquivos de código definem três classes:

  • SampleDataItem: Um item de dado individual.
  • SampleDataGroup: Um grupo de objetos SampleDataItem.
  • SampleDataSource: Uma coleção de objetos SampleDataGroup.

Os dados em si são definidos no arquivo JSON e estão organizados em grupos e itens. Aqui está um exemplo da aparência dos dados:


{"Groups":[
  {
    "UniqueId": "Group-1",
    "Title": "Group Title: 1",
    "Subtitle": "Group subtitle: 1",
    "ImagePath": "Assets/DarkGray.png",
    "Description" : "Group Description: Lorem ipsum dolor sit amet...",
    "Items":
    [
      {
        "UniqueId": "Group-1-Item-1",
        "Title": "Item Title: 1",
        "Subtitle": "Item Subtitle: 1",
        "ImagePath": "Assets/LightGray.png",
        "Description" : "Item Description: Pellentesque porta, mauris... neque tortor ac erat.",
        "Content" : "Curabitur class..."
      },
      {
        "UniqueId": "Group-1-Item-2",
        "Title": "Item Title: 2",
        "Subtitle": "Item Subtitle: 2",
        "ImagePath": "Assets/DarkGray.png",
        "Description" : "Item Description: Pellentesque porta, mauris... neque tortor ac erat.",
        "Content" : "Curabitur class..."
      },

(Para obter mais informações sobre o modelo de dados, veja Adicionando dados a um modelo do projeto).

É claro que você vai querer usar seus próprios dados na implementação de Pesquisa em seu aplicativo, mas a criação de uma versão inicial que use dados de exemplo pode ajudar a conhecer melhor a Pesquisa e lhe dar algumas ideias de como estruturar seus próprios dados para torná-los pesquisáveis.

Adicionar uma página de resultados da pesquisa

A página de resultados de pesquisa processa consultas de pesquisa e exibe o resultado. Vamos adicionar uma ao seu projeto.

Hh868180.wedge(pt-br,WIN.10).gifAdicionar o item Página de Resultados de Pesquisa

  1. No Solution Explorer, clique com o botão direito do mouse no nó do projeto para abrir o menu de atalho do projeto, e clique em Adicionar > Novo Item. A caixa de diálogo Adicionar Novo Item é aberta.
  2. No painel central da caixa de diálogo Adicionar Novo Item, clique em Página de Resultados de Pesquisa. Neste exemplo, mude o nome para SearchResultsPageExample.xaml.
  3. Clique no botão Adicionar. (Você pode receber uma notificação de que o Visual Studio precisa adicionar alguns arquivos; clique em Sim para adicioná-los automaticamente).

O Visual Studio cria o SearchResultsPageExample.xaml e um arquivo code-behind que o acompanha, o SearchResultsPageExample.xaml.cs.

Vamos dar uma olhada no arquivo SearchResultsPageExample.xaml. Veja aqui alguns dos itens mais importantes que ele contém:

  • O resultsViewSource, um recurso do CollectionViewSource cuja Source é vinculada à propriedade "Resultados" do DefaultViewModel. (O DefaultViewModel é definido em cada página. Para obter mais informações, consulte Adicionando dados a um modelo de projeto). Para exibir os resultados, definimos o DefaultViewModel["Results"] para uma lista que contém os resultados.
  • O filtersViewSource, um recurso doCollectionViewSource cuja Sourceé vinculada à propriedade "Filtros" do DefaultViewModel.
  • O filtersItemsControl, um ItemsControl que é vinculado ao filtersViewSource. Esse ItemsControl exibe os filtros de pesquisa.
  • O resultsGridView, um GridView que é vinculado ao resultsViewSource. Esse GridView exibe os resultados da pesquisa.
  • Um VisualStateManager com duas definições VisualState: uma para "ResultsFound" e uma para "NoResultsFound". Quando o estado visual for definido para "NoResultsFound", o VisualStateManager oculta o controle resultsGridView e exibe um texto que diz "Nenhum resultado corresponde à pesquisa".

O SearchResultsPageExample.xaml.cs contém dois métodos que vamos modificar: navigationHelper_LoadState e Filter_Checked.

Adicionar SearchBox

Ainda temos trabalho a fazer na página de resultados de pesquisa, mas, primeiro, vamos adicionar uma SearchBox ao seu aplicativo. Ter uma SearchBox vai facilitar o nosso teste da página de resultados de pesquisa à medida que o implementamos.

Uma SearchBox permite ao usuário inserir consultas. Ela também pode exibir sugestões.

Para adicionar uma SearchBoxao seu aplicativo, basta adicionar essa marcação a uma página XAML:


<SearchBox
    Height="35" Width="270"
    Margin="0, 25, 25, 0" />

(Você não precisa definir a Height, a Width, e a Margin a esses valores, mas essas configurações funcionam bem para a maioria dos aplicativos).

Onde você deve colocar sua caixa de pesquisa? Recomendamos colocar uma caixa de pesquisa em cada página do seu aplicativo para que os usuários possam pesquisar facilmente sempre que quiserem. Se o espaço for um problema, você pode colocar a caixa de pesquisa no topo de uma barra de aplicativos.

Normalmente, o melhor local para colocar a sua SearchBox é o canto superior direito da página. A maioria das páginas que você cria a partir de um modelo Visual Studio (como o modelo de Página Básica) tem uma Grid que contém o título da página e um botão de voltar:


<!-- Back button and page title -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Margin="39,59,39,0" 
                Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                VerticalAlignment="Top"
                AutomationProperties.Name="Back"
                AutomationProperties.AutomationId="BackButton"
                AutomationProperties.ItemType="Navigation Button"/>
    <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                IsHitTestVisible="false" TextWrapping="NoWrap" 
                VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>

Adicione uma terceira coluna à Grid, defina a sua Width como Auto, adicione a sua SearchBox e defina o seu Grid.Column como "2":


<!-- Back button and page title -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Margin="39,59,39,0" 
                Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                VerticalAlignment="Top"
                AutomationProperties.Name="Back"
                AutomationProperties.AutomationId="BackButton"
                AutomationProperties.ItemType="Navigation Button"/>
    <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                IsHitTestVisible="false" TextWrapping="NoWrap" 
                VerticalAlignment="Bottom" Margin="0,0,30,40"/>
    <SearchBox
        Grid.Column="2"
        Height="35" Width="270"  Margin="0,25,25,0" />
</Grid>

Uma página básica com uma SearchBox

Os exemplos deste guia de início rápido usam um modelo de aplicativo hub. Vamos acompanhar adicionando uma SearchBox a uma página de hub mais detalhadamente.

Hh868180.wedge(pt-br,WIN.10).gifAdicionar uma página de hub SearchBox

  1. Abra o arquivo XAML na sua página de hub e vá para a marcação que define o controle Hub (essa página é geralmente chamada HubPage.xaml).
  2. Defina o controle Hub HorizontalContentAlignment como Stretch.
    
    <Hub SectionHeaderClick="Hub_SectionHeaderClick" HorizontalContentAlignment="Stretch">
    
    
  3. No Header do controle de Hub:

    1. Adicione uma terceira coluna à Grid e defina sua Width como Auto.
    2. Adicione uma SearchBox.

    
    
                <Hub.Header>
                    <!-- Back button and page title -->
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Button  x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}"
                            Margin="-1,-1,39,0" 
                            VerticalAlignment="Top"
                            Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                            AutomationProperties.Name="Back"
                            AutomationProperties.AutomationId="BackButton"
                            AutomationProperties.ItemType="Navigation Button"/>
                        <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            VerticalAlignment="Top" IsHitTestVisible="false" TextWrapping="NoWrap" />
                        <SearchBox
                            x:Name="mySearchBox"
                            Grid.Column="2"
                            Height="35" Width="270"
                            PlaceholderText="Search" 
                            QuerySubmitted="SearchBox_QuerySubmitted"/>
                    </Grid>
                </Hub.Header>
    
    

Hh868180.wedge(pt-br,WIN.10).gifManipular o evento QuerySubmitted

  1. Abra o arquivo code-behind da página hub (HubPage.xaml.cs). Crie um manipulador de eventos QuerySubmitted para o seu SearchBox e nomeie-o como SearchBox_QuerySubmitted.
    
            private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
            {
    
            }
    
    
  2. Use o manipulador de eventos para navegar para a sua nova página de resultados de pesquisa.
    
            private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
            {
                 this.Frame.Navigate(typeof(SearchResultsPageExample), args.QueryText);
            }
    
    

Veja a aparência da página de hub:

Uma página de hub com uma SearchBox

Experimente. Digite uma consulta de teste na SearchBox e pressione Enter.

Uma consulta de teste

O manipulador de eventos QuerySubmittedque você criou navega para a página de resultados de pesquisa, passando a consulta que você digitou.

Resultados da consulta de teste

Ele não exibe nenhum resultado de busca, mas a nossa página de resultados de pesquisa está em execução. Nas próximas etapas, vamos atualizar a página para realmente pesquisar nossos dados em busca de correspondências. Mas antes de fazer isso, volte para a caixa de pesquisa e digite a sua consulta novamente. Antes de terminar de digitar a consulta uma segunda vez, ela deve aparecer como uma sugestão:

Uma consulta de teste

Um dos recursos eficientes do SearchBox é que ele usa automaticamente o seu histórico de pesquisa para fornecer sugestões. Você verá mais sobre como personalizar sugestões em uma etapa mais adiante.

Pesquisar seus dados

É hora de voltar à página de resultados de pesquisa. A página de resultados de pesquisa processa consultas de pesquisa e exibe os resultados. Nesta etapa, você escreve o código para processar consultas recebidas e prepara uma lista de resultados.

Hh868180.wedge(pt-br,WIN.10).gifImportar seus dados e definir os resultados da pesquisa

  1. Abra SearchResultsPageExample.xaml.cs, o arquivo code-behind para a página de resultados de pesquisa.
  2. Na parte superior da página, adicione uma referência às classes de dados. Como mencionamos anteriormente, os nossos exemplos usam os dados de exemplo que o Visual Studio criou para nós quando criamos um novo aplicativo. Essas classes pertencem ao namespace <ApplicationNamespace>.Data.
    
    
    // Change this to <YourApplicationNamespace>.Data
    using SearchBoxAndPageExample.Data;
    
    
    
  3. Em sua classe SearchResultsPageExample, crie uma propriedade para armazenar e exibir os resultados. Este exemplo usa um Dictionary para armazenar resultados.
    
    public Dictionary<String, IEnumerable<SampleDataItem>> AllResultsCollection { get; set; }
    
    
    

Quando seu aplicativo navega para sua página de resultados de pesquisa, ele chama o método navigationHelper_LoadState da página, um método que o Visual Studio criou para você. Agora, esse código não faz muito. Nas próximas etapas, você o substitui por seu próprio código para a busca dos dados.

Hh868180.wedge(pt-br,WIN.10).gifImplementar a lógica de pesquisa

  1. No arquivo SearchResultsPageExample.xaml.cs, vá para método navigationHelper_LoadState e exclua o código que ele contém.
  2. Torne o método navigationHelper_LoadState assíncrono adicionando a palavra-chave async.
    
            private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
    
    
  3. Quando seu aplicativo navega para a sua página de resultados de busca, ele passa a consulta de pesquisa como um parâmetro de navegação. Recupere o texto da consulta da propriedade NavigationParameter do parâmetro LoadStateEventArgs, e. (A classe LoadStateEventArgs é definida em NavigationHelper.cs, um dos arquivos de ajuda incluídos no seu projeto quando você cria uma rede, hub ou aplicativo dividido).
    
    
                var queryText = e.NavigationParameter as String;
    
    
  4. Inicialize a lista de resultados e crie uma variável para rastrear o número total de itens correspondentes.
    
    
                // Initialize the results list.
                AllResultsCollection = new Dictionary<string, IEnumerable<SampleDataItem>>();
    
                // Keep track of the number of matching items. 
                var totalMatchingItems = 0;
    
    
    
  5. Cada vez que encontrarmos um item correspondente, vamos adicionar o grupo do item correspondente a uma lista de filtros. O modelo Página de resultados da pesquisa cria uma classe Filter para você. Vamos criar uma List de objetos Filter. Quando encontrarmos artigos correspondentes, vamos adicionar os grupos dos itens à lista de filtros.
    
    
                var filterList = new List<Filter>();
    
    
    
  6. Em seguida, vamos buscar os nossos dados e armazenar os resultados. Primeiro, pegue todos os grupos que contêm os dados.
    
                          
                var groups = await SampleDataSource.GetGroupsAsync();
    
    
    

  7. Agora, crie um loop foreach para fazer a iteração de grupo para que você possa verificar seus itens em busca de correspondências.

    
    
                foreach (var group in groups)
                {
    
    
    
  8. Dentro do loop foreach:

    1. Cada grupo na nossa classe de dados, SampleDataGroup, contém uma propriedade Items que retorna um ObservableCollection de objetos SampleDataItem. Você pode usar o métodoWhere para procurar essa coleção em busca de correspondências.

      Esse exemplo executa uma pesquisa sem diferenciar maiúsculas de minúsculas para os itens cujo título contém a consulta e armazena a coleção retornada de itens correspondentes em uma variável chamada matchingItems. Esse exemplo verifica apenas o título de cada item, mas pode também verificar dados adicionais, como a legenda ou a descrição.

      
      
      
                      var matchingItems = group.Items.Where(
                          item => 
                              item.Title.IndexOf(
                                  queryText, StringComparison.CurrentCultureIgnoreCase) > -1); 
      
      
      
      

      Esse exemplo utiliza o método IndexOf(String, StringComparison) para executar a comparação de cadeia de caracteres. Usamos essa sobrecarga para podermos especificar uma busca que reconheça cultura e diferencie maiúsculas de minúsculas. Fazer a pesquisa reconhecer cultura e diferenciar maiúsculas de minúsculas vai ajudar o seu código a funcionar melhor com mais idiomas.

      Dica  

      Esse exemplo verifica apenas um campo de nossos dados em busca de correspondências de consulta, o campo de título. Um aplicativo real pode pesquisar vários campos, como uma legenda ou descrição, em busca de correspondências.

      Dica  

      Uma maneira de melhorar a experiência do usuário é controlar a relevância das solicitações de pesquisa e classificar os resultados por relevância. Por exemplo, você pode atribuir a cada item correspondente um determinado número de pontos, dependendo da qualidade da correspondência: 5 pontos para uma correspondência no campo de título, 2 pontos para uma correspondência no campo de legendas e 1 ponto para uma correspondência no campo de descrição. Antes de apresentar os resultados, classifique-os para que os itens com mais pontos apareçam em primeiro lugar.

    2. Descobrir quantas correspondências existem. Se encontrarmos correspondências, adicione os itens correspondentes à lista de resultados e adicione o grupo à lista de filtros.

      
      
      
                      int numberOfMatchingItems = matchingItems.Count();
                      totalMatchingItems += numberOfMatchingItems;
                      if (numberOfMatchingItems > 0)
                      {
                          AllResultsCollection.Add(group.Title, matchingItems);
                          filterList.Add(new Filter(group.Title, numberOfMatchingItems));
                      }
                  }
      
      
  9. A capacidade de filtrar por grupo é boa, mas os usuários podem querer ver todos os resultados da pesquisa ao mesmo tempo. Adicione uma entrada para "Tudo" no início da lista de filtros.
    
    
                // Create an entry for "All" for viewing all search results. 
                filterList.Insert(0, new Filter("All", totalMatchingItems, true));
    
    
    
  10. A página de resultados da amostra tem uma propriedade DefaultViewModel que está vinculada ao padrão DataContext da página. O DefaultViewModel é um tipo de dicionário que você pode usar para armazenar objetos que afetam a interface do usuário da página. Use essa propriedade para exibir filtros e a consulta original: defina o DefaultViewModel do objeto "QueryText" como o texto original de consulta, defina os "Filtros" como sua "filterList" e defina "ShowFilters" como true.
    
    
                // Communicate results through the view model
                this.DefaultViewModel["QueryText"] = '\u201c' + queryText + '\u201d';
                this.DefaultViewModel["Filters"] = filterList;
                this.DefaultViewModel["ShowFilters"] = true;
            }
    
    

    Este é o código completo do método:

    
    
            private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
                var queryText = e.NavigationParameter as String;
    
                // Initialize the results list.
                AllResultsCollection = new Dictionary<string, IEnumerable<SampleDataItem>>();
    
                // Keep track of the number of matching items. 
                var totalMatchingItems = 0;
    
                var filterList = new List<Filter>();
    
                var groups = await SampleDataSource.GetGroupsAsync();
                foreach (var group in groups)
                {
                    var matchingItems = group.Items.Where(
                        item => 
                            item.Title.IndexOf(
                                queryText, StringComparison.CurrentCultureIgnoreCase) > -1); 
                    int numberOfMatchingItems = matchingItems.Count();
                    totalMatchingItems += numberOfMatchingItems; 
                    if (numberOfMatchingItems > 0)
                    {
                        AllResultsCollection.Add(group.Title, matchingItems);
                        filterList.Add(new Filter(group.Title, numberOfMatchingItems));
                    }
                }
    
                // Create an entry for "All" for viewing all search results. 
                filterList.Insert(0, new Filter("All", totalMatchingItems, true));
    
                // Communicate results through the view model
                this.DefaultViewModel["QueryText"] = '\"' + queryText + '\"';
                this.DefaultViewModel["Filters"] = filterList;
                this.DefaultViewModel["ShowFilters"] = true;
    
            }
    
    

Execute o aplicativo e procure por "Item". O aplicativo exibe o número de resultados encontrados para cada grupo mas, na verdade, não exibe nenhum resultado de pesquisa:

Resultados de pesquisa

Exibir resultados de pesquisa

O método navigationHelper_LoadState´procura por itens e armazena os resultados e filtros correspondentes, mas é o manipulador de eventos Filter_Checked que realmente exibe os resultados. Quando o usuário seleciona um filtro, esse método exibe os resultados que correspondem a esse filtro.

Hh868180.wedge(pt-br,WIN.10).gifAtualize o método Filter_Checked

  1. Em seu arquivo code-behind para a página de resultados de pesquisa, vá para o método Filter_Checked e exclua o código gerado pelo modelo que ele contém.
    
            void Filter_Checked(object sender, RoutedEventArgs e)
            {
    
            }
    
    
  2. A lista de filtros é um conjunto de botões de opção. Descubra qual filtro foi selecionado recuperando o DataContext do botão de opção que disparou o evento.

    
    
            void Filter_Checked(object sender, RoutedEventArgs e)
            {
                var filter = (sender as FrameworkElement).DataContext as Filter;
    
    
    
  3. O arquivo SearchResultsPageExample.xaml contém um CollectionViewSource chamado filtersViewSource. Essa fonte de dados está vinculada à nossa lista de filtros. Quando o usuário seleciona um botão de opção, use o método MoveCurrentTo para selecionar o filtro atual.

    
    
                // Mirror the change into the CollectionViewSource.
                if (filtersViewSource.View != null)
                {
                    filtersViewSource.View.MoveCurrentTo(filter);
                }
    
    
    
  4. Verifique se o filtro não é nulo e, em seguida, defina a sua propriedade Active como true. Nosso arquivo XAML vincula o estado IsChecked do botão de opção à propriedade Active do filtro, de modo que a atualização dessa propriedade garante que o botão de opção apareça marcado.

    
    
                // Determine which filter was selected
                if (filter != null)
                {
                    // Mirror the results into the corresponding Filter object to allow the
                    // RadioButton representation used when not snapped to reflect the change
                    filter.Active = true;
    
    
    
  5. Usamos o filtro para determinar quais itens na coleção de resultados exibir. Se o filtro "todos" tiver sido selecionado, exibirá todos os itens.

    
    
                    if (filter.Name.Equals("All"))
                    {
                        var tempResults = new List<SampleDataItem>();
    
                        // Add the items from each group to the temporary results
                        // list. 
                        foreach (var group in AllResultsCollection)
                        {
                            tempResults.AddRange(group.Value);
                       
                        }
                        // Display the items.
                        this.DefaultViewModel["Results"] = tempResults;
                    }
    
    
    
  6. Caso contrário, vamos exibir os itens que pertencem ao filtro selecionado.
    
    
                    else if (AllResultsCollection.ContainsKey(filter.Name))
                    {
                        this.DefaultViewModel["Results"] =
                          new List<SampleDataItem>(AllResultsCollection[filter.Name]);
                    }
    
    
    
  7. Verifique se realmente temos resultados para exibir. Se tivermos, altere o estado da página para o estado "ResultsFound". Caso contrário, mudaremos o estado da página para "NoResultsFound".
    
                    // Ensure results are found
                    object results;
                    ICollection resultsCollection;
                    if (this.DefaultViewModel.TryGetValue("Results", out results) &&
                        (resultsCollection = results as ICollection) != null &&
                        resultsCollection.Count != 0)
                    {
                        VisualStateManager.GoToState(this, "ResultsFound", true);
                        return;
                    }
                }
    
                // Display informational text when there are no search results.
                VisualStateManager.GoToState(this, "NoResultsFound", true);
            }
    
    

Este é o código completo do método Filter_Checked.


        void Filter_Checked(object sender, RoutedEventArgs e)
        {
            // Retrieve the data context of the sender (the selected radio button).
            // This gives us the selected Filter object. 
            var filter = (sender as FrameworkElement).DataContext as Filter;

            // Mirror the change into the CollectionViewSource.
            // This is most likely not needed.
            if (filtersViewSource.View != null)
            {
                filtersViewSource.View.MoveCurrentTo(filter);
            }

            // Determine which filter was selected
            if (filter != null)
            {
                // Mirror the results into the corresponding Filter object to allow the
                // RadioButton representation used when not snapped to reflect the change
                filter.Active = true;

                // TODO: Respond to the change in active filter by setting this.DefaultViewModel["Results"]
                //       to a collection of items with bindable Image, Title, Subtitle, and Description properties

                if (filter.Name.Equals("All"))
                {
                    var tempResults = new List<SampleDataItem>();

                    // Add the items from each group to the temporary results
                    // list. 
                    foreach (var group in AllResultsCollection)
                    {
                        tempResults.AddRange(group.Value);

                    }

                    // Display the items.
                    this.DefaultViewModel["Results"] = tempResults;
                }
                else if (AllResultsCollection.ContainsKey(filter.Name))
                {
                    this.DefaultViewModel["Results"] =
                      new List<SampleDataItem>(AllResultsCollection[filter.Name]);
                }

                // Ensure results are found
                object results;
                ICollection resultsCollection;
                if (this.DefaultViewModel.TryGetValue("Results", out results) &&
                    (resultsCollection = results as ICollection) != null &&
                    resultsCollection.Count != 0)
                {
                    VisualStateManager.GoToState(this, "ResultsFound", true);
                    return;
                }
            }

            // Display informational text when there are no search results.
            VisualStateManager.GoToState(this, "NoResultsFound", true);
        }

Execute o aplicativo e procure por "Item-1" (se você estiver usando seus próprios dados, procure algo que você sabe que vai retornar correspondências).

Resultados da pesquisa

(Opcional) Atualizar o modelo de item de controle GridView

O SearchResultsPageExample.xaml usa uma GridView para exibir resultados de pesquisa. O código gerado pelo modelo para o GridView do controle ItemTemplatefoi projetado para funcionar com a fonte de dados de exemplo que o Visual Studio cria para você, e espera os seguintes campos em cada item de dados:"Imagem", "Título", "Legenda" e "Descrição".

Se os itens de dados tiverem diferentes campos, será necessário modificar o ItemTemplate. Para obter instruções sobre como modificar o ItemTemplate, consulte Guia de início rápido: adicionando controles ListView e GridView.

(Opcional) Adicionar sugestões de pesquisa

As sugestões de pesquisa são exibidas na caixa de pesquisa no painel de pesquisa. As sugestões são importantes porque elas poupam o tempo dos usuários e dão dicas valiosas sobre os tipos de coisas que os usuários podem pesquisar em seu aplicativo.

Você obtém sugestões de várias fontes:

  • Você mesmo pode defini-las. Por exemplo, crie uma lista de fabricantes automobilísticas.
  • Você pode acessá-las do Windows quando o seu aplicativo pesquisa arquivos locais.
  • Você pode acessá-las de um serviço ou servidor Web.

Para ver diretrizes de experiência do usuário para exibir sugestões, veja Diretrizes e lista de verificação para pesquisa.

Você pode usar o LocalContentSuggestionSettings para adicionar sugestões baseadas em arquivos locais do Windows, usando apenas algumas linhas de código. Alternativamente, você pode se registrar para o evento SuggestionsRequested do controle de caixa de pesquisa e criar sua própria lista de sugestões que é composta por sugestões que você obteve de outra fonte (como uma lista definida localmente ou um serviço da Web). Este guia de início rápido mostra como lidar com o evento SuggestionsRequested.

Para ver exemplos de código que mostram como adicionar sugestões de pesquisa, baixe o Exemplo de controle SearchBox. O exemplo demonstra como adicionar sugestões de pesquisa, usando todas as três fontes possíveis, e como adicionar sugestões para idiomas do leste asiático, usando formas alternativas do texto da consulta gerado por um IME (Editor de Método de Entrada). (Recomendamos usar textos de consulta alternativos se o seu aplicativo for usado por usuários japoneses ou chineses).

Hh868180.wedge(pt-br,WIN.10).gifManipular o evento SuggestionsRequested

  1. É provável que seu aplicativo tenha vários controles SearchBox; vamos definir um único manipulador de eventos estático em seu arquivo SearchResultsPageExample.xaml.cs que todos possam usar. Adicione este código após o método Filter_Checked.
    
            public async static void SearchBox_SuggestionsRequested(
                SearchBox sender, 
                SearchBoxSuggestionsRequestedEventArgs args)
            {
    
    
  2. Se você desejar responder ao evento SuggestionsRequested assincronamente (e nós fazemos isso), deverá obter um objeto SearchSuggestionsRequestDeferral antes de editar a lista de sugestões.
    
                // This object lets us edit the SearchSuggestionCollection asynchronously. 
                var deferral = args.Request.GetDeferral();
    
    
  3. O sistema fornece automaticamente algumas sugestões de pesquisa, como as pesquisas anteriores que o usuário realizou. Vamos adicionar nossas sugestões de pesquisa a qualquer coisa que o sistema fornecer.

    
                try { 
    
                    // Retrieve the system-supplied suggestions.
                    var suggestions = args.Request.SearchSuggestionCollection;
    
    
  4. Itere por cada item em seus dados e verifique se há correspondências. Quando encontramos uma correspondência, anexe o título do item correspondente à coleta de sugestões de pesquisa.

    
                    var groups = await SampleDataSource.GetGroupsAsync();
                    foreach (var group in groups)
                    {
                        var matchingItems = group.Items.Where(
                            item => item.Title.StartsWith(
                                args.QueryText, StringComparison.CurrentCultureIgnoreCase));
    
                        foreach (var item in matchingItems)
                        {
                            suggestions.AppendQuerySuggestion(item.Title);
                        }
                    }
            
    
    
  5. A propriedade SearchBoxSuggestionsRequestEventArgs.LinguisticDetails.QueryTextAlternatives fornece sugestões adicionais para os usuários que digitam texto em um IME. Usar essas sugestões melhora a experiência de pesquisa para os usuários dos idiomas do leste asiático. Vamos verificar as alternativas de texto de consulta para cadeias de caracteres que contêm a consulta original e adicioná-las à nossa lista de sugestões de pesquisa.

    
                    foreach (string alternative in args.LinguisticDetails.QueryTextAlternatives)
                    {
                        if (alternative.StartsWith(
                            args.QueryText, StringComparison.CurrentCultureIgnoreCase))
                        {
                            suggestions.AppendQuerySuggestion(alternative); 
                        }
                    }
                }
    
    
  6. Finalmente, use o SearchSuggestionsRequestDeferral para permitir que o sistema saiba que terminamos de editar a lista de sugestões.

    
                finally {
                    deferral.Complete();
                }
    
            }
    
    

    Só precisamos desse código para o nosso manipulador de eventos procurar sugestões. Aqui está o método completo SearchBox_SuggestionsRequested:

    
            public async static void SearchBox_SuggestionsRequested(
                SearchBox sender, 
                SearchBoxSuggestionsRequestedEventArgs args)
            {
    
                // This object lets us edit the SearchSuggestionCollection asynchronously. 
                var deferral = args.Request.GetDeferral();
    
                try { 
    
                    // Retrieve the system-supplied suggestions.
                    var suggestions = args.Request.SearchSuggestionCollection;
               
                    var groups = await SampleDataSource.GetGroupsAsync();
                    foreach (var group in groups)
                    {
                        var matchingItems = group.Items.Where(
                            item => item.Title.StartsWith(
                                args.QueryText, StringComparison.CurrentCultureIgnoreCase));
    
                        foreach (var item in matchingItems)
                        {
                            suggestions.AppendQuerySuggestion(item.Title);
                        }
                    }
                
                    foreach (string alternative in args.LinguisticDetails.QueryTextAlternatives)
                    {
                        if (alternative.StartsWith(
                            args.QueryText, StringComparison.CurrentCultureIgnoreCase))
                        {
                            suggestions.AppendQuerySuggestion(alternative); 
                        }
                    }
                }
                finally {
                    deferral.Complete();
                }
    
            }
    
    
  7. Agora vamos registrar o evento com a nossa SearchBox.

    Como esse manipulador de eventos é estático, não podemos definir o manipulador de eventos em XAML. Em vez disso, abra o arquivo code-behind para a página que contém a sua SearchBox e use o construtor da página para se registrar no evento.

    
            public HubPage()
            {
                this.InitializeComponent();
                this.navigationHelper = new NavigationHelper(this);
                this.navigationHelper.LoadState += navigationHelper_LoadState;
    
                // Register for the SuggestsRequested event.
                mySearchBox.SuggestionsRequested += SearchResultsPageExample.SearchBox_SuggestionsRequested;
        
            }
    
    

Implementando o contrato de Pesquisa (para versões anteriores do Windows)

Antes do Windows 8.1, os aplicativos usavam o botão Pesquisar para fornecer pesquisa dentro deles. Os desenvolvedores implementavam o contrato de Pesquisa e usavam a API SearchPane para lidar com consultas e obter sugestões e resultados.

Embora continuemos oferecendo suporte total ao contrato de Pesquisa do Windows 8 e à API SearchPane, a partir do Windows 8.1, recomendamos o uso do controleSearchBox em vez do SearchPane. Aplicativos que usam a SearchBox não precisam implementar o contrato de Pesquisa.

Um aplicativo deve usar o SearchPane e o contrato de Pesquisa? Se você não espera que os usuários pesquisem seu aplicativo com frequência, use o SearchPane e o contrato de Pesquisa. Recomendamos que você use um botão com o glifo Pesquisa (Segoe UI Símbolo 0xE0094 em 15pt) no seu aplicativo em que os usuários possam clicar para ativar o painel de pesquisa. Para ver o código que implementa o SearchPane e o contrato de Pesquisa, veja a Amostra do contrato de Pesquisa.

Resumo e próximas etapas

Você usou o controle SearchBox e a Página de Resultados da Pesquisa para adicionar pesquisa ao seu aplicativo.

Para orientações para ajudar você a projetar e criar uma boa experiência de pesquisa para seus usuários, veja Diretrizes e lista de verificação para pesquisa.

Tópicos relacionados

Exemplo de controle SearchBox
Diretrizes e lista de verificação para pesquisa

 

 

Mostrar:
© 2015 Microsoft