[wpf] 화면 이동하기 -1- Page 사용법, 예제

화면 이동하기는 총 네개의 게시글로 구성되어 있습니다.

1. Page

2. Window

3. TabControl

4. UserControl

 

이번게시글에서는 Page를 이용해 화면 이동을 해보겠습니다.

 

Page는 화면전체를 이동할떄 주로 사용합니다.

 

이번 게시글은 총 네개의 파일로 구성됩니다.

 

MainWindow, MenuPage, MyPage1, MyPage2

 

MenuPage를 제외한 나머지파일에서는 cs파일에 아무것도 적지 않아도 됩니다.

 

 

1. MainWindow.xaml

<Window x:Class="PageTest.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:PageTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Frame Source="/MenuPage.xaml"></Frame>
    </Grid>
</Window>

 

<Frame>태그의 Source에 URI를 직접 넣어줍니다.

 

Mainwindow에서 화면이 시작되면 MenuPage의 화면을 띄워줄 것입니다.

 

 

 

2. MenuPage.xaml

<Page x:Class="PageTest.MenuPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:PageTest"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="MenuPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        
        <Grid Grid.Row="0">
            <Button Width="200" Height="80" Click="Button_Click_1" Content="Hello버튼"></Button>
        </Grid>
        <Grid Grid.Row="1">
            <Button Width="200" Height="80" Click="Button_Click_2" Content="World버튼"></Button>
        </Grid>
    </Grid>
</Page>

 

화면을 위아래로 쪼개고 버튼을 넣어주었습니다.

 

그리드 안에 들어가는 요소는 부모의 요소의 크기만큼 당겨주는 특징이 있으니

 

높이와 넓이를 직접 지정해줍니다(상하좌우에서 당겨주니 가운대정렬은 자동으로 됩니다)

 

 

3. MenuPage.cs

namespace PageTest
{
    /// <summary>
    /// MenuPage.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MenuPage : Page
    {
        public MenuPage()
        {
            InitializeComponent();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            Uri uri = new Uri("/Mypage1.xaml", UriKind.Relative);
            NavigationService.Navigate(uri);
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            Uri uri = new Uri("/Mypage2.xaml", UriKind.Relative);
            NavigationService.Navigate(uri);
        }
    }
}

 

클릭이벤트만 구현하였습니다.

 

각 버튼을 클릭하면 해당 URI로 이동합니다.

 

 

4. MyPage1.xaml

<Page x:Class="PageTest.MyPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:PageTest"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="MyPage">

    <Grid>
        <TextBlock Margin="100" FontSize="25" TextAlignment="Center" Text="Hello" VerticalAlignment="Center"></TextBlock>
    </Grid>
</Page>

 

TextBlock을 이용해 Hello를 찍어줍시다.

 

 

5. MyPage2.xaml

<Page x:Class="PageTest.MyPage2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:PageTest"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="MyPage2">

    <Grid>
        <TextBlock Margin="100" FontSize="25" TextAlignment="Center" Text="World" VerticalAlignment="Center"></TextBlock>
    </Grid>
</Page>

 

TextBlock을 이용해 World를 출력합니다.

 

6. 결과창

1. 초기화면

 

 

2. Hello버튼 클릭

버튼을 클릭하는순간 굉장히 마이크로소프트 느낌(윈도우느낌)이 강하게 드는 뒤로가기 탭이 상단에 생깁니다.

 

그래서 뒤로가기는 따로 구현하지 않아도 됩니다.

 

다음 게시글에서는 WPF에서 정말로 많이 쓰이는 Window 를 사용하여 화면을 이동해보겠습니다.

 

끝.