(Xamarin Forms) 8.Basic Control - Label, Button, Entry, Editor 등..

이번 포스팅에서는 진작에 다뤘어야하는 기본? 컨트롤을 소개하고자합니다.

말이 기본이지 이 기본 컨트롤이 가장 많이 쓰이게되죠.

 

1. Label

문자를 표현해주는 컨트롤로 보통 항목의 의미를 표시할때 사용됩니다.

<Label Text="label" />

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

https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/label/

 

2. Button

말그대로 버튼입니다. 사용자가 터치나 클릭 했을때 이벤트를 통해 어떤 처리를 할수 있게합니다.

<Button Text="button" Clicked="Button_Clicked"/>

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

 

3. Entry

여기서 부터 좀 생소한데요 윈폼으로 생각하면 한줄만 입력 가능한 TextBox 입니다.

<Entry x:Name="entry" BackgroundColor="AliceBlue"/>

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

https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/entry/

 

4. Editer

익숙하면서도 생소한 단어같습니다.^^

Entry 랑 비슷한대 여러줄 입력이 가능한 컨트롤입니다.

<Editor x:Name="editor" VerticalOptions="FillAndExpand" BackgroundColor="AliceBlue" Text="Editor"/>

https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/editor/

 

5. BoxView

이미지나 사용자정의 요소를 표시할떄 사용되며 기본 크기는 40*40 입니다.

<BoxView Color="Green" />

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

 

6. DatePicker

날짜를 선택할수 있도록 하는 컨트롤 입니다.

<DatePicker Format="D" />

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

 

7. SearchBar

검색박스 컨트롤로 돋보기 모양의 아이콘과 하나로 되어있는 컨트롤입니다.

특정 문자열로 검색할때 쓰이는 것으로 검색시 이벤트를 통해 처리가 가능합니다.

<SearchBar x:Name="searchBar" SearchButtonPressed="searchBar_SearchButtonPressed" Text="SearchBar"/>

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

 

8. ProgressBar

진행상태를 보여주는 컨트롤입니다.

<ProgressBar x:Name="progressBar"/>

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

 

9. ActivityIndicator

이 컨트롤도 진행 중임을 보여주는 컨트롤로 Progress 와는 다르게 진행률이 아닌 단순히 진행중인 것만을 나타냅니다.

<ActivityIndicator x:Name="activityIndicator" Color ="#80000000" IsRunning="True"/>

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

 

* 예시 코드

BaseControlPage.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="XamarinFormsStudy.BaseControlPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="label" />
            <Label Text="ProgressBar" />
            <ProgressBar x:Name="progressBar"/>
            <Label Text="ActivityIndicator" />
            <ActivityIndicator x:Name="activityIndicator" Color ="#80000000" IsRunning="True"/>
            <SearchBar x:Name="searchBar" SearchButtonPressed="searchBar_SearchButtonPressed" Text="SearchBar"/>
            <BoxView Color="Green" />                
            <Label Text="DatePicker" />
            <DatePicker Format="D" />
            <Button Text="button" Clicked="Button_Clicked"/>
            <Entry x:Name="entry" BackgroundColor="AliceBlue" Text="Entry"/>
            <Editor x:Name="editor" VerticalOptions="FillAndExpand" BackgroundColor="AliceBlue" Text="Editor"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

BaseControlPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinFormsStudy
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class BaseControlPage : ContentPage
    {
        bool isActiveWindow = false;
        int buttonclick = 0;
        public BaseControlPage()
        {
            InitializeComponent();

            this.Padding = new Thickness(10, Device.OnPlatform(40, 20, 20), 10, 5);

            isActiveWindow = true;
            Device.StartTimer(TimeSpan.FromSeconds(0.1), TimerCallback);
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            // 버튼 클릭시 숫자를 증가하여 표시해줍니다.
            int i = buttonclick++;
            this.entry.Text = i.ToString();
            this.editor.Text += i.ToString() + Environment.NewLine;
        }
        bool TimerCallback()
        {
            progressBar.Progress += 0.01;
            return isActiveWindow || progressBar.Progress == 1;
        }

        private void searchBar_SearchButtonPressed(object sender, EventArgs e)
        {
            // 확인 팝업을 호출합니다.
            DisplayAlert("SearchBar",this.searchBar.Text + " Search...", "O", "X");
        }
    }
}

결과

UWP

Android

iOS

 

위에서 사용된 DisplayAlert 메서드는 자마린 폼에서 기본 제공해 주는것으로 확인 팝업을 호출합니다.

UWP

Android

iOS

 

참고

https://developer.xamarin.com/guides/xamarin-forms/user-interface/controls/views/

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