오늘 부터 짬나는대로 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

'Xamarin' 카테고리의 다른 글

(Xamarin Forms) 3.Layout  (0) 2017.07.05
(Xamarin Forms) 2.MasterDetailPage  (0) 2017.06.30
(Xamarin Forms) 1.ContentPage  (0) 2017.06.29
(Xamarin Forms) StartTimer  (0) 2017.06.22
(Xamarin) WiFi 접속하기  (0) 2017.06.18
(Xamarin.Android) splash screen 넣기  (0) 2017.06.17

+ Recent posts