Xamarin.Forms 동작을 만드는 방법은 무엇입니까?

비헤이비어를 사용하면 하위 클래스로 분류하지 않고도 UI(사용자 인터페이스) 컨트롤에 기능을 추가할 수 있습니다. 동작은 파일 뒤에 코드로 작성되고 컨트롤에 추가됩니다. 컨트롤은 XAML 또는 코드입니다.

이 블로그에서는 Xamarin.Forms 동작에 대해 설명합니다. Xamarin.Forms 동작은 Behavior 또는 Behavior 클래스를 파생하여 생성됩니다. 여기서 T는 동작이 적용될 제어 유형입니다.

다음 프로세스에 따라 Xamarin.Forms 동작을 만듭니다. 먼저 클래스를 만들고 Behavior 또는 Behavior 클래스를 상속합니다. Behavior 클래스를 상속한 후 OnAttachedTo 및 OnDetachingFrom 메서드를 재정의합니다. OnAttachedTo 메서드는 필요한 설정을 수행하는 데 사용되고 OnDetachingFrom 메서드는 필요한 정리를 수행하는 데 사용됩니다. 이제 동작의 기능을 구현할 수 있습니다.

이 코드는 Entry 컨트롤의 동작 구조를 보여줍니다.

public class EntryControlBehavior : Behavior<entry>
{
    protected override void OnAttachedTo (Entry entry)
    {
        base.OnAttachedTo (entry);
        // Perform setup
    }
    protected override void OnDetachingFrom (Entry entry)
    {
        base.OnDetachingFrom (entry);
        // Perform clean up
    }
    // Behavior implementation
}
</entry> 

Xamarin.Forms의 동작을 사용하여 간단한 애플리케이션을 만들어 보겠습니다.

새 프로젝트 만들기 >> 플랫폼 간 선택 >> 모바일 앱(Xamarin.Forms)을 선택합니다.

프로젝트에 적절한 이름을 지정한 다음 확인을 클릭합니다.



이제 템플릿 및 플랫폼을 선택한 다음 확인 버튼을 클릭합니다.



이 단계에서는 비헤이비어를 생성하는 방법을 살펴보겠습니다. 동작을 쉽게 식별할 수 있도록 동작에 대한 새 폴더를 만듭니다. 해당 폴더를 마우스 오른쪽 버튼으로 클릭 >> 추가 클릭 >> 클래스를 클릭합니다.

자세히 보기: Xamarin.forms에서 ID 공급자를 사용한 Oauth 로그인 인증

Visual C# 항목 >> 클래스 선택 >> 클래스에 이름 지정 >> 추가 클릭



클래스를 만든 후 Behavior를 사용하여 해당 클래스를 상속하여 동작을 만들고 OnAttachedTo 및 OnDetachingFrom 메서드를 재정의합니다.

여기서는 다양한 엔터시 컨트롤과 피커 컨트롤을 생성하고 이러한 컨트롤에 동작을 적용합니다. 이메일, 생년월일, 휴대폰 번호 및 비밀번호에 대한 동작을 적용합니다.

이메일 ValidationBehavior.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Text.RegularExpressions;
using Xamarin.Forms;
namespace XamarinFormsBehaviors.Behaviors
{
    public class Emailvalidationbehavior:Behavior<entry>
    {
        const string emailre= @"^(?("")("".+?(?<!--\\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])@))" +
            @"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$";
        protected override void OnAttachedTo(Entry bindable)
        {
            bindable.TextChanged += Textchanged;
            base.OnAttachedTo(bindable);
        }
        private void Textchanged(object sender, TextChangedEventArgs e)
        {
            bool IsValid = false;
            IsValid= (Regex.IsMatch(e.NewTextValue, emailre, RegexOptions.IgnoreCase, TimeSpan.FromMilliseconds(250)));
            ((Entry)sender).TextColor = IsValid ? Color.Default : Color.Red;
        }
        protected override void OnDetachingFrom(Entry bindable)
        {
            bindable.TextChanged -= Textchanged;
            base.OnDetachingFrom(bindable);
        }
    }
}
</entry--></entry>

