개발노트

18. [.NET MAUI] 트리거(Trigger) 사용하기 본문

앱 개발/.NET MAUI

18. [.NET MAUI] 트리거(Trigger) 사용하기

mroh1226 2022. 5. 19. 15:20
반응형

트리거 종류

1) 속성 트리거 : Control의 Property를 이용한 기본적인 Trigger

2) 스타일 트리거: Style에 Control에 대한 Trigger를 정의하여 모든 Control에 Trigger를 적용할 때 사용

3) 데이터 트리거: Data를 바인딩하여 Trigger를 발동시킬때 사용

4) 이벤트 트리거: TriggerAction을 Class에 따로 정의하여 특정 Event가 발생했을 때 TriggerAction을 발동시킬 때 사용

5) 다중 트리거: Trigger가 발동하는 조건이 하나 이상일 때 사용

6) 상태 트리거: IsActive 속성이 변경될 때 VisualState를 변경하는 Trigger가 필요할 때 사용

7) 적응 트리거: 창이 지정된 높이 또는 너비가되면 VisualState를 변경하는 Trigger가 필요할 때 사용

8) 디바이스 상태 트리거: 앱이 실행되는 디바이스 플랫폼에 따라 VisualState를 변경하는 Trigger가 필요할 때 사용

9) 방향 상태 트리거: 디바이스의 방향이 가로 세로로 변할 때 VisualState를 변경하는 Trigger가 필요할 때 사용

 

 

- 참조링크: https://docs.microsoft.com/ko-kr/dotnet/maui/fundamentals/triggers

 

트리거 - .NET MAUI

트리거를 사용하면 XAML에서 이벤트 또는 속성 변경에 따라 컨트롤의 모양을 변경하는 작업을 선언적으로 표현할 수 있습니다.

docs.microsoft.com

 

*트리거의 종류가 너무 많고 자주 사용될 것 같은 트리거 1) ~ 5) 만 소개하겠습니다.

1. 속성 트리거

: 컨트롤의 속성에 따라 발동하는 Trigger

 

1) Trigger를 줄 Control을 생성한다. (Control로 <Entry>를 사용하겠습니다.)

2) <Entry> 안에 <Entry.Triggers>을 생성하고 그 안에 <Trigger/>에 Entry의 Property를 정한다.

3) 그 Property의 Value를 정하여 Trigger가 발동하기 위한 조건을 만들어준다.

4) Trigger가 발동했을 때 적용할 Property와 Property Value를 <Setter/> 안에 지정한다.

Page31.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Page31"
             Title="Page31"
             BackgroundColor="White">
    
    <NavigationPage.TitleView>
        <Label Text="Page31"/>
    </NavigationPage.TitleView>
    
    <StackLayout>
        <Label Text="한글을 만드신 왕의 이름은?"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        
        <Entry Placeholder="Enter Name">
            <Entry.Triggers>
                <Trigger TargetType="Entry" Property="IsFocused" Value="True">
                    <Setter Property="BackgroundColor" Value="Yellow"/>
                </Trigger>
            </Entry.Triggers>
        </Entry>
        
    </StackLayout>
</ContentPage>

- Entry의 Property IsFocused가 True 일 때 Trigger가 발동하며, Entry의 BakgroundColor가 Yellow로 바뀐다.

2. 스타일 트리거

: Resources의 Style로 지정된 컨트롤에 모두 적용되는 Trigger

 

1) <ContentPage.Resources>에 <Style/>을 작성한다. TargetType으로 지정한 Control이 트리거가 적용될 대상이 된다.

2) <Style.Triggers> 안에 <Trigger>을 생성하고 트리거를 발생시킬 Control의 Property와, Property의 Value를 정한다.

3) Trigger가 발동하기 위한 조건을 만들어졌다면, Trigger가 발동했을 때 적용할 Property와 Property Value를 <Setter/> 안에 지정한다.

Page32.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Page32"
             Title="Page32"
             BackgroundColor="White">
    
    <NavigationPage.TitleView>
        <Label Text="Page32"/>
    </NavigationPage.TitleView>

    <ContentPage.Resources>
        <Style TargetType="Entry">
            <Style.Triggers>
                <Trigger TargetType="Entry" Property="IsFocused" Value="True">
                    <Setter Property="BackgroundColor" Value="LightCoral"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ContentPage.Resources>
    
    <StackLayout>
        <Label Text="What is your Job?"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        <Entry Placeholder="First Job"/>
        <Entry Placeholder="Secound Job"/>
        <Entry Placeholder="Third Job"/>
    </StackLayout>
</ContentPage>

- Style의 TargetType으로 지정된 모든 Control은 작성된 <Trigger>의 조건에 의해 Property가 Setter 된다.

 

3. 데이터 트리거

: 데이터 값에 따라 발동하는 Trigger

 

1) Trigger를 줄 Control을 생성한다. (Control로 <Button>를 사용하겠습니다.)

2) <Button> 안에 <Button.Triggers>을 생성하고 그 안에 <DataTrigger/>에 TargetType를 Button으로 설정한다.

3) 트리거를 발동시킬 값을 Binding에 연결하고 Value로

3) 그 Property의 Value를 정하여 Trigger가 발동하기 위한 조건을 만들어준다.

4) Trigger가 발동했을 때 적용할 Property와 Property Value를 <Setter/> 안에 지정한다.

