자마린 스튜디오(Xamarin Studio)에서 간단한 네비게이션 코드 구현 데모 입니다.

iOS에서는 모달리스(아래에서 위로 올라오는)형태로 뷰를 전환할 때 present메서드를 호출해서 처리합니다. 좌우로 네비게이션을 하는 경우 네비게이션 컨트롤러를 사용해서 pushViewController(), popViewController()메서드를 사용해서 처리합니다. 

자마린에도 비슷한 처리를 하는 메서드가 구현되어 있습니다.

프로젝트 생성시에 작업한 페이지에 아래와 같이 코드를 추가합니다. 형광색으로 표시된 부분이 추가된 코드 블럭입니다. 

using Xamarin.Forms;

namespace DemoPageNavi
{
    public partial class DemoPageNaviPage : ContentPage
    {
        public DemoPageNaviPage()
        {
            Title = "Main Page";

            Button gotoModelessButton = new Button
            {
                Text = "Go to Modeless Page",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };
            gotoModelessButton.Clicked += async (sender, args) =>
            {
                await Navigation.PushAsync(new ModelessPage());
            };

            Button gotoModalButton = new Button
            {
                Text = "Go to Modal Page", 
                HorizontalOptions = LayoutOptions.Center, 
                VerticalOptions = LayoutOptions.CenterAndExpand
                                               
            };
            gotoModalButton.Clicked += async (sender, args) =>
            {
                await Navigation.PushModalAsync(new ModalPage());
            };

            Content = new StackLayout
            {
                Children =
                {
                    gotoModelessButton,
                    gotoModalButton
                }
            };
        }
    }
}

(Model페이지에 라벨을 추가)

<?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="DemoPageNavi.ModalPage">
    <ContentPage.Content>
        <Label Text="Modal Page" />
    </ContentPage.Content>
</ContentPage>

(Modeless페이지에 라벨을 추가)

<?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="DemoPageNavi.ModelessPage">
    <ContentPage.Content>
        <Label Text="Modeless Page" /> 
    </ContentPage.Content>
</ContentPage>

App.cs에 아래의 코드가 추가되어 있어야 합니다.

using Xamarin.Forms;

namespace DemoPageNavi
{
    public partial class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new DemoPageNaviPage()); 
        }

상단에 네비게이션바가 생성되고 좌우로 네비게이션이 됩니다. 

두번째 버튼을 클릭하면 하단에서 위로 올라오는 것을 볼 수 있습니다. 

모달리스 페이지에 아래의 코드를 추가한다.

namespace DemoPageNavi
{
    public partial class ModelessPage : ContentPage
    {
        public ModelessPage()
        {
            Title = "Modeless Page";

            Button goBackButton = new Button
            {
                Text = "Back to Main",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
            goBackButton.Clicked += async (sender, args) =>
            {
                await Navigation.PopAsync();
            };

            Content = goBackButton; 
        }
    }
}

모달페이지에 아래의 코드를 추가한다. 일종의 백버튼을 만들어서 원래 페이지로 돌아가도록 유도한다.

using System.Collections.Generic;

using Xamarin.Forms;

namespace DemoPageNavi
{
    public partial class ModalPage : ContentPage
    {
        public ModalPage()
        {
            Title = "Modal Page";

            Button goBackButton = new Button
            {
                Text = "Back to Main",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };

            goBackButton.Clicked += async (sender, args) =>
            {
                await Navigation.PopModalAsync();
            };

            Content = goBackButton;
        }    
    }
}

이번에는 네비게이션바의 색상을 변경하는 데모 코드입니다. 아래의 실행을 보면 상단의 네비게이션바의 색상이 청색으로 글자색은 핑크로 변경된 것을 볼 수 있습니다. 

using Xamarin.Forms;

namespace DemoPageNavi
{
    public partial class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new DemoPageNaviPage())
            {
                BarBackgroundColor = Color.Blue, 
                BarTextColor = Color.Pink 
            };
        }

이번에는 모달리스에서 백버튼을 처리하는 코드입니다. 다음과 같이 하면 백버튼이 숨겨지도록 할 수 있습니다.

<?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="DemoPageNavi.ModelessPage"
         NavigationPage.HasBackButton="False">
    <ContentPage.Content>
        <Label Text="Modeless Page" /> 
    </ContentPage.Content>
</ContentPage>

재물이나 코드에서 한군데만 작업하면 됩니다. 양쪽이 필요하지 않고 편한데로 추가하면 됩니다.

using Xamarin.Forms;

namespace DemoPageNavi
{
    public partial class ModelessPage : ContentPage
    {
        public ModelessPage()
        {
            Title = "Modeless Page";
            //백버튼을 추가하는 코드 
            NavigationPage.SetHasBackButton(this, false); 

모달리스에서 백버튼을 추가해서 사용하는 데모 코드 입니다.

기존에 혹시 재물에 추가했던 백버튼 속성이 있으면 제거합니다.

<?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="DemoPageNavi.ModelessPage">
    <ContentPage.Content>
        <Label Text="Modeless Page" /> 
    </ContentPage.Content>
</ContentPage>

using Xamarin.Forms;

namespace DemoPageNavi
{
    public partial class ModelessPage : ContentPage
    {
        public ModelessPage()
        {
            Title = "Modeless Page";
            //백버튼을 추가하는 코드 
            NavigationPage.SetHasBackButton(this, true); 
            NavigationPage.SetBackButtonTitle(this, "go back");
            //네비게이션바가 보이도록 코딩 
            NavigationPage.SetHasNavigationBar(this, true);


            Button goBackButton = new Button
            {
                Text = "Back to Main",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
            goBackButton.Clicked += async (sender, args) =>
            {
                await Navigation.PopAsync();
            };

            Content = goBackButton; 
        }
    }
}

실행하면 모달리스 버튼을 클릭했을 때 새로운 페이지에서 백버튼이 추가된 것을

볼 수 있습니다.