Silverlight 2 응용 프로그램에서 동적으로 새 페이지 로드

Silverlight 2 응용 프로그램에서는 여러 가지 방식으로 콘텐츠를 동적으로 로드할 수 있습니다. 이 절차에서는 콘텐츠 페이지용 개체를 만든 다음 사용자가 단추를 클릭할 때 해당 개체 중 하나를 로드하여 콘텐츠를 표시합니다. MSDN의 Silverlight 설명서와 Silverlight 커뮤니티 웹 사이트에서 다른 솔루션을 찾을 수 있습니다.

런타임에 페이지 로드

1. 여러 콘텐츠 페이지가 있는 Silverlight 2 프로젝트에서 시작 페이지(대개 Page.xaml)를 엽니다. 이 자습서에서는 UserControl1.xaml과 UserControl2.xaml이라는 두 개의 콘텐츠 페이지가 있다고 가정합니다.

   팁:
   새 콘텐츠 페이지를 추가하려면 파일 메뉴에서 새 항목을 클릭하십시오.

2. 도구 상자에서 자산 라이브러리  단추를 클릭한 다음 Border  레이아웃 패널을 선택합니다. 마우스를 사용하여 아트보드에 테두리 개체를 그립니다.

   

   팁:
   새 테두리 개체가 선택되어 있는 상태에서, 속성 패널의 브러시 및 모양에서 속성을 설정하여 해당 개체의 모양을 변경할 수 있습니다. 예를 들어 BorderBrush 속성은 단색 브러시 로, BorderThickness 속성은 2로 설정할 수 있습니다.

3. 개체 및 타임라인에서 [Border] 개체를 마우스 오른쪽 단추로 클릭하고 이름 바꾸기를 선택한 다음 개체 이름을 PageContainer로 변경합니다. 그러면 나중에 코드 숨김 파일에서 이 개체를 참조할 수 있습니다.

4. 개체 및 타임라인에서 LayoutRoot 개체를 두 번 클릭하여 개체를 활성화합니다. 노란색 테두리가 LayoutRoot 주위에 나타나고 아트보드에 새로 그린 개체는 모두 LayoutRoot의 자식이 됩니다.

5. 도구 상자에서 Button 을 클릭한 다음 아트보드의 PageContainer 개체 외부에 단추를 그립니다.

   팁:
   텍스트를 표시하는 컨트롤을 그린 후 F2 키를 눌러 텍스트 편집 모드를 시작하여 텍스트를 수정할 수 있습니다. 텍스트 편집 모드를 끝내려면 Esc 키를 누르십시오.

6. 개체 및 타임라인에서 [Button] 개체를 선택합니다.

   

7. 속성 패널에서 이벤트  단추를 클릭하여 속성 보기에서 이벤트 보기로 전환합니다.

   팁:
   속성 패널을 속성 보기로 다시 전환하려면 속성  단추를 클릭하십시오.

8. Click 이벤트 옆의 텍스트 상자를 두 번 클릭합니다. 그러면 Microsoft Expression Blend는 사용자가 실행 중인 응용 프로그램에서 단추를 클릭할 때 호출될 이벤트 처리기의 이름(Button_Click)을 생성합니다.

   

   Expression Blend가 이벤트 처리기 코드를 클립보드에 복사한 다음 Microsoft Visual Studio 2008(설치된 경우)에서 프로젝트를 엽니다.

   코드 편집기가 설치되어 있지 않은 경우 텍스트 편집기에서 사용자 정의 컨트롤의 코드 숨김 파일을 열고 다음 코드를 붙여 넣습니다.

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
   
   End Sub
   

   Visual Studio 2008과 Expression Blend의 상호 운용성에 대한 자세한 내용은 코드 숨김 파일 편집을 참조하십시오.

