문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

탐색 개요

Silverlight

이 항목에서는 일반적인 탐색 시나리오에 대해 설명하고 응용 프로그램에 탐색 기능을 추가하는 방법을 보여 줍니다.

이 항목에는 다음과 같은 단원이 포함되어 있습니다.

Frame Page 컨트롤을 사용하여 Silverlight 응용 프로그램에서 응용 프로그램 탐색을 구현합니다. 페이지 컨트롤은 콘텐츠의 개별 섹션을 나타냅니다. 프레임은 페이지 컨트롤의 컨테이너 역할을 하며 페이지를 더욱 쉽게 탐색할 수 있도록 해줍니다. 프레임에는 한 번에 한 페이지의 콘텐츠가 표시됩니다. 프로그래밍 방식이나 사용자 동작을 통해 새 페이지를 탐색하여 프레임 내에 표시되는 페이지를 변경합니다.

탐색 가능한 콘텐츠와 머리글, 바닥글, 탐색 세로 막대 등의 영구 UI(사용자 인터페이스) 구성 요소 조합을 포함하도록 Silverlight 응용 프로그램의 루트 visual을 디자인할 수 있습니다. Silverlight 탐색 응용 프로그램 템플릿을 사용하여 새 프로젝트를 만들 경우 템플릿은 탐색 가능한 콘텐츠에 대한 프레임과 영구 UI 구성 요소를 포함하는 XAML 파일을 생성합니다.

다음 예제에서는 MainPage라는 UserControl 컨트롤의 내부에 있는 단일 프레임을 보여 줍니다. 다른 UI 구성 요소를 LayoutRootContentFrame 앞 또는 뒤에 추가할 수 있습니다. Source 속성을 /Views/Home.xaml로 설정하면 기본적으로 /Views/Home.xaml에 있는 페이지가 프레임에 표시됩니다.


<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<UserControl x:Class="SilverlightApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
      <sdk:Frame x:Name="ContentFrame" Source="/Views/Home.xaml">

      </sdk:Frame>
  </Grid>
</UserControl>


새 항목 추가 대화 상자에서 Silverlight 페이지를 선택하여 응용 프로그램에 새 페이지를 추가할 수 있습니다. Visual Studio의 Silverlight 탐색 응용 프로그램 템플릿은 페이지가 포함되는 Views라는 폴더를 만듭니다. 이 폴더에 페이지를 추가하거나 응용 프로그램의 가장 적절한 위치에 페이지를 추가할 수 있습니다.

사용자에게 친숙한 URI 만들기

프레임에서 특정 URI 패턴을 특정 페이지로 매핑하도록 지정할 수 있습니다. URI 매핑을 사용하여 파일 경로 대신 사용자 동작을 설명하는 URI를 만들 수 있습니다. 예를 들어 /Home을 요청하면 실제로 /Views/Home.xaml에 있는 파일을 요청하도록 지정할 수 있습니다. 정의된 패턴 중 하나와 일치하지 않는 요청은 일반 URI 요청으로 처리되며 다른 페이지에 매핑되지 않습니다. 다음 표에서는 예제 URI 매핑 정의와 예제 요청이 어떻게 처리되는지를 보여 줍니다.

URI 매핑 정의

일치하는 URI의 예

확인된 URI

Uri = "/Home"

MappedUri = "/Views/Home.xaml"

/Home

/Views/Home.xaml

Uri = "/{page}"

MappedUri = "/Views/{page}Page.xaml"

/About

/Views/AboutPage.xaml

Uri = "/Product/{category}"

MappedUri = "/ContosoShop/Product.xaml?category={category}"

/Product/bikes

/ContosoShop/Product.xaml?category=bikes

Uri = "/{reporttype}/{month}/{format}"

(in XAML) MappedUri = "/Views/Reports/{reporttype}.xaml?time={month}&amp;show={format}"

