[WPF] 4. 탐색 - 4.1.3 Frame 이용하기

   4. 탐색 - 4.1.3 Frame 이용하기

---

4.1.3 Frame 이용하기

 WPF에서 전체 창이 아닌 특정 영역에 원하는 콘텐츠를 탐색하여 배치할 수 있게 Frame을 제공하고 있습니다. Frame을 사용하면 독립 실행 가능한 응용에서도 탐색을 지원할 수 있습니다. Frame에는 표시할 소스 페이지를 설정하기 위한 Source 속성이 있습니다. 개발자가 표시하기를 원하는 페이지를 Frame의 Source 속성에 설정하는 것으로 원하는 결과를 얻을 수 있습니다.

 

 먼저 WPF 응용 프로그램을 하나 만드세요.

[그림 4.5] Frame 사용하기 프로젝트 생성

 

 프레임 소스로 사용할 세 개의 Page를 추가하세요. 페이지 이름은 Mainpage, Page1, Page2라고 하겠습니다. 예제로 만들 프로그램은 시작하면서 MainPage가 프레임에 표시되고 버튼을 눌러서 원하는 페이지를 프레임에 보이게 하는 것으로 할거예요.

 

 먼저 MainPage와 Page1, Page2에는 TextBlock을 이용하여 자신이 어떠한 페이지인지 확인할 수 있게 하세요.  다음은 MainPage.xaml의 일부 코드입니다.

 

<Grid>

   <TextBlock > 메인 페이지</TextBlock>

</Grid>

 

 그리고, [그림 4.6]과 같이 Window1의 화면을 구성합니다. 아직 레이아웃에 대해 배우지 않았지만 간단하게 화면을 구성하기 위해 Grid와 StackPanel을 사용할게요.

 

[그림 4.6] Window1 화면 구성

   

Window1.xaml

<Window x:Class="Frame_사용하기.MainWindow"         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:local="clr-namespace:Frame_사용하기"         mc:Ignorable="d"         Title="MainWindow" Height="350" Width="525">     <Grid>         <Grid.RowDefinitions>             <RowDefinition Height="*"/>             <RowDefinition Height="5*"/>         </Grid.RowDefinitions>         <StackPanel Orientation="Horizontal">             <Button Name="btnmain" Width="80" Content="메인" Click="btnmain_Click"/>             <Button Name="btnone" Width="80" Content="페이지 1" Click="btnone_Click"/>             <Button Name="btntwo" Width="80" Content="페이지 2" Click="btntwo_Click"/>         </StackPanel>         <Frame Name="frame_content" Grid.Row="1" Source="MainPage.xaml"/>     </Grid> </Window>

 

 Button 요소의 Click은 이벤트 핸들러를 지정한 것인데 속성 창이나 Visual Studio의 인텔리센스를 통해 추가하세요.

 

 Xaml 코드 입력 중에 Click을 입력하다 보면 펼침 목록 창이 뜰 때 탭 키를 누르면 Click=””부분을 자동으로 완성해 줍니다.

[그림 4.7] 인텔리센스를 이용하여 이벤트 핸들러 추가1

 

 그리고 다시 탭 키를 누르면 이벤트 처리기가 Xaml 파일과 cs 소스 파일에 이벤트 핸들러가 만들어지는 것을 알 수 있습니다.

[그림 4.8] 인텔리센스를 이용하여 이벤트 핸들러 추가2

 

 세 개의 버튼에 Click 이벤트 핸들러를 추가하였으면 소스 코드에 가서 각 버튼을 눌렀을 때 Frame의 소스 페이지를 변경하는 코드를 작성하세요.

 

Window1.xaml.cs

using System; using System.Windows; namespace Ex_Frame {     public partial class Window1 : Window     {         public Window1()         {             InitializeComponent();         }         private void btnmain_Click(object sender, RoutedEventArgs e)         {             frame_content.Source = new Uri("MainPage.xaml", UriKind.Relative);         }         private void btnone_Click(object sender, RoutedEventArgs e)         {             frame_content.Source = new Uri("Page1.xaml", UriKind.Relative);         }         private void btntwo_Click(object sender, RoutedEventArgs e)         {             frame_content.Source = new Uri("Page2.xaml", UriKind.Relative);         }     } }

 

 그리고, WPF에서는 cs 파일은 없이 xaml 파일만 갖는 콘텐츠도 만들 수 있습니다. 이 또한 탐색이 가능하며 이를 느슨한 XAML 파일이라고 부릅니다. 예제 프로젝트에 새로운 항목으로 MyContent 이름으로 페이지를 추가한 후에 cs 파일은 제거해 보세요. 그리고 Grid 요소 내부에 다음처럼 TextBlock을 추가하세요.

 

<TextBlock>

    느슨한 XAML파일

</TextBlock>

  

 Window1에 버튼을 추가한 후에 해당 버튼을 클릭했을 때 Freame 소스를 MyContent로 변경해 보세요. 실행해 보시면 느스한 XAML 파일의 콘텐츠도 탐색 가능하다는 것을 알 수 있습니다. 

 

 그리고 Frame에는 일반 웹 페이지도 탐색해 표시할 수 있습니다.

 

private void btnehclub_Click(object sender, RoutedEventArgs e)

{

    frame_content.Source = new Uri("http://ehclub.co.kr");

}

 

[그림 4.9] Frame 사용하기 실행 화면 

 

---

관련 게시글

[WPF] 4. 탐색 - 4.1.1 Page

[WPF] 4. 탐색 - 4.1.2 Hyperlink 사용하여 페이지 이동

[WPF] 4. 탐색 - 4.1.4 NavigationService 이용하기

[WPF] 4. 탐색 - 4.2 PageFunction을 이용한 구조적 탐색

[WPF] 4. 탐색 - 4.3 탐색 종합 세트, 마법사

실습 파일

Frame 사용하기.zip