자마린 스튜디오(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; 
        }
    }
}

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

볼 수 있습니다.

자마린 스튜디오(Xamarin Studio)에서 작성한 간단한 애니메이션 코드 입니다.

버튼이 회전하는 간단한 애니메이션 코드입니다. 재물로 버튼을 디자인하고 클릭하면 360도 회전하도록 되어 있습니다. 

<?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:DemoAnimation" x:Class="DemoAnimation.DemoAnimationPage">

    <Button x:Name="button"
            Text="Tap Me!"
            FontSize="Large"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Clicked="OnButtonClicked" />
    
</ContentPage>

using Xamarin.Forms;
using System; 

namespace DemoAnimation
{
    public partial class DemoAnimationPage : ContentPage
    {
        public DemoAnimationPage()
        {
            InitializeComponent();
        }

        void OnButtonClicked(object sender, EventArgs args)
        {
            button.RotateTo(360); 
        }
    }
}

자마린 스튜디오(Xamarin Studio)에서 변환(Translation) 사용하기

웹에서는 css를 사용해서 변환이나 애니메이션 효과를 줄 수 있습니다. 

iOS에도 다양한 코코아 기반의 변환과 애니메이션 효과를 줄 수 있습니다. 자마린에서는 재물에서 제공하는 선언된 태그를 사용해서 비슷하게 효과를 낼 수 있습니다. 

슬라이더를 변경하면 x축과 y축이 변경되는 것을 볼 수 있다.

<?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:DemoTranslation" x:Class="DemoTranslation.DemoTranslationPage">

    <StackLayout Padding="20, 10">
        <Frame x:Name="frame" 
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                OutlineColor="Accent">

            <Label Text="TEXT"
                    FontSize="Large" />
        </Frame>

        <Slider x:Name="xSlider"
                Minimum="-200"
                Maximum="200"
                Value="{Binding Source={x:Reference frame}, 
                    Path=TranslationX}" />
         <Label Text="{Binding Source={x:Reference xSlider},
             Path=Value,
             StringFormat='TranslationX = {0:F0}'}"
             HorizontalTextAlignment="Center" />
        <Slider x:Name="ySlider"
            Minimum="-200"
             Maximum="200"
             Value="{Binding Source={x:Reference frame},
             Path=TranslationY }" />
         <Label Text="{Binding Source={x:Reference ySlider},
             Path=Value,
             StringFormat='TranslationY = {0:F0}'}" />
    </StackLayout>
</ContentPage>