[WPF] 화면 전환 - Frame과 Page

이번 글에서는 Kiosk개발 시 화면 전환하는 방법에 대해 살펴보자.

UserControl을 사용해서 하는 방법도 있으나, 여기서는 Page를 활용해본다.

 

프로젝트를 생성하고 나오는 기본 MainWindows.xaml에 아래와 같이 Frame을 추가한다

<Window x:Class="WPFPageSample.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:WPFPageSample"
        mc:Ignorable="d"
        Title="페이지 샘플" Height="450" Width="800">
    <Grid>
        <Frame Name="frame"
               NavigationUIVisibility="Hidden" /> <--못생김 방지
    </Grid>
</Window>

 

Frame을 활용해서 각 Page들을 탐색할 수 있다. 

프로젝트 수행 Step별 내용을 보면 크게

메인화면(홈화면) -> 주문화면-> 식사 장소 선택 -> 결제방식 선택-> 결제 -> 완료화면으로 구분된다. 각각의 화면을 Page로 만든다.

 

파일 추가시 다양한 Page 들이 보일건데 위 처럼 WPF 선택하고 Page를 선택

 

우리가 원하는 데로 잘 동작하는 지 우선 3개의 페이지를 추가한다.

홈 / 주문 / 식사 장소 선택 페이지

 

 

각 페이지에는 화면 전환이 잘 되는지 확인하기 위해 아래의 코드를 각각 추가했다. Textblock의 Text값은 변경할 것

 

    <Grid>
        <TextBlock Text="여기는 주문화면 페이지"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center">
        </TextBlock>
    </Grid>

 

처음에 실행되면 홈 화면이 나오도록 코드를 조금 수정한다.

 

<Window x:Class="WPFPageSample.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:WPFPageSample"
        mc:Ignorable="d"
        Title="페이지 샘플" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0"
              Background="Gray">
        </Grid>

        <Frame Name="frame"
               Grid.Row="1"
               NavigationUIVisibility="Hidden"
               Source="/View/HomePage.xaml">
        </Frame>
        
    </Grid>
</Window>

 

<Grid>를 2개의 행으로 분리했다. 첫번째 행은 시간과 홈 버튼이 나오도록 처리하기 위함이다.

2번째 행에 각각의 페이지들이 전환되도록 <Frame>에는 Grid.Row="1"으로 할당한다.

그리고, Source에 HomePage를 연결했다. 처음 실행하면 바로 홈 화면이 보이게

 

NavigationUIVisibility="Hidden"은 못생김 방지라 했다.

나도 못 생겼는데 너희는 날 수업때마다 봐야 하다니... 얼마나 힘들겠나. ㅜㅜ 좀만 참아줘 ㅌㅌ

실행해보자.

 

 

기본틀은 갖춰졌으니 주문하기 버튼을 추가한다. (HomePage.xaml)

 

    <Grid>
        <TextBlock Text="여기는 홈페이지"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center">
        </TextBlock>
        <Button x:Name="btnOrder"
                Content="주문하기"
                Margin="0,0,0,40"
                Padding="12"
                VerticalAlignment="Bottom"
                HorizontalAlignment="Center"
                Click="btnOrder_Click"></Button>
    </Grid>

 

 

주문하기를 선택하면 주문페이지로 이동해보려 하는데...

졸업한 선배들이 급 생각난다. 미안하다 선배들아 너희한테는 수업할 때 이렇게까지 안 해줬는데.. 주룩

 

 

HomePage.cs파일에 버튼 클릭 이벤트에 대한 코드가 자동으로 추가되어 있을 거다. 

 

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

        private void btnOrder_Click(object sender, RoutedEventArgs e)
        {
            OrderPage orderPage = new OrderPage();
            NavigationService.Navigate(orderPage);
        }
    }

OderPage를 생성하고 NavigationService를 활용해 화면을 이동한다. 주문화면으로 넘어갈 때 어떤 정보를 넘겨줘야 한다면 OrderPage() 생성자를 오버 로딩해서 하거나 Navigate하기 전에 OrderPage를 생성 후 SetXXX() 함수 등을 만들어 이용하면 된다.

 

위 코드를 조금 더 수정해보자. 주문화면에서 뒤로 가기를 하고 홈으로 돌아온 후 다시 주문화면으로 이동할 때를 생각해볼 수 있는데 이럴 때는 아래 코드처럼 추가한다.

 

        private void btnOrder_Click(object sender, RoutedEventArgs e)
        {
            if (NavigationService.CanGoForward) //앞으로 이동 가능하다면 그냥 ㄱㄱ
            {
                NavigationService.GoForward();
            }
            else
            {
                OrderPage orderPage = new OrderPage();
                NavigationService.Navigate(orderPage);
            }
        }

 

주문화면에서는 이동이 추가된다. 전 화면으로 이동과 다음 화면으로 이동. 주문하기 버튼 클릭했을 때 한 방식으로 똑! 같은 방법으로 하면 되고, 코드에서 처럼 이전 화면으로 돌아가는 처리를 한다.

 

 

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

        private void btnPrev_Click(object sender, RoutedEventArgs e)
        {
            if(NavigationService.CanGoBack) //이전으로 갈 수 있지? 그럼 빽
            {
                NavigationService.GoBack();
            }
        }

        private void btnNext_Click(object sender, RoutedEventArgs e)
        {
            if (NavigationService.CanGoForward)
            {
                NavigationService.GoForward();
            }
            else
            {
                PlacePage placePage = new PlacePage();
                NavigationService.Navigate(placePage);
            }
        }
    }

 

여기까지 하고 실행해보자. 동작 잘함. 안 되는 사람 손?!. 

 

코드는 기존 글에 링크 있으니 참고해~

 

------ 추가글 -----

이 상태에서 결제까지 완료되었으면 주문번호 나오고 홈으로 자동으로 전환되어야 한다고 했다. 

이것도 간단히 처리해보면, 결제가 완료되고 홈으로 돌아가야 하는 시점에 아래 코드를 활용.

(이런 건 찾아서 해보게 해야 되나 고민이네.)

 

            while (NavigationService?.CanGoBack == true)
            {
                NavigationService?.RemoveBackEntry();
            }

            NavigationService.Navigate(new HomePage());