TRIGGER Archives - 3 중 2 번째 페이지

[C#/WPF] TextBlock 엘리먼트 : DoubleAnimation 객체를 사용해 텍스트 투명도 변경 애니메이션 만들기

■ TextBlock 엘리먼트에서 DoubleAnimation 객체를 사용해 텍스트 투명도를 변경하는 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <TextBlock Name="textBlock"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Foreground="Maroon"
            FontSize="48"
            FontWeight="Bold">
            This is fading text
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="textBlock"
                                Storyboard.TargetProperty="(TextBlock.Opacity)"
                                Duration="00:00:05"
                                From="1.0"
                                To="0.0"
                                AutoReverse="True"
                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Maroon"

FontSize="48"

FontWeight="Bold">

This is fading text

<TextBlock.Triggers>

<DoubleAnimation

Storyboard.TargetName="textBlock"

Storyboard.TargetProperty="(TextBlock.Opacity)"

Duration="00:00:05"

From="1.0"

To="0.0"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

</Grid>

</Window>

TestProject.zip

[C#/WPF] TextBlock 엘리먼트 : DoubleAnimation 객체를 사용해 텍스트 너비 변경 애니메이션 만들기

■ TextBlock 엘리먼트에서 DoubleAnimation 객체를 사용해 텍스트 너비를 변경하는 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <TextBlock Name="textBlock"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Foreground="Maroon"
            Width="480"
            FontSize="48"
            FontWeight="Bold">
            This is wiped text
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="textBlock"
                                Storyboard.TargetProperty="(TextBlock.Width)"
                                Duration="0:0:10"
                                To="0.0"
                                AutoReverse="True"
                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Maroon"

Width="480"

FontSize="48"

FontWeight="Bold">

This is wiped text

<TextBlock.Triggers>

<DoubleAnimation

Storyboard.TargetName="textBlock"

Storyboard.TargetProperty="(TextBlock.Width)"

Duration="0:0:10"

To="0.0"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

</Grid>

</Window>

TestProject.zip

[C#/MAUI/.NET6] Trigger 엘리먼트 사용하기

■ Trigger 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="이름을 입력해 주시기 바랍니다.">
            <Entry.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Setter Property="FontAttributes" Value="Bold" />
                    <Setter Property="TextColor"      Value="Blue" />
                </Trigger>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="False">
                    <Setter Property="FontAttributes" Value="None"  />
                    <Setter Property="TextColor"      Value="Black" />
                </Trigger>
            </Entry.Triggers>
        </Entry>
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="장소를 입력해 주시기 바랍니다.">
            <Entry.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Setter Property="FontAttributes" Value="Bold" />
                    <Setter Property="TextColor"      Value="Blue" />
                </Trigger>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="False">
                    <Setter Property="FontAttributes" Value="None"  />
                    <Setter Property="TextColor"      Value="Black" />
                </Trigger>
            </Entry.Triggers>
        </Entry>
    </StackLayout>
</ContentPage>

<?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">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="이름을 입력해 주시기 바랍니다.">

<Entry.Triggers>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="True">

</Trigger>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="False">

</Trigger>

</Entry.Triggers>

</Entry>

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="장소를 입력해 주시기 바랍니다.">

<Entry.Triggers>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="True">

</Trigger>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="False">

</Trigger>

</Entry.Triggers>

</Entry>

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] OrientationStateTrigger 엘리먼트 사용하기

■ OrientationStateTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Portrait">
                <VisualState.StateTriggers>
                    <OrientationStateTrigger Orientation="Portrait" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Red" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Landscape">
                <VisualState.StateTriggers>
                    <OrientationStateTrigger Orientation="Landscape" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Blue" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ContentPage>

<?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">

<VisualStateManager.VisualStateGroups>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] DeviceStateTrigger 엘리먼트 사용하기

■ DeviceStateTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <Frame
        HorizontalOptions="Center"
        VerticalOptions="Center"
        HeightRequest="100"
        WidthRequest="100">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Android">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="Android" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Frame>
</ContentPage>

<?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">

<Frame

HorizontalOptions="Center"

VerticalOptions="Center"

HeightRequest="100"

WidthRequest="100">

<VisualStateManager.VisualStateGroups>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Frame>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] CompareStateTrigger 엘리먼트 사용하기

■ CompareStateTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup>
                        <VisualState x:Name="Checked">
                            <VisualState.StateTriggers>
                                <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}" Value="True" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Orange" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.StateTriggers>
                                <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}" Value="False" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <Grid>
        <Frame
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Margin="24"
            CornerRadius="12"
            BackgroundColor="White">
            <StackLayout Orientation="Horizontal">
                <CheckBox x:Name="checkBox"
                    VerticalOptions="Center" />
                <Label
                    VerticalOptions="Center"
                    Text="그리드 배경색 변경" />
            </StackLayout>
        </Frame>
    </Grid>
</ContentPage>

<?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">

<ContentPage.Resources>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateGroupList>

</Setter>

</Style>

</ContentPage.Resources>

<Grid>

<Frame

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="24"

CornerRadius="12"

BackgroundColor="White">

<CheckBox x:Name="checkBox"

VerticalOptions="Center" />

<Label

VerticalOptions="Center"

Text="그리드 배경색 변경" />

</StackLayout>

</Frame>

</Grid>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] AdaptiveTrigger 엘리먼트 사용하기

■ AdaptiveTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <ContentPage.Resources>
        <Style TargetType="StackLayout">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup>
                        <VisualState x:Name="Vertical">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="Orientation" Value="Vertical" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Horizontal">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="330" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="Orientation" Value="Horizontal" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <BoxView
            Margin="10"
            WidthRequest="100"
            HeightRequest="100"
            Color="Red" />
        <BoxView
            Margin="10"
            WidthRequest="100"
            HeightRequest="100"
            Color="Green" />
        <BoxView
            Margin="10"
            WidthRequest="100"
            HeightRequest="100"
            Color="Blue" />
    </StackLayout>
</ContentPage>

<?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">

<ContentPage.Resources>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateGroupList>

</Setter>

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

<BoxView

Margin="10"

WidthRequest="100"

HeightRequest="100"

Color="Red" />

<BoxView

Margin="10"

WidthRequest="100"

HeightRequest="100"

Color="Green" />

<BoxView

Margin="10"

WidthRequest="100"

HeightRequest="100"

Color="Blue" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] StateTrigger 엘리먼트 사용하기

■ StateTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ InverseBooleanValueConverter.cs


using System.Globalization;

namespace TestProject;

/// <summary>
/// 불린 값 반전 변환자
/// </summary>
public class InverseBooleanValueConverter : IValueConverter
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 변환하기 - Convert(sourceValue, targetType, parameter, cultureInfo)

    /// <summary>
    /// 변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="cultureInfo">문화 정보</param>
    /// <returns>변환 값</returns>
    public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo)
    {
        if(sourceValue is bool?)
        {
            bool? boolNullable = (bool?)sourceValue;

            return boolNullable.HasValue ? !boolNullable.Value : true;
        }

        if(sourceValue.GetType() == typeof(bool))
        {
            return !((bool)sourceValue);
        }

        return true;
    }

    #endregion
    #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo)

    /// <summary>
    /// 역변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="cultureInfo">문화 정보</param>
    /// <returns>역변환 값</returns>
    public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo)
    {
        if(sourceValue == null)
        {
            return true;
        }

        if(sourceValue is bool?)
        {
            bool? boolNullable = (bool?)sourceValue;

            return boolNullable.HasValue ? !boolNullable.Value : true;
        }

        if(sourceValue.GetType() == typeof(bool))
        {
            return !((bool)sourceValue);
        }

        return true;
    }

    #endregion
}

using System.Globalization;

namespace TestProject;

/// <summary>

/// 불린 값 반전 변환자

/// </summary>

public class InverseBooleanValueConverter : IValueConverter

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 변환하기 - Convert(sourceValue, targetType, parameter, cultureInfo)

/// <summary>

/// 변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="cultureInfo">문화 정보</param>

/// <returns>변환 값</returns>

public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo)

{

if(sourceValue is bool?)

{

bool? boolNullable = (bool?)sourceValue;

return boolNullable.HasValue ? !boolNullable.Value : true;

}

if(sourceValue.GetType() == typeof(bool))

{

return !((bool)sourceValue);

}

return true;

}

#endregion

#region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo)

/// <summary>

/// 역변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="cultureInfo">문화 정보</param>

/// <returns>역변환 값</returns>

public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo)

{

if(sourceValue == null)

{

return true;

}

if(sourceValue is bool?)

{

bool? boolNullable = (bool?)sourceValue;

return boolNullable.HasValue ? !boolNullable.Value : true;

}

if(sourceValue.GetType() == typeof(bool))

{

return !((bool)sourceValue);

}

return true;

}

#endregion

}

▶ 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">
    <ContentPage.Resources>
        <local:InverseBooleanValueConverter x:Key="InverseBooleanValueConverterKey" />
        <Style TargetType="BoxView">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup>
                        <VisualState x:Name="Checked">
                            <VisualState.StateTriggers>
                                <StateTrigger IsActive="{Binding Source={x:Reference switch}, Path=IsToggled}" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="Color" Value="Orange" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.StateTriggers>
                                <StateTrigger IsActive="{Binding Source={x:Reference switch},
                                    Path=IsToggled, Converter={StaticResource InverseBooleanValueConverterKey}}" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="Color" Value="Yellow" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Switch x:Name="switch"
            HorizontalOptions="Center" />
        <BoxView
            HorizontalOptions="Center"
            Margin="0,10,0,0"
            WidthRequest="300"
            HeightRequest="300" />
    </StackLayout>
</ContentPage>

<?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">

<ContentPage.Resources>

<local:InverseBooleanValueConverter x:Key="InverseBooleanValueConverterKey" />

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.StateTriggers>

<StateTrigger IsActive="{Binding Source={x:Reference switch},

Path=IsToggled, Converter={StaticResource InverseBooleanValueConverterKey}}" />

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateGroupList>

</Setter>

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

<Switch x:Name="switch"

HorizontalOptions="Center" />

<BoxView

HorizontalOptions="Center"

Margin="0,10,0,0"

WidthRequest="300"

HeightRequest="300" />

</StackLayout>

</ContentPage>

TestProject.zip

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

■ Trigger 엘리먼트의 EnterActions/ExitActions 속성에서 TriggerAction<T> 객체를 사용하는 방법을 보여준다. ▶ 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
}

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

}

▶ 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>

<?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.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>

TestProject.zip

[C#/MAUI/.NET6] MultiTrigger 엘리먼트 사용하기

■ MultiTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Entry x:Name="emailEntry"
            WidthRequest="300"
            Text="" />
        <Entry x:Name="phoneEntry"
            Margin="0,10,0,0"
            WidthRequest="300"
            Text="" />
        <Button
            Margin="0,10,0,0"
            WidthRequest="100"
            Text="Save">
            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding Source={x:Reference emailEntry}, Path=Text.Length}" Value="0" />
                        <BindingCondition Binding="{Binding Source={x:Reference phoneEntry}, Path=Text.Length}" Value="0" />
                    </MultiTrigger.Conditions>
                    <Setter Property="IsEnabled" Value="False" />
                </MultiTrigger>
            </Button.Triggers>
        </Button>
    </StackLayout>
</ContentPage>

<?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">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

<Entry x:Name="emailEntry"

WidthRequest="300"

Text="" />

<Entry x:Name="phoneEntry"

Margin="0,10,0,0"

WidthRequest="300"

Text="" />

<Button

Margin="0,10,0,0"

WidthRequest="100"

Text="Save">

<Button.Triggers>

<MultiTrigger.Conditions>

</MultiTrigger.Conditions>

</MultiTrigger>

</Button.Triggers>

</Button>

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] EventTrigger 엘리먼트 사용하기

■ EventTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ ValidateEntryTextChangedAction.cs


namespace TestProject;

/// <summary>
/// 엔트리 텍스트 변경시 검증 액션
/// </summary>
public class ValidateEntryTextChangedAction : TriggerAction<Entry>
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 호출하기 - Invoke(entry)

    /// <summary>
    /// 호출하기
    /// </summary>
    /// <param name="entry">엔트리</param>
    protected override void Invoke(Entry entry)
    {
        bool isValid = Double.TryParse(entry.Text, out double result);

        entry.TextColor = isValid ? Colors.Black : Colors.Red;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 엔트리 텍스트 변경시 검증 액션

/// </summary>

public class ValidateEntryTextChangedAction : TriggerAction<Entry>

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 호출하기 - Invoke(entry)

/// <summary>

/// 호출하기

/// </summary>

/// <param name="entry">엔트리</param>

protected override void Invoke(Entry entry)

{

bool isValid = Double.TryParse(entry.Text, out double result);

entry.TextColor = isValid ? Colors.Black : Colors.Red;

}

#endregion

}

▶ 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 x:Name="entry"
            WidthRequest="300"
            Text=""
            Placeholder="텍스트를 입력해주시기 바랍니다.">
            <Entry.Triggers>
                <EventTrigger Event="TextChanged">
                    <local:ValidateEntryTextChangedAction />
                </EventTrigger>
            </Entry.Triggers>
        </Entry>
    </StackLayout>
</ContentPage>

<?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 x:Name="entry"

WidthRequest="300"

Text=""

Placeholder="텍스트를 입력해주시기 바랍니다.">

<Entry.Triggers>

<local:ValidateEntryTextChangedAction />

</EventTrigger>

</Entry.Triggers>

</Entry>

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] DataTrigger 엘리먼트 사용하기

■ DataTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Entry x:Name="entry"
            WidthRequest="300"
            Text=""
            Placeholder="텍스트를 입력해주시기 바랍니다." />
        <Button
            Margin="0,10,0,0"
            WidthRequest="100"
            Text="저장">
            <Button.Triggers>
                <DataTrigger
                    TargetType="Button"
                    Binding="{Binding Source={x:Reference entry}, Path=Text.Length}"
                    Value="0">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Button.Triggers>
        </Button>
    </StackLayout>
</ContentPage>

<?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">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

<Entry x:Name="entry"

WidthRequest="300"

Text=""

Placeholder="텍스트를 입력해주시기 바랍니다." />

<Button

Margin="0,10,0,0"

WidthRequest="100"

Text="저장">

<Button.Triggers>

<DataTrigger

TargetType="Button"

Binding="{Binding Source={x:Reference entry}, Path=Text.Length}"

Value="0">

</DataTrigger>

</Button.Triggers>

</Button>

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Style 엘리먼트 : Triggers 속성을 사용해 스타일에서 트리거 설정하기

■ Style 엘리먼트의 Triggers 속성을 사용해 스타일에서 트리거를 설정하는 방법을 보여준다. ▶ 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">
    <ContentPage.Resources>
        <Style TargetType="Entry">
            <Style.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Setter Property="BackgroundColor" Value="Yellow" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="이름을 입력해 주시기 바랍니다." />
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="장소를 입력해 주시기 바랍니다." />
    </StackLayout>
</ContentPage>

<?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">

<ContentPage.Resources>

<Style.Triggers>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="True">

</Trigger>

</Style.Triggers>

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="이름을 입력해 주시기 바랍니다." />

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="장소를 입력해 주시기 바랍니다." />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/WPF] EventTrigger 클래스 : 코드로 이벤트 트리거 만들기

■ EventTrigger 클래스를 사용해 코드로 이벤트 트리거를 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="EventTrigger 클래스 : 코드로 이벤트 트리거 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="ImageStyleKey" TargetType="{x:Type Image}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Width"               Value="100"    />
            <Setter Property="Height"              Value="100"    />
            <Setter Property="Margin"              Value="10"     />
        </Style>
    </Window.Resources>
    <StackPanel Name="stackPanel"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal" />
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="EventTrigger 클래스 : 코드로 이벤트 트리거 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

</Window.Resources>

<StackPanel Name="stackPanel"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal" />

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 이미지 파일명 배열
        /// </summary>
        private string[] imageFileNameArray = { "겨울.jpg", "석양.jpg", "수련.jpg", "푸른언덕.jpg" };

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            Loaded += Window_Loaded;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            #region 마우스 진입시 이벤트 트리거를 설정한다.

            DoubleAnimation widthAnimation1  = new DoubleAnimation(200, new Duration(TimeSpan.Parse("0:0:0.15")));
            DoubleAnimation heightAnimation1 = new DoubleAnimation(200, new Duration(TimeSpan.Parse("0:0:0.15")));

            Storyboard.SetTargetProperty(widthAnimation1 , new PropertyPath(WidthProperty ));
            Storyboard.SetTargetProperty(heightAnimation1, new PropertyPath(HeightProperty));

            Storyboard storyboard1 = new Storyboard();

            storyboard1.Children.Add(widthAnimation1 );
            storyboard1.Children.Add(heightAnimation1);

            BeginStoryboard beginStoryboard1 = new BeginStoryboard();

            beginStoryboard1.Storyboard = storyboard1;

            EventTrigger eventTrigger1 = new EventTrigger(MouseEnterEvent);

            eventTrigger1.Actions.Add(beginStoryboard1);

            #endregion
            #region 마우스 이탈시 이벤트 트리거를 설정한다.

            DoubleAnimation widthAnimation2  = new DoubleAnimation(100, new Duration(TimeSpan.Parse("0:0:0.15")));
            DoubleAnimation heightAnimation2 = new DoubleAnimation(100, new Duration(TimeSpan.Parse("0:0:0.15")));

            Storyboard.SetTargetProperty(widthAnimation2 , new PropertyPath(WidthProperty ));
            Storyboard.SetTargetProperty(heightAnimation2, new PropertyPath(HeightProperty));

            Storyboard storyboard2 = new Storyboard();

            storyboard2.Children.Add(widthAnimation2 );
            storyboard2.Children.Add(heightAnimation2);

            BeginStoryboard beginStoryboard2 = new BeginStoryboard();

            beginStoryboard2.Storyboard = storyboard2;

            EventTrigger eventTrigger2 = new EventTrigger(MouseLeaveEvent);

            eventTrigger2.Actions.Add(beginStoryboard2);

            #endregion

            foreach(string imageFileName in imageFileNameArray)
            {
                Image image = new Image();

                image.Style   = (Style)this.Resources["ImageStyleKey"];
                image.Stretch = Stretch.Fill;
                image.Source  = new BitmapImage(new Uri($"pack://application:,,,/IMAGE/{imageFileName}"));

                image.Triggers.Add(eventTrigger1);
                image.Triggers.Add(eventTrigger2);

                this.stackPanel.Children.Add(image);
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Media.Imaging;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 이미지 파일명 배열

/// </summary>

private string[] imageFileNameArray = { "겨울.jpg", "석양.jpg", "수련.jpg", "푸른언덕.jpg" };

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

Loaded += Window_Loaded;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

/// <summary>

/// 윈도우 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void Window_Loaded(object sender, RoutedEventArgs e)

{

#region 마우스 진입시 이벤트 트리거를 설정한다.

DoubleAnimation widthAnimation1 = new DoubleAnimation(200, new Duration(TimeSpan.Parse("0:0:0.15")));

DoubleAnimation heightAnimation1 = new DoubleAnimation(200, new Duration(TimeSpan.Parse("0:0:0.15")));

Storyboard.SetTargetProperty(widthAnimation1 , new PropertyPath(WidthProperty ));

Storyboard.SetTargetProperty(heightAnimation1, new PropertyPath(HeightProperty));

Storyboard storyboard1 = new Storyboard();

storyboard1.Children.Add(widthAnimation1 );

storyboard1.Children.Add(heightAnimation1);

BeginStoryboard beginStoryboard1 = new BeginStoryboard();

beginStoryboard1.Storyboard = storyboard1;

EventTrigger eventTrigger1 = new EventTrigger(MouseEnterEvent);

eventTrigger1.Actions.Add(beginStoryboard1);

#endregion

#region 마우스 이탈시 이벤트 트리거를 설정한다.

DoubleAnimation widthAnimation2 = new DoubleAnimation(100, new Duration(TimeSpan.Parse("0:0:0.15")));

DoubleAnimation heightAnimation2 = new DoubleAnimation(100, new Duration(TimeSpan.Parse("0:0:0.15")));

Storyboard.SetTargetProperty(widthAnimation2 , new PropertyPath(WidthProperty ));

Storyboard.SetTargetProperty(heightAnimation2, new PropertyPath(HeightProperty));

Storyboard storyboard2 = new Storyboard();

storyboard2.Children.Add(widthAnimation2 );

storyboard2.Children.Add(heightAnimation2);

BeginStoryboard beginStoryboard2 = new BeginStoryboard();

beginStoryboard2.Storyboard = storyboard2;

EventTrigger eventTrigger2 = new EventTrigger(MouseLeaveEvent);

eventTrigger2.Actions.Add(beginStoryboard2);

#endregion

foreach(string imageFileName in imageFileNameArray)

{

Image image = new Image();

image.Style = (Style)this.Resources["ImageStyleKey"];

image.Stretch = Stretch.Fill;

image.Source = new BitmapImage(new Uri($"pack://application:,,,/IMAGE/{imageFileName}"));

image.Triggers.Add(eventTrigger1);

image.Triggers.Add(eventTrigger2);

this.stackPanel.Children.Add(image);

}

#endregion

}

TestProject.zip

[C#/WPF] Style 엘리먼트 : BasedOn 속성을 사용해 기존 디폴트 스타일에 스타일 트리거 추가하기

■ Style 엘리먼트의 BasedOn 속성을 사용해 기존 디폴트 스타일에 스타일 트리거를 추가하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="Style 엘리머트 : BasedOn 속성을 사용해 기존 디폴트 스타일에 스타일 트리거 추가하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <TextBlock Name="textBlock"
                HorizontalAlignment="Center"
                Text="비활성" />
            <StackPanel
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Orientation="Horizontal">
                <Button Name="updateButton"
                    Width="100"
                    Height="30"
                    Content="Update" />
                <Button Name="testButton"
                    Margin="10 0 0 0"
                    Width="100"
                    Height="30"
                    Content="Test">
                    <Button.Style>
                        <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=textBlock, Path=Text}" Value="비활성">
                                    <Setter Property="IsEnabled" Value="False" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="Style 엘리머트 : BasedOn 속성을 사용해 기존 디폴트 스타일에 스타일 트리거 추가하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Text="비활성" />

<StackPanel

HorizontalAlignment="Center"

Margin="0 10 0 0"

Orientation="Horizontal">

<Button Name="updateButton"

Width="100"

Height="30"

Content="Update" />

<Button Name="testButton"

Margin="10 0 0 0"

Width="100"

Height="30"

Content="Test">

<Button.Style>

<Style.Triggers>

</DataTrigger>

</Style.Triggers>

</Style>

</Button.Style>

</Button>

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            this.updateButton.Click += updateButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Update 버튼 클릭시 처리하기 - updateButton_Click(sender, e)

        /// <summary>
        /// Update 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void updateButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.textBlock.Text == string.Empty)
            {
                this.textBlock.Text = "테스트";
            }
            else
            {
                this.textBlock.Text = string.Empty;
            }
        }

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.updateButton.Click += updateButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Update 버튼 클릭시 처리하기 - updateButton_Click(sender, e)

/// <summary>

/// Update 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void updateButton_Click(object sender, RoutedEventArgs e)

{

if(this.textBlock.Text == string.Empty)

{

this.textBlock.Text = "테스트";

}

else

{

this.textBlock.Text = string.Empty;

}

#endregion

}

TestProject.zip

[C#/WPF] EventTrigger 엘리먼트 : RoutedEvent 속성을 사용해 복권 긁는 효과 만들기

■ EventTrigger 엘리먼트의 RoutedEvent 속성을 사용해 복권 긁는 효과를 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="EventTrigger 엘리먼트 : RoutedEvent 속성을 사용해 복권 긁는 효과 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Width="500"
        Height="500"
        Background="RoyalBlue">
        <Image
            Width="500"
            Height="500"
            Stretch="Fill"
            Source="sample.jpg" />
        <WrapPanel SnapsToDevicePixels="True">
            <WrapPanel.Resources>
                <Style TargetType="Rectangle">
                    <Setter Property="Width"  Value="50"    />
                    <Setter Property="Height" Value="50"    />
                    <Setter Property="Fill"   Value="Black" />
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetProperty="(Rectangle.Opacity)">
                                        <DoubleAnimation To="0" Duration="0:0:0.5"/>
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                            To="White"
                                            Duration="0:0:0.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </WrapPanel.Resources>
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
            <Rectangle /><Rectangle /><Rectangle /><Rectangle /><Rectangle />
        </WrapPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="EventTrigger 엘리먼트 : RoutedEvent 속성을 사용해 복권 긁는 효과 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Width="500"

Height="500"

Background="RoyalBlue">

<Image

Width="500"

Height="500"

Stretch="Fill"

Source="sample.jpg" />

<WrapPanel.Resources>

<Style.Triggers>

<EventTrigger.Actions>

<ColorAnimation

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

To="White"

Duration="0:0:0.5" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

</WrapPanel.Resources>

</WrapPanel>

</Grid>

</Window>

TestProject.zip

[C#/WPF] TriggerBase 클래스 : 텍스트 변경시 트리거 만들기

■ TriggerBase<T> 클래스를 사용해 텍스트 변경시 트리거를 만드는 방법을 보여준다. ▶ TextChangedTrigger.cs


using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Interactivity;

namespace TestProject
{
    /// <summary>
    /// 텍스트 변경시 트리거
    /// </summary>
    public class TextChangedTrigger : TriggerBase<TextBlock>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 부착시 처리하기 - OnAttached()

        /// <summary>
        /// 부착시 처리하기
        /// </summary>
        protected override void OnAttached()
        {
            base.OnAttached();

            AssociatedObject.Loaded += AssociatedObject_Loaded;
        }

        #endregion
        #region 탈착시 처리하기 - OnDetaching()

        /// <summary>
        /// 탈착시 처리하기
        /// </summary>
        protected override void OnDetaching()
        {
            AssociatedObject.Loaded -= AssociatedObject_Loaded;

            base.OnDetaching();
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 결합 객체 로드시 처리하기 - AssociatedObject_Loaded(sender, e)

        /// <summary>
        /// 결합 객체 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
        {
            TextBlock textBlock = AssociatedObject as TextBlock;

            if(textBlock == null)
            {
                return;
            }

            DependencyPropertyDescriptor descriptor = DependencyPropertyDescriptor.FromProperty
            (
                TextBlock.TextProperty,
                typeof(TextBlock)
            );

            if(descriptor == null)
            {
                return;
            }

            descriptor.AddValueChanged(textBlock, textBlock_TextChanged);
        }

        #endregion
        #region 텍스트 블럭 텍스트 변경시 처리하기 - textBlock_TextChanged(sender, e)

        /// <summary>
        /// 텍스트 블럭 텍스트 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void textBlock_TextChanged(object sender, EventArgs e)
        {
            TextBlock textBlock = sender as TextBlock;

            if(textBlock == null)
            {
                return;
            }

            InvokeActions(null);
        }

        #endregion
    }
}

100

using System;

using System.ComponentModel;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Interactivity;

namespace TestProject

{

/// <summary>

/// 텍스트 변경시 트리거

/// </summary>

public class TextChangedTrigger : TriggerBase<TextBlock>

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 부착시 처리하기 - OnAttached()

/// <summary>

/// 부착시 처리하기

/// </summary>

protected override void OnAttached()

{

base.OnAttached();

AssociatedObject.Loaded += AssociatedObject_Loaded;

}

#endregion

#region 탈착시 처리하기 - OnDetaching()

/// <summary>

/// 탈착시 처리하기

/// </summary>

protected override void OnDetaching()

{

AssociatedObject.Loaded -= AssociatedObject_Loaded;

base.OnDetaching();

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 결합 객체 로드시 처리하기 - AssociatedObject_Loaded(sender, e)

/// <summary>

/// 결합 객체 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)

{

TextBlock textBlock = AssociatedObject as TextBlock;

if(textBlock == null)

{

return;

}

DependencyPropertyDescriptor descriptor = DependencyPropertyDescriptor.FromProperty

(

TextBlock.TextProperty,

typeof(TextBlock)

);

if(descriptor == null)

{

return;

}

descriptor.AddValueChanged(textBlock, textBlock_TextChanged);

}

#endregion

#region 텍스트 블럭 텍스트 변경시 처리하기 - textBlock_TextChanged(sender, e)

/// <summary>

/// 텍스트 블럭 텍스트 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void textBlock_TextChanged(object sender, EventArgs e)

{

TextBlock textBlock = sender as TextBlock;

if(textBlock == null)

{

return;

}

InvokeActions(null);

}

#endregion

}

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="TriggerBase&lt;T&gt; 클래스 : 텍스트 변경시 트리거 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Storyboard x:Key="hourStoryboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="hourTextBlock"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="minuteStoryboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="minuteTextBlock"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="secondStoryboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="secondTextBlock"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.Resources>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="HorizontalAlignment" Value="Center" />
                    <Setter Property="FontSize"            Value="100"    />
                </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <!-- 시 -->
            <TextBlock x:Name="hourTextBlock" Grid.Column="0"
                RenderTransformOrigin="0.5 1"
                Text="00">
                <TextBlock.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform     />
                        <SkewTransform      />
                        <RotateTransform    />
                        <TranslateTransform />
                    </TransformGroup>
                </TextBlock.RenderTransform>
                <i:Interaction.Triggers>
                    <local:TextChangedTrigger>
                        <ei:ControlStoryboardAction Storyboard="{StaticResource hourStoryboard}" />
                    </local:TextChangedTrigger>
                </i:Interaction.Triggers>
            </TextBlock>
            <TextBlock Grid.Column="1"
                Text=":" />
            <!-- 분 -->
            <TextBlock x:Name="minuteTextBlock" Grid.Column="2"
                RenderTransformOrigin="0.5 1"
                Text="00">
                <TextBlock.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform     />
                        <SkewTransform      />
                        <RotateTransform    />
                        <TranslateTransform />
                    </TransformGroup>
                </TextBlock.RenderTransform>
                <i:Interaction.Triggers>
                    <local:TextChangedTrigger>
                        <ei:ControlStoryboardAction Storyboard="{StaticResource minuteStoryboard}" />
                    </local:TextChangedTrigger>
                </i:Interaction.Triggers>
            </TextBlock>
            <TextBlock Grid.Column="3"
                Text=":" />
            <!-- 초 -->
            <TextBlock x:Name="secondTextBlock" Grid.Column="4"
                RenderTransformOrigin="0.5 1"
                Text="00">
                <TextBlock.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform     />
                        <SkewTransform      />
                        <RotateTransform    />
                        <TranslateTransform />
                    </TransformGroup>
                </TextBlock.RenderTransform>
                <i:Interaction.Triggers>
                    <local:TextChangedTrigger>
                        <ei:ControlStoryboardAction Storyboard="{StaticResource secondStoryboard}" />
                    </local:TextChangedTrigger>
                </i:Interaction.Triggers>
            </TextBlock>
        </Grid>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

xmlns:local="clr-namespace:TestProject"

Width="800"

Height="600"

Title="TriggerBase<T> 클래스 : 텍스트 변경시 트리거 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="hourTextBlock"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="minuteTextBlock"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="secondTextBlock"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Window.Resources>

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.Resources>

</Style>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock x:Name="hourTextBlock" Grid.Column="0"

RenderTransformOrigin="0.5 1"

Text="00">

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

<i:Interaction.Triggers>

<local:TextChangedTrigger>

<ei:ControlStoryboardAction Storyboard="{StaticResource hourStoryboard}" />

</local:TextChangedTrigger>

</i:Interaction.Triggers>

</TextBlock>

<TextBlock Grid.Column="1"

Text=":" />

<TextBlock x:Name="minuteTextBlock" Grid.Column="2"

RenderTransformOrigin="0.5 1"

Text="00">

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

<i:Interaction.Triggers>

<local:TextChangedTrigger>

<ei:ControlStoryboardAction Storyboard="{StaticResource minuteStoryboard}" />

</local:TextChangedTrigger>

</i:Interaction.Triggers>

</TextBlock>

<TextBlock Grid.Column="3"

Text=":" />

<TextBlock x:Name="secondTextBlock" Grid.Column="4"

RenderTransformOrigin="0.5 1"

Text="00">

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

<i:Interaction.Triggers>

<local:TextChangedTrigger>

<ei:ControlStoryboardAction Storyboard="{StaticResource secondStoryboard}" />

</local:TextChangedTrigger>

</i:Interaction.Triggers>

</TextBlock>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Threading;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            DispatcherTimer timer = new DispatcherTimer
            {
                Interval = TimeSpan.FromSeconds(1)
            };

            timer.Tick += timer_Tick;

            timer.Start();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 타이머 틱 처리하기 - timer_Tick(sender, e)

        /// <summary>
        /// 타이머 틱 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void timer_Tick(object sender, EventArgs e)
        {
            if(DateTime.Now.Hour > 12)
            {
                this.hourTextBlock.Text = (DateTime.Now.Hour - 12).ToString("D2");
            }
            else
            {
                this.hourTextBlock.Text = DateTime.Now.Hour.ToString("D2");
            }

            this.minuteTextBlock.Text = DateTime.Now.Minute.ToString("D2");

            this.secondTextBlock.Text = DateTime.Now.Second.ToString("D2");
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Threading;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

DispatcherTimer timer = new DispatcherTimer

{

Interval = TimeSpan.FromSeconds(1)

};

timer.Tick += timer_Tick;

timer.Start();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 타이머 틱 처리하기 - timer_Tick(sender, e)

/// <summary>

/// 타이머 틱 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void timer_Tick(object sender, EventArgs e)

{

if(DateTime.Now.Hour > 12)

{

this.hourTextBlock.Text = (DateTime.Now.Hour - 12).ToString("D2");

}

else

{

this.hourTextBlock.Text = DateTime.Now.Hour.ToString("D2");

}

this.minuteTextBlock.Text = DateTime.Now.Minute.ToString("D2");

this.secondTextBlock.Text = DateTime.Now.Second.ToString("D2");

}

#endregion

}

TestProject.zip

[C#/WPF] EventTrigger 엘리먼트 : CallMethodAction 객체를 사용해 객체 메소드 실행하기

■ EventTrigger 엘리먼트에서 CallMethodAction 객체를 사용해 객체 메소드 실행하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Width="800"
    Height="600"
    Title="EventTrigger 엘리먼트 : CallMethodAction 객체를 사용해 객체 메소드 실행하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Border
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            BorderBrush="Black"
            BorderThickness="1">
            <ScrollViewer Name="scrollViewer"
                Width="200"
                Height="200">
                <StackPanel>
                    <StackPanel.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="Padding" Value="5" />
                        </Style>
                    </StackPanel.Resources>
                    <TextBlock Text="A" />
                    <TextBlock Text="B" />
                    <TextBlock Text="C" />
                    <TextBlock Text="D" />
                    <TextBlock Text="E" />
                    <TextBlock Text="F" />
                    <TextBlock Text="G" />
                    <TextBlock Text="H" />
                    <TextBlock Text="I" />
                    <TextBlock Text="J" />
                    <TextBlock Text="K" />
                    <TextBlock Text="L" />
                    <TextBlock Text="M" />
                    <TextBlock Text="N" />
                    <TextBlock Text="O" />
                    <TextBlock Text="P" />
                    <TextBlock Text="Q" />
                    <TextBlock Text="R" />
                    <TextBlock Text="S" />
                    <TextBlock Text="T" />
                    <TextBlock Text="U" />
                    <TextBlock Text="V" />
                    <TextBlock Text="W" />
                    <TextBlock Text="X" />
                    <TextBlock Text="Y" />
                    <TextBlock Text="Z" />
                </StackPanel>
            </ScrollViewer>
        </Border>
         <Button
            Content="↑"
            FontWeight="Bold"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Margin="20">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:CallMethodAction
                        TargetObject="{Binding ElementName=scrollViewer}"
                        MethodName="ScrollToHome" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Width="800"

Height="600"

Title="EventTrigger 엘리먼트 : CallMethodAction 객체를 사용해 객체 메소드 실행하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Border

HorizontalAlignment="Center"

VerticalAlignment="Center"

BorderBrush="Black"

BorderThickness="1">

<ScrollViewer Name="scrollViewer"

Width="200"

Height="200">

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

</StackPanel>

</ScrollViewer>

</Border>

<Button

Content="↑"

FontWeight="Bold"

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Margin="20">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<ei:CallMethodAction

TargetObject="{Binding ElementName=scrollViewer}"

MethodName="ScrollToHome" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

</Grid>

</Window>

TestProject.zip

[C#/WPF] EventTrigger 엘리먼트 : CallMethodAction 객체를 사용해 이벤트 명령 실행하기

■ EventTrigger 엘리먼트에서 CallMethodAction 객체를 사용해 이벤트 명령을 실행하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Width="800"
    Height="600"
    Title="EventTrigger 엘리먼트 : CallMethodAction 객체를 사용해 이벤트 명령 실행하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseWheel">
                    <ei:CallMethodAction TargetObject="{Binding}" MethodName="button_MouseWheel" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Width="800"

Height="600"

Title="EventTrigger 엘리먼트 : CallMethodAction 객체를 사용해 이벤트 명령 실행하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Button

Width="100"

Height="30"

Content="테스트">

<i:Interaction.Triggers>

<i:EventTrigger EventName="MouseWheel">

<ei:CallMethodAction TargetObject="{Binding}" MethodName="button_MouseWheel" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;
using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            DataContext = this;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 버튼 마우스 WHEEL 처리하기 - button_MouseWheel(sender, e)

        /// <summary>
        /// 버튼 마우스 WHEEL 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        public void button_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            MessageBox.Show($"마우스 휠을 움직였습니다 : {e.Delta}");
        }

        #endregion
    }
}

using System.Windows;

using System.Windows.Input;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

DataContext = this;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 버튼 마우스 WHEEL 처리하기 - button_MouseWheel(sender, e)

/// <summary>

/// 버튼 마우스 WHEEL 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

public void button_MouseWheel(object sender, MouseWheelEventArgs e)

{

MessageBox.Show($"마우스 휠을 움직였습니다 : {e.Delta}");

}

#endregion

}

TestProject.zip

[C#/WPF] EventTrigger 엘리먼트 : InvokeCommandAction 객체를 사용해 이벤트 명령 실행하기

■ EventTrigger 엘리먼트에서 InvokeCommandAction 객체를 사용해 이벤트 명령을 실행하는 방법을 보여준다. ▶ ReplayCommand.cs


using System;
using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 릴레이 명령
    /// </summary>
    public class RelayCommand : ICommand
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 실행 가능 여부 변경시 - CanExecuteChanged

        /// <summary>
        /// 실행 가능 여부 변경시
        /// </summary>
        public event EventHandler CanExecuteChanged
        {
            add
            {
                CommandManager.RequerySuggested += value;
            }
            remove
            {
                CommandManager.RequerySuggested -= value;
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 실행 액션
        /// </summary>
        private readonly Action<object> executeAction;

        /// <summary>
        /// 실행 가능 여부 프레디킷
        /// </summary>
        private readonly Predicate<object> canExecutePredicate;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - RelayCommand(executeAction, canExecutePredicate)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="executeAction">실행 액션</param>
        /// <param name="canExecutePredicate">실행 가능 여부 프레디킷</param>
        public RelayCommand(Action<object> executeAction, Predicate<object> canExecutePredicate)
        {
            if(executeAction == null)
            {
                throw new ArgumentNullException("executeAction");
            }

            this.executeAction       = executeAction;
            this.canExecutePredicate = canExecutePredicate;
        }

        #endregion
        #region 생성자 - RelayCommand(executeAction)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="executeAction">실행 액션</param>
        public RelayCommand(Action<object> executeAction) : this(executeAction, null)
        {
        }

        #endregion

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

        #region 실행하기 - Execute(parameter)

        /// <summary>
        /// 실행하기
        /// </summary>
        /// <param name="parameter">파라미터</param>
        public void Execute(object parameter)
        {
            this.executeAction(parameter);
        }

        #endregion
        #region 실행 가능 여부 구하기 - CanExecute(parameter)

        /// <summary>
        /// 실행 가능 여부 구하기
        /// </summary>
        /// <param name="parameter">파라미터</param>
        /// <returns>실행 가능 여부</returns>
        public bool CanExecute(object parameter)
        {
            return this.canExecutePredicate == null ? true : this.canExecutePredicate(parameter);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

using System;

using System.Windows.Input;

namespace TestProject

{

/// <summary>

/// 릴레이 명령

/// </summary>

public class RelayCommand : ICommand

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Event

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 실행 가능 여부 변경시 - CanExecuteChanged

/// <summary>

/// 실행 가능 여부 변경시

/// </summary>

public event EventHandler CanExecuteChanged

{

add

{

CommandManager.RequerySuggested += value;

}

remove

{

CommandManager.RequerySuggested -= value;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 실행 액션

/// </summary>

private readonly Action<object> executeAction;

/// <summary>

/// 실행 가능 여부 프레디킷

/// </summary>

private readonly Predicate<object> canExecutePredicate;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - RelayCommand(executeAction, canExecutePredicate)

/// <summary>

/// 생성자

/// </summary>

/// <param name="executeAction">실행 액션</param>

/// <param name="canExecutePredicate">실행 가능 여부 프레디킷</param>

public RelayCommand(Action<object> executeAction, Predicate<object> canExecutePredicate)

{

if(executeAction == null)

{

throw new ArgumentNullException("executeAction");

}

this.executeAction = executeAction;

this.canExecutePredicate = canExecutePredicate;

}

#endregion

#region 생성자 - RelayCommand(executeAction)

/// <summary>

/// 생성자

/// </summary>

/// <param name="executeAction">실행 액션</param>

public RelayCommand(Action<object> executeAction) : this(executeAction, null)

{

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 실행하기 - Execute(parameter)

/// <summary>

/// 실행하기

/// </summary>

/// <param name="parameter">파라미터</param>

public void Execute(object parameter)

{

this.executeAction(parameter);

}

#endregion

#region 실행 가능 여부 구하기 - CanExecute(parameter)

/// <summary>

/// 실행 가능 여부 구하기

/// </summary>

/// <param name="parameter">파라미터</param>

/// <returns>실행 가능 여부</returns>

public bool CanExecute(object parameter)

{

return this.canExecutePredicate == null ? true : this.canExecutePredicate(parameter);

}

#endregion

}

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    Width="800"
    Height="600"
    Title="EventTrigger 엘리먼트 : InvokeCommandAction 객체를 사용해 이벤트 명령 실행하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Button Name="button"
            Width="100"
            Height="30"
            Content="테스트">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseWheel">
                    <i:InvokeCommandAction Command="{Binding WheelCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

Width="800"

Height="600"

Title="EventTrigger 엘리먼트 : InvokeCommandAction 객체를 사용해 이벤트 명령 실행하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Button Name="button"

Width="100"

Height="30"

Content="테스트">

<i:Interaction.Triggers>

<i:EventTrigger EventName="MouseWheel">

<i:InvokeCommandAction Command="{Binding WheelCommand}" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;
using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// WHEEL 명령
        /// </summary>
        private RelayCommand wheelCommand;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region WHEEL 명령 - WheelCommand

        /// <summary>
        /// WHEEL 명령
        /// </summary>
        public ICommand WheelCommand
        {
            get
            {
                return this.wheelCommand ?? (this.wheelCommand = new RelayCommand(ExecuteWheelCommand, CanExecuteWheelCommand));
            }
        }

        #endregion


        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            DataContext = this;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region WHEEL 명령 실행하기 - ExecuteWheelCommand(parameter)

        /// <summary>
        /// WHEEL 명령 실행하기
        /// </summary>
        /// <param name="parameter">매개 변수</param>
        private void ExecuteWheelCommand(object parameter)
        {
            MessageBox.Show("마우스 휠을 움직였습니다.");
        }

        #endregion
        #region WHEEL 명령 실행 가능 여부 구하기 - CanExecuteWheelCommand(parameter)

        /// <summary>
        /// WHEEL 명령 실행 가능 여부 구하기
        /// </summary>
        /// <param name="parameter">매개 변수</param>
        /// <returns>WHEEL 실행 가능 여부</returns>
        private bool CanExecuteWheelCommand(object parameter)
        {
            return true;
        }

        #endregion
    }
}

using System.Windows;

using System.Windows.Input;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// WHEEL 명령

/// </summary>

private RelayCommand wheelCommand;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region WHEEL 명령 - WheelCommand

/// <summary>

/// WHEEL 명령

/// </summary>

public ICommand WheelCommand

{

get

{

return this.wheelCommand ?? (this.wheelCommand = new RelayCommand(ExecuteWheelCommand, CanExecuteWheelCommand));

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

DataContext = this;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region WHEEL 명령 실행하기 - ExecuteWheelCommand(parameter)

/// <summary>

/// WHEEL 명령 실행하기

/// </summary>

/// <param name="parameter">매개 변수</param>

private void ExecuteWheelCommand(object parameter)

{

MessageBox.Show("마우스 휠을 움직였습니다.");

}

#endregion

#region WHEEL 명령 실행 가능 여부 구하기 - CanExecuteWheelCommand(parameter)

/// <summary>

/// WHEEL 명령 실행 가능 여부 구하기

/// </summary>

/// <param name="parameter">매개 변수</param>

/// <returns>WHEEL 실행 가능 여부</returns>

private bool CanExecuteWheelCommand(object parameter)

{

return true;

}

#endregion

}

※ 제한

[C#/WPF] EventTrigger 엘리먼트 : 버튼 클릭시 버튼 흔들기

■ EventTrigger 엘리먼트를 사용해 버튼 클릭시 버튼을 흔드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="EventTrigger 엘리먼트 : 버튼 클릭시 버튼 흔들기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <StackPanel.Resources>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="HorizontalAlignment"   Value="Center"  />
                    <Setter Property="Margin"                Value="10"      />
                    <Setter Property="Padding"               Value="10"      />
                    <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <RotateTransform />
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard>
                                <Storyboard TargetProperty="RenderTransform.Angle">
                                    <DoubleAnimation
                                        FillBehavior="Stop"
                                        AutoReverse="True"
                                        RepeatBehavior="3x"
                                        From="-5"
                                        To="5"
                                        Duration="0:0:0.05" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </StackPanel.Resources>
            <Button>버튼 번호 1</Button>
            <Button>버튼 번호 2</Button>
            <Button>버튼 번호 3</Button>
            <Button>버튼 번호 4</Button>
            <Button>버튼 번호 5</Button>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="EventTrigger 엘리먼트 : 버튼 클릭시 버튼 흔들기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<StackPanel.Resources>

<Setter.Value>

</Setter.Value>

</Setter>

<Style.Triggers>

<DoubleAnimation

FillBehavior="Stop"

AutoReverse="True"

RepeatBehavior="3x"

From="-5"

To="5"

Duration="0:0:0.05" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</StackPanel.Resources>

</StackPanel>

</Grid>

</Window>

TestProject.zip

[C#/WPF] EventTrigger 엘리먼트 : SourceName 속성 사용하기

■ EventTrigger 엘리먼트의 SourceName 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="EventTrigger 엘리먼트 : SourceName 속성 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button Name="button1"
            HorizontalAlignment="Center"
            Margin="10"
            Padding="10">
            다른 버튼 확장하기
        </Button>
        <Button Name="button2"
            HorizontalAlignment="Center"
            Margin="10"
            Padding="10">
            다른 버튼 확장하기
        </Button>
    </StackPanel>
    <Window.Triggers>
        <EventTrigger SourceName="button1"
            RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="button2"
                        Storyboard.TargetProperty="FontSize"
                        Duration="0:0:2"
                        From="16"
                        To="48"
                        FillBehavior="Stop" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger SourceName="button2"
            RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="button1"
                        Storyboard.TargetProperty="FontSize"
                        Duration="0:0:2"
                        From="16"
                        To="48"
                        FillBehavior="Stop" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="EventTrigger 엘리먼트 : SourceName 속성 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button Name="button1"

HorizontalAlignment="Center"

Margin="10"

Padding="10">

다른 버튼 확장하기

</Button>

<Button Name="button2"

HorizontalAlignment="Center"

Margin="10"

Padding="10">

다른 버튼 확장하기

</Button>

</StackPanel>

<Window.Triggers>

<EventTrigger SourceName="button1"

RoutedEvent="Button.Click">

<DoubleAnimation

Storyboard.TargetName="button2"

Storyboard.TargetProperty="FontSize"

Duration="0:0:2"

From="16"

To="48"

FillBehavior="Stop" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

<EventTrigger SourceName="button2"

RoutedEvent="Button.Click">

<DoubleAnimation

Storyboard.TargetName="button1"

Storyboard.TargetProperty="FontSize"

Duration="0:0:2"

From="16"

To="48"

FillBehavior="Stop" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

</Window>

TestProject.zip

[C#/WPF] MultiDataTrigger 엘리먼트 사용하기

■ MultiDataTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ Place.cs


namespace TestProject
{
    /// <summary>
    /// 장소
    /// </summary>
    public class Place
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 명칭
        /// </summary>
        private string name;

        /// <summary>
        /// 주
        /// </summary>
        private string state;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 명칭 - Name

        /// <summary>
        /// 명칭
        /// </summary>
        public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                this.name = value;
            }
        }

        #endregion
        #region 주 - State

        /// <summary>
        /// 주
        /// </summary>
        public string State
        {
            get
            {
                return this.state;
            }
            set
            {
                this.state = value;
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - Place(name, state)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="name">명칭</param>
        /// <param name="state">주</param>
        public Place(string name, string state)
        {
            this.name = name;
            this.state = state;
        }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 장소

/// </summary>

public class Place

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 명칭

/// </summary>

private string name;

/// <summary>

/// 주

/// </summary>

private string state;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name

{

get

{

return this.name;

}

set

{

this.name = value;

}

#endregion

#region 주 - State

/// <summary>

/// 주

/// </summary>

public string State

{

get

{

return this.state;

}

set

{

this.state = value;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - Place(name, state)

/// <summary>

/// 생성자

/// </summary>

/// <param name="name">명칭</param>

/// <param name="state">주</param>

public Place(string name, string state)

{

this.name = name;

this.state = state;

}

#endregion

}

▶ PlaceCollection.cs


using System.Collections.ObjectModel;

namespace TestProject
{
    /// <summary>
    /// 장소 컬렉션
    /// </summary>
    public class PlaceCollection : ObservableCollection<Place>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - PlaceCollection()

        /// <summary>
        /// 생성자
        /// </summary>
        public PlaceCollection()
        {
            Add(new Place("Bellevue"     , "WA"));
            Add(new Place("Gold Beach"   , "OR"));
            Add(new Place("Kirkland"     , "WA"));
            Add(new Place("Los Angeles"  , "CA"));
            Add(new Place("Portland"     , "ME"));
            Add(new Place("Portland"     , "OR"));
            Add(new Place("Redmond"      , "WA"));
            Add(new Place("San Diego"    , "CA"));
            Add(new Place("San Francisco", "CA"));
            Add(new Place("San Jose"     , "CA"));
            Add(new Place("Seattle"      , "WA"));
        }

        #endregion
    }
}

using System.Collections.ObjectModel;

namespace TestProject

{

/// <summary>

/// 장소 컬렉션

/// </summary>

public class PlaceCollection : ObservableCollection<Place>

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - PlaceCollection()

/// <summary>

/// 생성자

/// </summary>

public PlaceCollection()

{

Add(new Place("Bellevue" , "WA"));

Add(new Place("Gold Beach" , "OR"));

Add(new Place("Kirkland" , "WA"));

Add(new Place("Los Angeles" , "CA"));

Add(new Place("Portland" , "ME"));

Add(new Place("Portland" , "OR"));

Add(new Place("Redmond" , "WA"));

Add(new Place("San Diego" , "CA"));

Add(new Place("San Francisco", "CA"));

Add(new Place("San Jose" , "CA"));

Add(new Place("Seattle" , "WA"));

}

#endregion

}

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="MultiDataTrigger 엘리먼트 사용하기"
    Background="Cornsilk"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <local:PlaceCollection x:Key="PlaceCollectionKey" />
        <Style TargetType="{x:Type ListBoxItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=State}" Value="WA">
                    <Setter Property="Foreground" Value="Red" />
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=Name}"  Value="Portland" />
                        <Condition Binding="{Binding Path=State}" Value="OR"       />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Cyan" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
        <DataTemplate DataType="{x:Type local:Place}">
            <StackPanel Orientation="Horizontal"
                Width="200"
                Height="30">
                <TextBlock
                    VerticalAlignment="Center"
                    Width="150"
                    Padding="5"
                    Text="{Binding Path=Name}" />
                <TextBlock
                    VerticalAlignment="Center"
                    Width="50"
                    Padding="5"
                    Text="{Binding Path=State}" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <ListBox
            HorizontalAlignment="Center"
            Background="Honeydew"
            ItemsSource="{Binding Source={StaticResource PlaceCollectionKey}}" />
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:TestProject"

Width="800"

Height="600"

Title="MultiDataTrigger 엘리먼트 사용하기"

Background="Cornsilk"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<local:PlaceCollection x:Key="PlaceCollectionKey" />

<Style.Triggers>

</DataTrigger>

<MultiDataTrigger.Conditions>

</MultiDataTrigger.Conditions>

</MultiDataTrigger>

</Style.Triggers>

</Style>

<StackPanel Orientation="Horizontal"

Width="200"

Height="30">

<TextBlock

VerticalAlignment="Center"

Width="150"

Padding="5"

Text="{Binding Path=Name}" />

<TextBlock

VerticalAlignment="Center"

Width="50"

Padding="5"

Text="{Binding Path=State}" />

</StackPanel>

</DataTemplate>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ListBox

HorizontalAlignment="Center"

Background="Honeydew"

ItemsSource="{Binding Source={StaticResource PlaceCollectionKey}}" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
        }

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF] Trigger 엘리먼트 : 버튼 클릭시 배경색 변경하기

■ Trigger 엘리먼트를 사용해 버튼 클릭시 배경색을 변경하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="Trigger 엘리먼트 : 버튼 클릭시 배경색 변경하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Button
            Width="300"
            Height="200"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"
            FontSize="32"
            FontWeight="Bold"
            Foreground="White">
            테스트 버튼
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                </ControlTemplate>
            </Button.Template>
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="Blue" />
                    <Style.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="Trigger 엘리먼트 : 버튼 클릭시 배경색 변경하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Button

Width="300"

Height="200"

HorizontalContentAlignment="Center"

VerticalContentAlignment="Center"

FontSize="32"

FontWeight="Bold"

Foreground="White">

테스트 버튼

<Button.Template>

<ContentPresenter

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Border>

</ControlTemplate>

</Button.Template>

<Button.Style>

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

</Button.Style>

</Button>

</Grid>

</Window>

TestProject.zip

[C#/WPF] Trigger 클래스 : Property 속성을 사용해 애니메이션 만들기

■ Trigger 클래스의 Property 속성을 사용해 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="Trigger 클래스 : Property 속성을 사용해 애니메이션 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="ButtonStyleKey" TargetType="{x:Type Button}">
            <Setter Property="Opacity" Value="0.25" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    To="1"
                                    Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                To="0.25"
                                Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button
            Style="{StaticResource ButtonStyleKey}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="10">
            마우스를 버튼 위로 이동시켜 주세요.
        </Button>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="Trigger 클래스 : Property 속성을 사용해 애니메이션 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Style.Triggers>

<Trigger.EnterActions>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

To="1"

Duration="0:0:1" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

To="0.25"

Duration="0:0:1" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

<Button

Style="{StaticResource ButtonStyleKey}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10">

마우스를 버튼 위로 이동시켜 주세요.

</Button>

</Grid>

</Window>

TestProject.zip