사용자가 Windows 스토어 앱에서 정보를 검색하도록 허용(C#/VB/C++ 및 XAML)

사용자가 앱에서 정보를 검색하도록 허용하려면 프로젝트에 검색 결과 페이지 항목을 추가합니다. 그런 다음 앱의 아무 페이지에나 SearchBox 컨트롤을 추가합니다. 사용자는 이러한 컨트롤을 사용하여 앱에서 정보를 검색할 수 있습니다. 사용자가 앱에서 정보를 검색하도록 허용하려면 다음 단계를 수행합니다.

JJ655408.wedge(ko-kr,WIN.10).gif검색 결과 페이지 항목 추가

  1. Visual Studio 메뉴에서 파일 > 새 프로젝트를 클릭합니다.
  2. 새 프로젝트 대화 상자에서 Visual C#, Visual Basic 또는 Visual C++ 노드를 클릭합니다.
  3. 가운데 창에서 그리드 형태 앱을 클릭합니다.
  4. 이름 상자에 SearchPageExample을 입력하고 확인 단추를 클릭합니다.

    솔루션이 만들어지고 솔루션 탐색기에 프로젝트 파일이 나타납니다. 프로젝트 파일에 대한 설명은 Windows 스토어 앱용 C#, VB 및 C++ 프로젝트 템플릿을 참조하세요.

    중요  Visual Studio를 처음 실행하면 개발자 라이선스를 다운로드하라는 메시지가 표시됩니다. 자세한 내용은 개발자 라이선스 가져오기를 참조하세요.

  5. 솔루션 탐색기에서 프로젝트 노드의 바로 가기 메뉴를 열고 추가 > 새 항목을 클릭합니다.
  6. 새 항목 추가 대화 상자의 가운데 창에서 검색 결과 페이지를 클릭합니다. 이 예제에서는 이름 상자에 표시되는 기본 이름인 SearchResultsPage1.xaml을 그대로 유지합니다.
  7. 추가 단추를 클릭합니다.

    새 파일의 코드가 표시됩니다.

JJ655408.wedge(ko-kr,WIN.10).gif검색 결과 페이지 항목에서 코드 수정

  1. SearchResultsPage1 코드 파일에서 샘플 데이터 클래스를 참조할 파일의 맨 위에 다음 문을 추가합니다.
    
    using SearchResultsExample.Data;
    
    
    
  2. 다음 속성을 추가합니다.
    
    public Dictionary<String, IEnumerable<SampleDataItem>> Results { get; set; }
    
    
    
  3. 첫 번째 TODO 주석을 바꾸어 업데이트합니다.
    
    // TODO: Application-specific searching logic.  The search process is responsible for
    //       creating a list of user-selectable result categories:
    //
    //       filterList.Add(new Filter("<filter name>", <result count>));
    //
    //       Only the first filter, typically "All", should pass true as a third argument in
    //       order to start in an active state.  Results for the active filter are provided
    //       in Filter_SelectionChanged below.
    var filterList = new List<Filter>();
    filterList.Add(new Filter("All", 0, true));
    
    
    

    바꿀 주석:

    
    var filterList = new List<Filter>();
    var totalMatchingItems = 0;
    Results = new Dictionary<string, IEnumerable<SampleDataItem>>();
    var groups = await SampleDataSource.GetGroupsAsync();
    foreach (var group in groups)
        {
            var matchingItems = group.Items.Where(item => item.Title.Contains(queryText));
            int numberOfMatchingItems = matchingItems.Count();
            if (numberOfMatchingItems > 0)
            {
                Results.Add(group.Title, matchingItems);
                filterList.Add(new Filter(group.Title, numberOfMatchingItems));
            }
        }
    filterList.Insert(0, new Filter("All", totalMatchingItems, true));
    
    
    
  4. 다음 TODO 주석을 바꾸어 업데이트합니다.
    
    // 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 (selectedFilter.Name.Equals("All"))
    {
        var tempResults = new List<SampleDataItem>();
        foreach (var group in Results)   
        {
            tempResults.AddRange(group.Value);
            this.DefaultViewModel["Results"] = tempResults;
        }
    }
    else if (Results.ContainsKey(selectedFilter.Name))
    {
        this.DefaultViewModel["Results"] = 
     	  new List<SampleDataItem>(Results[selectedFilter.Name]);
    }
    
    
    

JJ655408.wedge(ko-kr,WIN.10).gif페이지에 SearchBox 컨트롤 추가

  1. 솔루션 탐색기에서 검색 상자를 추가할 페이지를 두 번 클릭합니다(예: GroupItemsPage.xaml).

    페이지가 디자이너에서 열립니다.

  2. Toolbox에서 SearchBox 컨트롤을 해당 페이지로 끕니다.
  3. 속성 창에서 이벤트 탭을 클릭하고 QuerySubmitted 필드에 SearchBox_QuerySubmitted를 입력한 다음 ENTER 키를 누릅니다.

    SearchBox_QuerySubmitted 이벤트 처리기가 코드 편집기에서 열립니다.

  4. SearchBox_QuerySubmitted 이벤트 처리기를 다음 코드로 바꿉니다.
    
    private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
    {
        this.Frame.Navigate(typeof(SearchResultsPage1), args.QueryText);
    }
    
    
    

JJ655408.wedge(ko-kr,WIN.10).gif사용자가 검색 결과에 나타나는 항목을 열도록 허용

  1. 디자이너에서 SearchResultsPage1.xaml을 엽니다.
  2. 문서 개요 패널에서 resultsGridView를 클릭합니다.
  3. 속성 창에서 이벤트 탭을 클릭하고 ItemClick 필드에 ItemClick을 입력합니다.
  4. 이 두 줄의 코드를 새 이벤트 처리기에 추가합니다.
    
    private void ItemClick(object sender, ItemClickEventArgs e)
    {
        var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
        this.Frame.Navigate(typeof(ItemDetailPage), itemId);
    }
    
    
    

JJ655408.wedge(ko-kr,WIN.10).gif앱에서 검색 기능 테스트

  1. Visual Studio 메뉴에서 디버그 > 디버깅 시작을 클릭하거나 F5 키를 누릅니다.
  2. 실행 중인 앱에서 검색 상자 컨트롤이 포함된 페이지를 엽니다.
  3. 검색 상자에 항목의 이름을 입력하고 검색 단추를 클릭합니다.

    검색 결과 페이지에 검색 용어가 포함된 항목의 결과가 표시됩니다.

관련 항목

Windows 스토어 앱용 C#, VB 및 C++ 항목 템플릿
페이지 컨트롤 항목 템플릿 추가

 

 

표시:
© 2014 Microsoft