(Visual Basic 또는 C#의 경우) MappedUri = "/Views/Reports/{reporttype}.xaml?time={month}&show={format}"

/Sales/June/Short

/Views/Reports/Sales.xaml?time=June&show=Short

UriMapper 클래스(또는 UriMapperBase 클래스에서 파생되는 사용자 지정 클래스)의 인스턴스 하나와 원하는 개수의 UriMapping 인스턴스를 정의하여 프레임에 URI 매핑을 추가할 수 있습니다. 지정하는 패턴이 요청한 URI에 정확하게 일치하는 URI일 필요는 없습니다. 이 패턴은 해당 세그먼트의 값과 일치하는 URI에 자리 표시자 세그먼트를 포함할 수 있습니다. 세그먼트 이름을 중괄호({})로 묶어 자리 표시자 세그먼트를 지정합니다. 자리 표시자 세그먼트는 URI에 매핑될 때 변수 역할을 합니다. 중괄호로 묶이지 않은 값은 패턴과 일치시키기 위해 URI에 표시되어야 하는 리터럴 값을 나타냅니다. 다음 예제에서는 자리 표시자 값이 포함된 URI 패턴을 보여 줍니다.


<sdk:Frame 
       x:Name="ContentFrame" 
       Style="{StaticResource ContentFrameStyle}" 
       Source="/Home" 
       Navigated="ContentFrame_Navigated" 
       NavigationFailed="ContentFrame_NavigationFailed">
    <sdk:Frame.UriMapper>
        <sdk:UriMapper>
            <sdk:UriMapping 
                Uri="/ProductDetail/{productid}" 
                MappedUri="/Views/ProductDetail.xaml?ProductId={productid}"/>
            <sdk:UriMapping 
                Uri="/Reports/{type}/{selection}" 
                MappedUri="/Views/ReportsPage.xaml?type={type}&amp;selection={selection}"/>
            <sdk:UriMapping 
                Uri="/{pageName}" 
                MappedUri="/Views/{pageName}.xaml"/>
        </sdk:UriMapper>
    </sdk:Frame.UriMapper>
</sdk:Frame>


URI 요청이 요청과 일치하는 첫 번째 패턴에 매핑됩니다. 따라서 가장 구체적인 인스턴스부터 가장 일반적인 인스턴스의 순서로 URI 매핑 인스턴스를 추가합니다. 예를 들어 다음 정의는 특정 리터럴 값부터 일반 자리 표시자 값의 순서로 제대로 나열되어 있습니다. /SalesReport 요청이 /Views/Reports/Sales.xaml에 매핑됩니다.


<sdk:Frame x:Name="ContentFrame" Source="/Home">
  <sdk:Frame.UriMapper>
    <sdk:UriMapper>
      <sdk:UriMapping Uri="/SalesReport" MappedUri="/Views/Reports/Sales.xaml"/>
      <sdk:UriMapping Uri="/{page}" MappedUri="/Views/{page}Page.xaml"/>
    </sdk:UriMapper>
  </sdk:Frame.UriMapper>
</sdk:Frame>


하지만 URI 매핑 정의의 순서를 역순으로 바꾸면 /SalesReport 요청이 /Views/Reports/Sales.xaml에 매핑되지 않습니다. 대신 첫 번째 정의인 /{page}/SalesReport를 포함하는 모든 단일 세그먼트 요청과 일치되어, 요청이 /Views/SalesReportPage.xaml에 매핑됩니다.

쉬운 페이지 탐색

Frame 클래스는 페이지를 탐색하기 위해 속성과 메서드를 제공합니다. Source 속성을 표시할 페이지에 대한 URI로 설정하거나 Navigate 메서드를 호출하고 페이지에 대한 URI를 매개 변수로 전달합니다. 또한 GoBackGoForward 메서드를 사용하면 탐색 기록의 앞뒤로 탐색할 수 있습니다.

HyperlinkButton 컨트롤을 사용하면 사용자가 응용 프로그램 내에서 페이지를 탐색하도록 할 수 있습니다. HyperlinkButton 컨트롤이 프레임에서 호스팅되는 Silverlight 페이지의 내부에 있는 경우 NavigateUri 속성을 페이지에 매핑되는 URI로 설정하고 TargetName 속성은 설정하지 않습니다. 호스팅 프레임에서 요청된 페이지로 이동합니다. 다음 예제에서는 응용 프로그램에서 다른 페이지로 이동하는 HyperlinkButton이 있는 페이지를 보여 줍니다.


<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<sdk:Page x:Class="SilverlightApplication.Home" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="Home">
    <Grid x:Name="LayoutRoot">
        <HyperlinkButton NavigateUri="/About" Content="About"></HyperlinkButton>
    </Grid>
</sdk:Page>


HyperlinkButton 컨트롤이 프레임의 외부에 있는 경우 NavigateUri 속성을 페이지에 매핑되는 URI로 설정하고 TargetName 속성을 프레임의 이름으로 설정하여 프레임 내에서 리소스를 탐색할 수 있습니다. 다음 예제에서는 프레임과 프레임의 외부에 있는 두 HyperlinkButton 컨트롤을 보여 줍니다. HyperlinkButton 컨트롤을 사용하면 프레임 내에 표시되는 페이지를 쉽게 탐색할 수 있습니다. HyperlinkButton 컨트롤 모두에 대한 TargetName 속성이 프레임에 할당된 이름인 ContentFrame으로 설정됩니다.


<Grid x:Name="LayoutRoot">
  <Border>
    <sdk:Frame x:Name="ContentFrame" Source="/Home">
        <sdk:Frame.UriMapper>
          <sdk:UriMapper>
            <sdk:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
          </sdk:UriMapper>
        </sdk:Frame.UriMapper>
     </sdk:Frame>
  </Border>

  <Grid>
    <Border>
       <StackPanel>
           <HyperlinkButton NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>
           <HyperlinkButton NavigateUri="/About" TargetName="ContentFrame" Content="about"/>
       </StackPanel>
    </Border>
  </Grid>
</Grid>


페이지에서 탐색 요청을 프로그래밍 방식으로 시작해야 하는 경우 먼저 호스트 프레임에서 사용되는 NavigationService 개체를 가져와야 합니다. NavigationService 클래스는 페이지를 탐색하기 위해 GoBack, GoForward, Source 등과 같은 멤버를 제공합니다. NavigationService 개체를 사용하는 Silverlight 페이지를 보여 주는 예제는 이 항목의 뒷부분의 응용 프로그램 탐색 예제를 참조하십시오.

프레임 탐색과 다른 프레임의 내부에 중첩되지 않는 프레임에 대한 웹 브라우저 탐색을 통합할 수 있습니다. 브라우저 외부 실행 응용 프로그램에는 브라우저 통합 탐색을 사용할 수 없습니다. 브라우저와 통합된 경우 웹 브라우저의 앞으로 및 뒤로 단추를 사용하면 최상위 프레임의 탐색 기록 내에서 요청을 탐색합니다. 웹 브라우저의 앞으로 및 뒤로 단추를 사용하여 다른 Silverlight 페이지를 탐색할 수 있습니다. 브라우저 통합 탐색을 사용하면 브라우저 창에 URI를 직접 입력할 수 있습니다. 그러면 해당 URI를 나타내는 페이지가 Silverlight 응용 프로그램에 표시됩니다. 따라서 URI를 책갈피로 지정하거나 Silverlight 응용 프로그램뿐 아니라 특정 상태의 응용 프로그램에 해당하는 하이퍼링크를 공유할 수 있습니다.

JournalOwnership 속성을 설정하여 프레임이 웹 브라우저 탐색과 통합되는지 여부를 지정합니다. 기본적으로 속성이 Automatic으로 설정됩니다. 즉, 프레임이 최상위 프레임인 경우 브라우저 업무 일지와 통합됩니다. JournalOwnership 속성을 OwnsJournal로 설정하여 브라우저 통합 탐색을 방지할 수 있습니다. 그러면 프레임에서 자체 탐색 업무 일지가 유지됩니다.

탐색 기록을 지원하려면 Silverlight 개체가 있는 웹 페이지에 _sl_historyFrame이라는 iframe을 포함시켜야 합니다. 기본적으로 이 iframe은 새로운 Silverlight 응용 프로그램을 만들 때 웹 페이지에 포함됩니다. 기존 응용 프로그램에 탐색 기록을 추가하려면 Silverlight 개체를 호스팅하는 웹 페이지에 다음 코드를 추가해야 합니다.

<iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>

응용 프로그램 탐색 예제

앞의 예제에서 다음 패턴에 대한 URI 매핑을 정의했습니다.

<uriMapper:UriMapping Uri="/ProductDetail/{productid}" 
        MappedUri="/Views/ProductDetail.xaml?ProductId={productid}"/>

다음 예제에서는 URI 매핑을 사용하여 사용자가 요청한 제품에 대한 데이터를 표시하는 페이지로 직접 이동할 수 있도록 합니다. 이 예제에서는 제품에 대한 데이터를 표시하는 XAML 페이지를 보여 줍니다. 또한 페이지에는 페이지에서 앞으로 및 뒤로 탐색 요청을 시작하는 단추가 포함되어 있습니다.


<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<sdk:Page x:Class="NavExample.Views.ProductDetail" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
     d:DesignWidth="640" d:DesignHeight="480"
     Title="Product Information">
    <StackPanel x:Name="LayoutRoot">
        <ListBox x:Name="ListBox1" ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding ProductNumber}"/>
                        <TextBlock Text="{Binding Color}"/>
                        <TextBlock Text="{Binding Size}"/>
                        <TextBlock Text="{Binding ListPrice}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>   
        </ListBox>
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
            <Button Width="100" x:Name="BackNavButton" Click="BackNavButton_Click" 
                    Content="&lt;&lt; back" Visibility="Collapsed" />
            <Button Width="100" x:Name="ForwardNavButton" Click="ForwardNavButton_Click" 
                    Content="forward &gt;&gt;" Visibility="Collapsed" />
        </StackPanel>
    </StackPanel>