이 클래스에서는 이메일 유효성 검사를 위한 동작을 생성합니다. 이메일 형식과 주어진 정규 표현식과 일치합니다. 사용자가 유효하지 않은 전자 메일 형식을 입력하면 입력 된 텍스트를 빨간색으로 표시합니다.

DateValidationBehavior.cs
이 클래스는 생년월일 유효성 검사를 위한 동작을 생성합니다. 날짜 선택 컨트롤을 사용하고 최대 날짜를 현재 날짜로부터 100년으로 제한하고 최소 날짜를 1로 제한합니다. 사용자가 100년 전 날짜 또는 오늘부터 다가오는 날짜를 입력하면 Picker의 배경색이 빨간색으로 설정됩니다.

using System;
using Xamarin.Forms;
namespace XamarinFormsBehaviors.Behaviors
{
    class DatevalidationBehavior:Behavior<datepicker>
    {
        protected override void OnAttachedTo(DatePicker datePicker)
        {
            datePicker.DateSelected+=DatePickerdateSelected;
            base.OnAttachedTo(datePicker);
        }
        private void DatePickerdateSelected(object sender, DateChangedEventArgs e)
        {
            DateTime dateTime = e.NewDate;
            int year = DateTime.Now.Year;
            int selectedyear = dateTime.Year;
            int res = year - selectedyear;
            bool IsValid = false;
            if(res<=100 && res > 0)
            {
                IsValid = true;
            }
            ((DatePicker)sender).BackgroundColor = IsValid ? Color.Default : Color.Red;
        }
        protected override void OnDetachingFrom(DatePicker datePicker)
        {
            datePicker.DateSelected -= DatePickerdateSelected;
            base.OnDetachingFrom(datePicker);
        }
    }
}
</datepicker>

MobilenovalidationBehavior.cs

이 클래스는 휴대폰 번호에 대한 동작을 생성합니다. 사용자는 정수를 추가해야 합니다. 그렇지 않으면 텍스트가 빨간색으로 표시됩니다.

Xamarin 앱 개발 회사를 고용할 계획입니까? 귀하의 검색은 여기서 끝납니다.

using Xamarin.Forms;
namespace XamarinFormsBehaviors.Behaviors
{
    public class MobilenovalidationBehavior:Behavior<entry>
    {
        protected override void OnAttachedTo(Entry mnoentry)
        {
            mnoentry.TextChanged += MobilenoChanged;
            base.OnAttachedTo(mnoentry);
        }
        private void MobilenoChanged(object sender, TextChangedEventArgs e)
        {
            int num;
            bool Isvalid = int.TryParse(e.NewTextValue, out num);
            ((Entry)sender).TextColor = Isvalid ? Color.Default : Color.Red;
        }
        protected override void OnDetachingFrom(Entry mnoentry)
        {
            mnoentry.TextChanged -= MobilenoChanged;
            base.OnDetachingFrom(mnoentry);
        }
    }
}
</entry> 

PasswordvalidationBehavior.cs

이 클래스는 비밀번호 검증에 대한 동작을 생성하고, 암호의 길이는 8에서 15 사이 여야하며 숫자와 알파벳 값을 포함해야합니다. 그렇지 않으면 입력 된 텍스트의 색상이 빨간색으로 변경됩니다.

using System;
using System.Text.RegularExpressions;
using Xamarin.Forms;
namespace XamarinFormsBehaviors.Behaviors
{
    public class PasswordvalidationBehavior:Behavior<entry>
    {
        const string passwordreg = @"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,15}$";
        protected override void OnAttachedTo(Entry pwentry)
        {
            pwentry.TextChanged += Textchanged;
            base.OnAttachedTo(pwentry);
        }
        private void Textchanged(object sender, TextChangedEventArgs e)
        {
            bool isvalid = false;
            isvalid= (Regex.IsMatch(e.NewTextValue, passwordreg, RegexOptions.IgnoreCase, TimeSpan.FromMilliseconds(250)));
            ((Entry)sender).TextColor = isvalid ? Color.Default : Color.Red;
        }
        protected override void OnDetachingFrom(Entry pwentry)
        {

 pwentry.TextChanged -= Textchanged;
            base.OnDetachingFrom(pwentry);
        }
    }
}
</entry>

