[C#/MAUI/.NET6] Trigger 엘리먼트 : EnterActions/ExitActions 속성에서 TriggerAction<T> 객체 사용하기

TestProject.zip

0.15MB

▶ FadeTriggerAction.cs

namespace TestProject;

/// <summary>
/// 페이드 트리거 액션
/// </summary>
public class FadeTriggerAction : TriggerAction<VisualElement>
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 페이드 인 여부 - FadeIn

    /// <summary>
    /// 페이드 인 여부
    /// </summary>
    public bool FadeIn { get; set; }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 호출하기 - Invoke(element)

    /// <summary>
    /// 호출하기
    /// </summary>
    /// <param name="element">엘리먼트</param>
    protected override void Invoke(VisualElement element)
    {
        element.Animate
        (
            "FadeTriggerAction",
            new Animation
            (
                (d) =>
                {
                    double value = FadeIn ? 1 - d : d;

                    element.BackgroundColor = Color.FromRgba(value, value, 1, 0.5);
                }
            ),
            length : 500,
            easing : Easing.Linear
        );
    }

    #endregion
}

 

728x90

 

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Entry WidthRequest="200">
            <Entry.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Trigger.EnterActions>
                        <local:FadeTriggerAction FadeIn="True" />
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <local:FadeTriggerAction FadeIn="False" />
                    </Trigger.ExitActions>
                </Trigger>
            </Entry.Triggers>
        </Entry>
        <Entry
            Margin="0,10,0,0"
            WidthRequest="200">
            <Entry.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Trigger.EnterActions>
                        <local:FadeTriggerAction FadeIn="True" />
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <local:FadeTriggerAction FadeIn="False" />
                    </Trigger.ExitActions>
                </Trigger>
            </Entry.Triggers>
        </Entry>
    </StackLayout>
</ContentPage>