</sdk:Page>


이 예제에서는 코드 숨김 페이지를 보여 줍니다. 이 페이지는 WCF 데이터 서비스(WCF Data Services)에 액세스하여 데이터를 검색하지만 데이터 서비스를 구현하는 단계는 여기서 설명하지 않습니다. 데이터 서비스에 대한 자세한 내용은 WCF 데이터 서비스(Silverlight)를 참조하십시오. 요청한 제품 ID를 쿼리 문자열에서 가져와 데이터 서비스 쿼리에 전달합니다. 페이지에 대한 탐색 서비스는 앞으로 또는 뒤로 탐색을 사용할 수 있는지 여부를 결정하는 데 사용됩니다.


public partial class ProductDetail : Page
{
    public ProductDetail()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        GetProductDetail();
        SetButtonVisibility();
    }

    private void SetButtonVisibility()
    {
        if (NavigationService.CanGoBack)
        {
            BackNavButton.Visibility = Visibility.Visible;
        }
        else
        {
            BackNavButton.Visibility = Visibility.Collapsed;
        }

        if (NavigationService.CanGoForward)
        {
            ForwardNavButton.Visibility = Visibility.Visible;
        }
        else
        {
            ForwardNavButton.Visibility = Visibility.Collapsed;
        }
    }

    private void BackNavButton_Click(object sender, RoutedEventArgs e)
    {
        if (NavigationService.CanGoBack)
        {
            NavigationService.GoBack();
        }
    }

    private void ForwardNavButton_Click(object sender, RoutedEventArgs e)
    {
        if (NavigationService.CanGoForward)
        {
            NavigationService.GoForward();
        }
    }

    private void GetProductDetail()
    {
        string productID;
        DataServiceContext svcContext = 
            new DataServiceContext(new Uri("AdventureWorks.svc", UriKind.Relative));

        if (this.NavigationContext.QueryString.ContainsKey("ProductId"))
        {
            productID = this.NavigationContext.QueryString["ProductId"];
        }
        else
        {
            productID = App.Current.Resources["FeaturedProductID"].ToString();
        }

        svcContext.BeginExecute<Product>(new Uri("Product(" + productID + ")", 
            UriKind.Relative), loadProductCallback, svcContext);
    }

    private void loadProductCallback(IAsyncResult asyncResult)
    {
        DataServiceContext context = asyncResult.AsyncState as DataServiceContext;

        ListBox1.DataContext = context.EndExecute<Product>(asyncResult);
    }
}