이제 XAML 파일에 동작을 추가하고, XAML 파일에 네임스페이스를 추가하고, 아래 코드에 추가된 대로 컨트롤에 동작을 추가합니다.

<!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="XamarinFormsBehaviors.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:b="clr-namespace:XamarinFormsBehaviors.Behaviors" xmlns:local="clr-namespace:XamarinFormsBehaviors" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <contentpage.resources>
        <resourcedictionary>

            <color x:key="LightGreenColor">#2FA999</color>
            <color x:key="BorderColor">#D8D8D8</color><style targettype="Label" type="text/css" x:key="LableStyle"><Setter Property="TextColor" Value="#666666" />
                <Setter Property="FontSize" Value="Large" /></style><style targettype="Frame" type="text/css" x:key="FrameStyle"><Setter Property="HasShadow" Value="False" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="CornerRadius" Value="5" />
                <Setter Property="BorderColor" Value="{StaticResource BorderColor}" /></style><style targettype="Entry" type="text/css" x:key="EntryStyle"><Setter Property="HeightRequest" Value="50"></Setter>
                <Setter Property="Margin" Value="5,0,0,0"></Setter>
                <Setter Property="PlaceholderColor" Value="LightGray"></Setter></style>
        </resourcedictionary>
    </contentpage.resources>
    <stacklayout>
        <label fontsize="Medium" horizontaloptions="Center" text="Registration" textcolor="Black" verticaloptions="Center">
        <stacklayout margin="5" padding="5">
            <label style="{StaticResource LableStyle}" text="Name">

                <entry placeholder="Enter Your Name Here.." style="{StaticResource EntryStyle}">

            <label style="{StaticResource LableStyle}" text="Email">

                <entry placeholder="Enter Your Email Here.." style="{StaticResource EntryStyle}">
                    <entry.behaviors>
                        <b:emailvalidationbehavior>
                    </b:emailvalidationbehavior></entry.behaviors>
                </entry>

            <label style="{StaticResource LableStyle}" text="Mobile Number">

                <entry placeholder="Enter Your Mobile Number.." style="{StaticResource EntryStyle}">
                    <entry.behaviors>
                        <b:mobilenovalidationbehavior>
                    </b:mobilenovalidationbehavior></entry.behaviors>
                </entry>

            <label style="{StaticResource LableStyle}" text="Select Date of Birth">

                <datepicker>
                <datepicker.behaviors>
                    <b:datevalidationbehavior>
                </b:datevalidationbehavior></datepicker.behaviors>
            </datepicker>

            <label style="{StaticResource LableStyle}" text="Password">

                <entry ispassword="True" placeholder="Enter Passsword Here..." style="{StaticResource EntryStyle}" x:name="Password">
                    <entry.behaviors>
                        <b:passwordvalidationbehavior>
                    </b:passwordvalidationbehavior></entry.behaviors>
                </entry><button backgroundcolor="{StaticResource LightGreenColor}" borderradius="6" margin="100,20" text="Sign Up" textcolor="White" widthrequest="100"></button></label></label></label></label></entry></label></stacklayout></label></stacklayout></contentpage>

그림 : 메인 페이지

결론

동작은 UI에 더 많은 기능을 추가하는 데 사용됩니다. 동작은 코드 숨김 파일로 작성되고 XAML 파일에 추가됩니다. 이 블로그에서는 Xamarin.Forms에서 동작을 구현하고 Xamarin.Forms 동작으로 애플리케이션을 만드는 방법을 살펴보았습니다. 우리는 입력 및 피커 컨트롤을위한 동작을 만들었고 클래스를 구축하고 해당 클래스에 동작을 상속 한 다음 이러한 동작을 XAML 파일에 추가했습니다.