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

아티클
04/17/2014

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

검색 결과 페이지 항목 추가.
검색 결과 페이지 항목에서 코드 수정.
페이지에 SearchBox 컨트롤 추가.
사용자가 검색 결과에 나타나는 항목을 열도록 허용.
앱에서 검색 기능 테스트.

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

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

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

중요 Visual Studio를 처음 실행하면 개발자 라이선스를 다운로드하라는 메시지가 표시됩니다. 자세한 내용은 개발자 라이선스 가져오기를 참조하세요.
솔루션 탐색기에서 프로젝트 노드의 바로 가기 메뉴를 열고 추가 > 새 항목을 클릭합니다.
새 항목 추가 대화 상자의 가운데 창에서 검색 결과 페이지를 클릭합니다. 이 예제에서는 이름 상자에 표시되는 기본 이름인 SearchResultsPage1.xaml을 그대로 유지합니다.
추가 단추를 클릭합니다.

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

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

SearchResultsPage1 코드 파일에서 샘플 데이터 클래스를 참조할 파일의 맨 위에 다음 문을 추가합니다.
```
using SearchResultsExample.Data;
```
```
Imports SearchResultsExample.Data
```

다음 속성을 추가합니다.

public Dictionary<String, IEnumerable<SampleDataItem>> Results { get; set; }

Public Property Results() As Dictionary(Of [String], IEnumerable(Of SampleDataItem))
    Get
        Return m_Results
    End Get
    Set(value As Dictionary(Of [String], IEnumerable(Of SampleDataItem)))
        m_Results = Value
    End Set
End Property
Private m_Results As Dictionary(Of [String], IEnumerable(Of SampleDataItem))

첫 번째 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));

' 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.

Dim filterList As New List(Of 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));

Dim filterList = New List(Of Filter)()
Dim totalMatchingItems = 0
Results = New Dictionary(Of String, IEnumerable(Of SampleDataItem))()
Dim groups As IEnumerable(Of Data.SampleDataGroup) = Await Data.SampleDataSource.GetGroupsAsync()
For Each group In groups
    Dim matchingItems = group.Items.Where(Function(item) item.Title.Contains(queryText))
    Dim numberOfMatchingItems As Integer = matchingItems.Count()
    If numberOfMatchingItems > 0 Then
        Results.Add(group.Title, matchingItems)
        filterList.Add(New Filter(group.Title, numberOfMatchingItems))
    End If
Next
filterList.Insert(0, New Filter("All", totalMatchingItems, True))

다음 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

' TODO: Respond to the change in active filter by setting Me.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]);
}

If selectedFilter.Name.Equals("All") Then
Dim tempResults = New List(Of SampleDataItem)()
For Each group In m_Results
    tempResults.AddRange(group.Value)
    Me.DefaultViewModel("Results") = tempResults
Next
ElseIf m_Results.ContainsKey(selectedFilter.Name) Then
    Me.DefaultViewModel("Results") = New List(Of SampleDataItem)(m_Results(selectedFilter.Name))
End If

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

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

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

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

SearchBox_QuerySubmitted 이벤트 처리기를 다음 코드로 바꿉니다.

private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
{
    this.Frame.Navigate(typeof(SearchResultsPage1), args.QueryText);
}

Private Sub SearchBox_QuerySubmitted(sender As SearchBox, args As SearchBoxQuerySubmittedEventArgs)
    Me.Frame.Navigate(GetType(SearchResultsPage1), args.QueryText)
End Sub

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

디자이너에서 SearchResultsPage1.xaml을 엽니다.
문서 개요 패널에서 resultsGridView를 클릭합니다.
속성 창에서 이벤트 탭을 클릭하고 ItemClick 필드에 ItemClick을 입력합니다.

이 두 줄의 코드를 새 이벤트 처리기에 추가합니다.

private void ItemClick(object sender, ItemClickEventArgs e)
{
    var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
    this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}

Private Sub ItemClick(sender As Object, e As ItemClickEventArgs) Handles resultsGridView.ItemClick
    Dim itemId = DirectCast(e.ClickedItem, SampleDataItem).UniqueId
    Me.Frame.Navigate(GetType(ItemDetailPage), itemId)
End Sub

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

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

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

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

관련 항목

추가 리소스