(Xamarin Forms) 1.ContentPage

오늘 부터 짬나는대로 Xamarin Forms 기초 내용부터 포스팅할 예정입니다.

오늘은 그 첫번째 시간으로 ContentPage 에 대해서 알아보겠습니다.

가장 기본인 화면뷰 로써 ContentPage 에는 어떤 컨트롤이든 위치시킬수 있습니다.

아래는 ContentPage Class 의 모습입니다.

    public class ContentPage : TemplatedPage
    {
        //
        // 요약:
        //     Backing store for the Xamarin.Forms.ContentPage.Content property.
        //
        // 설명:
        //     To be added.
        public static readonly BindableProperty ContentProperty;

        public ContentPage();

        //
        // 요약:
        //     Gets or sets the view that contains the content of the Page.
        public View Content { get; set; }

        //
        // 요약:
        //     Method that is called when the binding context changes.
        //
        // 설명:
        //     To be added.
        protected override void OnBindingContextChanged();
    }

 

크로스플랫폼 솔루션을 구성하면 기본적으로 MainPage 를 호출하도록 되어있는데요

        public App()
        {
            InitializeComponent();

            MainPage = new XamarinFormsStudy.MainPage();
        }

이 MainPage 가 ContentPage 로 구현되어있습니다.

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

라벨을 하나 추가하려면 아래처럼 Content 에 라벨을 하나 만들어 주면 됩니다.

        public MainPage()
        {
            InitializeComponent();
            Content = new Label
            {
                Text = "Hello, Forms!",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
            };
        }

결과

 

라벨만을 가지고 화면을 구성하는 경우는 드물기 때문에

아래처럼 윈폼의 Panel 과 같은 역할을 하는 Layout 을 먼저 선언하고

그안에 라벨을 넣어주는게 정석? 입니다.

        public MainPage()
        {
            InitializeComponent();

            Content = new StackLayout
            {
                VerticalOptions = LayoutOptions.CenterAndExpand,
                Children =
                {
                    new Label{
                                Text = "Hello, Forms!",
                                VerticalOptions = LayoutOptions.CenterAndExpand,
                                HorizontalOptions = LayoutOptions.CenterAndExpand,
                    }
                }
            };
        }

결과 화면은 위 결과화면과 동일합니다.

또한, XAML 형식으로도 화면정의가 가능합니다.

위 코드 내용을 모두 지우고 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:XamarinFormsStudy"
             x:Class="XamarinFormsStudy.MainPage">
    <StackLayout VerticalOptions="Center" >
        <Label Text="Hello, Forms!"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

 

참고 :

https://developer.xamarin.com/api/type/Xamarin.Forms.ContentPage/

https://www.youtube.com/watch?v=NP4Gea1j7Ig

GitHub > https://github.com/knagjun/XamarinForms