(Xamarin.Forms) Button 에 Animation 주기

Animation Text 에 이어 Animation Button 입니다.

AnimationButton 으로 명명을 하지 않은 이유는 이쪽은 앞으로 여러가지 기능이 추가될 예정이기 때문입니다.

.NET Standard 에 클래스 추가후 아래와같이 코딩합니다.

버튼이 눌렸을때 살짝 작아졌다 다시 원래 크기로 돌아오는 에니메이션을 적용한 내용입니다.

using Xamarin.Forms;

namespace Test.Cntrol
{
    public class CustomButton : Button
    {
        public CustomButton() : base()
        {
            const int animationTime = 50;

            Clicked += async (sender, e) =>
            {
                var btn = (CustomButton)sender;
                await btn.ScaleTo(0.8, animationTime, Easing.SinOut);
                await btn.ScaleTo(1, animationTime, Easing.SinIn);
            };
        }
    }
}

 

 

이제 화면 Page 에서 컨트롤을 위치시킵니다.

<?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:Text"
             xmlns:cntrol="clr-namespace:Text.Cntrol"
             x:Class="Text.MainPage">

    <StackLayout Spacing="5">
        <Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" />
        <cntrol:AnimationText Text="Welcome to Xamarin.Forms" IsRunning="True" TextColor="Blue" HorizontalOptions="Center" Margin="0,15,0,15"/>
        <cntrol:CustomButton Text="Custom Button" WidthRequest="130" HeightRequest="40" HorizontalOptions="Center"
                             BackgroundColor="#81BE1D" CornerRadius="3" TextColor="White"/>
       
    </StackLayout>

</ContentPage>

 

아래는 결과 화면입니다.