응용 프로그램에서 다른 웹 페이지로 바로 연결되는 링크를 제공할 수 있습니다. 외부 탐색은 응용 프로그램 외부에 있는 리소스에 액세스하는 데 유용합니다. 또한 Silverlight에서 외부 탐색을 사용하여 일반 웹 페이지에서 사용할 수 있는 세로 막대 메뉴와 같은 컨트롤을 구현할 수 있습니다.

경우에 따라 응용 프로그램에서 외부 탐색을 허용하지 않을 수 있습니다. 모든 외부 탐색을 허용하지 않으려면 Silverlight 플러그 인을 초기화할 때 enableNavigation 속성을 none으로 설정합니다. 자세한 내용은 EnableNavigation(Silverlight 플러그 인 개체)을 참조하십시오.

다른 웹 페이지에 대한 사용자 탐색을 허용하려면 HyperlinkButton 컨트롤을 사용하여 NavigateUri 속성을 외부 리소스로 설정하고 새 브라우저 창을 열도록 TargetName 속성을 설정하면 됩니다.

다음 코드 예제에서는 응용 프로그램 외부 탐색을 위해 HyperlinkButton을 사용하는 방법을 보여 줍니다.


<HyperlinkButton NavigateUri="http://www.microsoft.com"
    Content="Go to Microsoft" TargetName="_new" />


Silverlight 4 이상에서 ContentLoader 속성을 사용자 지정 INavigationContentLoader 구현으로 설정하여 탐색 시스템을 확장할 수 있습니다. INavigationContentLoader 인터페이스는 비동기 콘텐츠 로드를 지원하기 위해 네 개의 메서드를 정의합니다.

기본 ContentLoader 속성 값은 PageResourceContentLoader 클래스의 인스턴스이며 이 클래스는 응용 프로그램 패키지(.xap 파일)에서 페이지를 로드합니다. 임의 URI 확인을 수행하기 위해 이 기능을 바꿀 수 있습니다. 예를 들어 필요할 경우에만 서버에서 페이지를 다운로드하거나 특정 URI를 다른 URI로 리디렉션할 수 있습니다.

Frame NavigationService 클래스는 Silverlight 4 이상의 Refresh 메서드도 제공합니다. 이는 특정 페이지에서 수행되는 사용자 상호 작용에 따라 동일한 URI에 대해 다른 콘텐츠를 제공할 수 탐색 확장을 사용할 때 유용합니다. 예를 들어 이러한 확장을 통해 사용자 인증이 필요한 페이지를 사용하는 일부 탐색 시나리오를 수행할 수 있습니다. INavigationContentLoader 를 구현하는 방법에 대한 자세한 내용은 Additional Navigation Resources를 참조하십시오.

커뮤니티 추가 항목

추가
표시: