본문 바로가기

프로그래밍/Xamarin .Forms

Xamarin.Forms 화면간 이동 기능 구현

Xamarin.Froms에서의 화면간 이동 기능 구현을 할것이다.

 

일단 Xamarin 메뉴얼을 보면 정확하게 개념을 확인 할수 있다.

 

아래 링크를 확인하자.

 

https://docs.microsoft.com/ko-kr/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical

대충 요약해 보자면, 계층적 탐색을 하고 Page를 Push 하게 되면 페이지 위에 페이지가 올라가는 구조이고, Page를 Pop하게 되면 최상단 페이지가 사라지게 된다.

 

 

 

1. App.xaml.cs 수정

 

App.xaml.cs의 페인 페이지를 수정한다.

NavigationPage

 

public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            


            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }


MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:MoveTest"

             x:Class="MoveTest.MainPage">


    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>


        <Entry Grid.Row="0" Grid.Column="0" Text="첫번째 페이지에요!"/>

        <Button Grid.Row="1" Grid.Column="0" 

                x:Name="btnMoveSecond" Clicked="BtnMoveSecond_Clicked" 

                Text="다음페이지 이동"/>


    </Grid>


</ContentPage>


MainPage.xaml.cs



//두번째 페이지로 이동

        private async void BtnMoveSecond_Clicked(object sender, EventArgs e)

        {

            //두번째 페이지 Push 계층적 탐색

            await Navigation.PushAsync(new SecondView());

        }



여기에서 중점으로 봐야할 부분은 Navigation.PushAsync() 이부분이다.

Push를 하고 있는 부분임.



SecondView.xaml


<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MoveTest.SecondView">

    <ContentPage.Content>


        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="50"/>

                <RowDefinition Height="50"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="150"/>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="150"/>

            </Grid.ColumnDefinitions>


            <Entry Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Text="두번째 페이지에요!"/>

            <Button Grid.Row="1" Grid.Column="0" 

                x:Name="btnBack" Clicked="BtnBack_Clicked" 

                Text="뒤로 이동"/>

            <Button Grid.Row="1" Grid.Column="2" 

                x:Name="btnMoveThird" Clicked="BtnMoveThird_Clicked" 

                Text="다음페이지 이동"/>


        </Grid>


    </ContentPage.Content>

</ContentPage>


SecondView.xaml.cs


async void BtnBack_Clicked(object sender, EventArgs e)

        {

            //첫번째 페이지로 이동하는것이기 때문에 Pop

            //첫번째 페이지 Pop 계층적 탐색

            await Navigation.PopAsync();

        }


        async void BtnMoveThird_Clicked(object sender, EventArgs e)

        {

            //세번째 페이지 이동 Push

            await Navigation.PushAsync(new ThirdView());

        } 


현재 페이지는 두번쨰 페이지이므로 첫번째 페이지로 Pop을 할 수 있고, 아니면 Push를 통해 세번째 페이지로 이동 한다.



ThirdView.xaml



<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MoveTest.ThirdView">

    <ContentPage.Content>


        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="50"/>

                <RowDefinition Height="50"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>


            <Entry Grid.Row="0" Grid.Column="0" Text="마지막 페이지에요!"/>

            <Button Grid.Row="1" Grid.Column="0" 

                x:Name="btnFirst" Clicked="BtnFirst_Clicked" 

                Text="처음으로"/>


        </Grid>

        

    </ContentPage.Content>

</ContentPage>


ThirdView.xaml.cs


async void BtnFirst_Clicked(object sender, EventArgs e)

        {

            //첫번째 Root로 이동

            await Navigation.PopToRootAsync();

        }


세번째에서 첫번째로 이동하기 위해서 PopToRootAsync() 함수를 호출한다.


Root페이지로 이동을 하게 되며 중간에 계층으로 쌓인 페이지들은 사라진다.



결과를 사진으로 확인해보자.




정상적으로 잘 동작한다!