Page31.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Page31"
             Title="Page31"
             BackgroundColor="White">
    
    <NavigationPage.TitleView>
        <Label Text="Page31"/>
    </NavigationPage.TitleView>
    
    <StackLayout>
        <Label Text="한글을 만드신 왕의 이름은?"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        
        <Entry x:Name="entry" Placeholder="Enter Name">
            <Entry.Triggers>
                <Trigger TargetType="Entry" Property="IsFocused" Value="True">
                    <Setter Property="BackgroundColor" Value="Yellow"/>
                </Trigger>
            </Entry.Triggers>
        </Entry>

        <Button IsEnabled="False">
            <Button.Triggers>
                <DataTrigger TargetType="Button" Binding ="{Binding Source={Reference entry},Path=Text}" Value="sejong">
                    <Setter Property="IsEnabled" Value="True"/>
                    <Setter Property="Text" Value="정답입니다."/>
                </DataTrigger>
            </Button.Triggers>
        </Button>

    </StackLayout>
</ContentPage>

- <DataTrigger>에 의해 entry의 Text값이 sejong 이면 Trigger가 발동하여 Button의 IsEnabled가 True로 바뀐다.

 

4. 이벤트 트리거

: 이벤트가 발생하면 발동되는 Trigger

 

1) TriggerAction<T> 을 상속받는 Class를 생성하고 override로 Invoke를 재정의한다.

2) xaml 네임스페이스에 1)에서 생성한 Class가 있는 디렉토리를 추가한다.

3) 트리거를 발동시킬 Control에 <EventTrigger>로 Trigger가 발동하기 위한 Event = "이벤트명" 을 넣어준다.

3) 네임스페이스로 등록한 값과 Class를 추가해준다.

 

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

namespace AppMaui.Services
{
    class ButtonEventTrigger : TriggerAction<Button>
    {
        protected override void Invoke(Button button)
        {
            App.Current.MainPage.DisplayAlert("EventTrigger", "정답입니다.", "확인");
        }

    }
}

 

Page31.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Page31"
             xmlns:local="clr-namespace:AppMaui.Services"
             Title="Page31"
             BackgroundColor="White">
    
    <NavigationPage.TitleView>
        <Label Text="Page31"/>
    </NavigationPage.TitleView>

    <StackLayout>
   
        <Button>
            <Button.Triggers>
                <EventTrigger Event="Clicked">
                    <local:ButtonEventTrigger/>
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </StackLayout>
</ContentPage>

- Button을 클릭하면 ButtonEventTrigger.cs에 있는 Invoke(Button button)가 실행되고 알람창이 나온다.

 

5. 다중 트리거

: 하나 이상의 조건을 설정하여, 조건을 모두 충족시킬 때 Trigger 발동

 

1) Trigger를 줄 Control을 생성한다. (Control로 <Button>를 사용하겠습니다.)

2) <Button> 안에 <Button.Triggers>을 생성하고 그 안에 <MultiTrigger/>에 TargetType를 Button으로 설정한다.

3) 트리거를 발동시킬 값을 <BindingCondition>의 Binding에 연결하고 Value로 조건을 완성시킨다.

4) 다중으로 <BindingCondition>를 생성한다.

4) <BindingCondition> 조건을 모두 만족했을 때 Trigger가 발동하고 이때 적용할 Property와 Property Value를 <Setter/> 안에 지정한다.

 

Page32.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Page32"
             Title="Page32"
             BackgroundColor="White">
    
    <NavigationPage.TitleView>
        <Label Text="Page32"/>
    </NavigationPage.TitleView>

    <StackLayout>
        <Label Text="What is your Job?"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        <Entry x:Name="entry1" Placeholder="First Job" Text=""/>
        <Entry x:Name="entry2" Placeholder="Secound Job" Text=""/>
        <Entry x:Name="entry3" Placeholder="Third Job" Text=""/>
        
        <Button IsEnabled="False">
            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding Source={x:Reference entry1},Path=Text}" Value="A"/>
                        <BindingCondition Binding="{Binding Source={x:Reference entry2},Path=Text}" Value="B"/>
                        <BindingCondition Binding="{Binding Source={x:Reference entry3},Path=Text}" Value="C"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="IsEnabled" Value="True" />
                    <Setter Property="BackgroundColor" Value="Red"/>
                    <Setter Property="Text" Value="MultiTrigger 발동"/>
                </MultiTrigger>
            </Button.Triggers>
        </Button>
    </StackLayout>
</ContentPage>

- entry1,2,3 의 값이 각각 A,B,C 일때 Button을 누를 수 있게되고, 배경색이 Red로 바뀌며, Text 값이 바뀐다.

 

응용된 Trigger 사용화면

반응형

'앱 개발 > .NET MAUI' 카테고리의 다른 글

20. [.NET MAUI] SkiaSharp로 Lottie 사용하기(애니메이션 효과)  (0) 2022.07.26
19. [.NET MAUI] Shell 사용하여 다른 Page에 값 넘기기 (With CollectionView)  (0) 2022.05.30
17. [.NET MAUI] Tabbed Page 만들기  (0) 2022.04.27
16. [.NET MAUI] SecureStorage 사용하기(기기에 Key 값 저장)  (0) 2022.04.26
15. [.NET MAUI] SwipeView 만들기(with CollectionView)  (0) 2022.04.22
'앱 개발/.NET MAUI' Related Articles more
Comments