9. PageContainer 테두리 개체에 표시될 두 콘텐츠 페이지 간에 전환하려면 메모리에 있는 페이지의 인스턴스를 만든 다음 이벤트 처리기에서 페이지 중 하나를 PageContainer에 추가하십시오. 예를 들어 굵게 표시된 다음 코드를 코드 숨김 파일에 붙여 넣습니다. "UserControl1"과 "UserControl2"는 프로젝트에 있는 다른 두 콘텐츠 페이지의 이름입니다.

   팁:
   테두리 컨트롤에는 자식 개체가 하나만 있을 수 있습니다. Grid  레아아웃 패널 같이 둘 이상의 자식을 포함할 수 있는 컨트롤의 경우에는 코드가 약간 다릅니다.

   private UserControl1 uc1 = new UserControl1();private UserControl2 uc2 = new UserControl2();private bool atUC2 = false;
   
   private void Button_Click(object sender, RoutedEventArgs e)
   {
     if (atUC2)  {    this.PageContainer.Child = uc1;  }  else  {    this.PageContainer.Child = uc2;  }  atUC2 = !atUC2;
   }
   

   Private uc1 As UserControl1 = New UserControl1()Private uc2 As UserControl2 = New UserControl2()Private atUC2 As Boolean = False
   
   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
     If atUC2 Then    Me.PageContainer.Child = uc1  Else    Me.PageContainer.Child = uc2  End If  atUC2 = Not atUC2
   End Sub
   

10. 프로젝트를 테스트(F5 키)한 다음 단추를 클릭하여 PageContainer 테두리에 로드된 UserControl1과 UserControl2를 확인합니다.

    

문제 해결

• Expression Blend의 이벤트 패널을 두 번 클릭할 때 "코드 숨김 파일을 변경할 수 없습니다. 다음 클래스를 찾을 수 없습니다."라는 오류 메시지가 나타나면 외부 코드 편집기(대개 Microsoft Visual Studio)로 전환하여 솔루션을 다시 로드해야 할 수 있습니다. 다시 로드하면 누락된 클래스를 정의하는 새 파일이 포함됩니다. Visual Studio 2008에서 "솔루션을 로드할 수 없습니다."라는 오류 메시지가 나타나면 Visual Studio 2008용 Microsoft Silverlight Tools를 설치하지 않은 것일 수 있습니다. 해당 도구를 설치한 다음 Expression Blend의 이벤트 패널을 두 번 클릭해 봅니다.

• 동적으로 로드된 페이지의 콘텐츠가 표시되지 않으면 PageContainer 테두리가 너무 작아 로드된 콘텐츠 중 일부가 포함되지 않는 경우일 수 있습니다. PageContainer 테두리를 더 크게 만들거나 동적으로 로드된 페이지의 레이아웃 속성을 다음 값으로 설정해 보십시오.

  • Width = Auto

  • Height = Auto

  • Margin 속성 = 0

• 클릭할 때 단추가 사라진다면 단추 개체를 LayoutRoot의 자식이 아닌 PageContainer 테두리의 자식으로 추가한 경우일 수 있습니다. 이 경우 추가한 코드가 PageContainer 테두리 개체의 자식을 대체하게 됩니다. 개체 및 타임라인에서 단추 개체를 LayoutRoot 패널에 끌어 놓아 PageContainer 테두리 외부로 이동할 수 있습니다.

• 사용자가 단추 대신 페이지를 로드할 새 개체를 만든 다음 Expression Blend가 Button_Click 이벤트 처리기의 이름을 속성 패널의 이벤트  보기에 있는 새 개체로 복사하면 프로젝트를 테스트(F5 키)할 때 웹 브라우저에 오류 메시지가 나타날 수 있습니다. 이는 새 개체 형식과 일치하지 않는 이벤트 처리기의 잘못된 서명으로 인해 발생하는 오류일 수 있습니다. 예를 들어 단추 Click 이벤트 처리기의 서명은 다음과 같이 나타납니다.

  private void Button_Click(object sender, RoutedEventArgs e)
  

  Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
  

  MouseLeftButtonDown 이벤트 처리기의 서명은 다음과 같이 나타납니다.

  private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  

  Private Sub Path_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
  

  속성 패널의 이벤트  보기에서 올바른 이벤트 처리기 옆의 텍스트 상자를 두 번 클릭한 다음 코드 숨김 파일에 올바른 서명이 있는 새 메서드를 만들어 이 문제를 해결할 수 있습니다.

다음 단계

• Silverlight 커뮤니티 웹 사이트에서 특정 작업에 대한 기타 작업 방법 정보 및 비디오를 찾아볼 수 있습니다.