Custom Control Animation

[MarkoShenodaa]

how to add triggers to custom control

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MenuCustomButton">
    <Style TargetType="local:MenuCustomButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MenuCustomButton">
                    <Border
                        x:Name="Border"
                        Margin="10,5"
                        BorderBrush="{TemplateBinding Foreground}"
                        BorderThickness="2"
                        CornerRadius="5">
                        <StackPanel
                            Padding="10"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{TemplateBinding Background}"
                            Orientation="Horizontal">
                            <TextBlock
                                FontFamily="{TemplateBinding IconFont}"
                                Foreground="{TemplateBinding Foreground}"
                                Text="{TemplateBinding IconString}" />
                            <TextBlock
                                Margin="10,0,0,0"
                                Foreground="{TemplateBinding Foreground}"
                                Text="{TemplateBinding Title}" />
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
            <Style.Triggers>
                <EventTrigger RoutedEvent="RadioButton.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="Foreground.Color"
                                    To="LightGray"
                                    Duration="0:0:0.300" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="Foreground.Color"
                                    To="White"
                                    Duration="0:0:0.300" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Setter>
    </Style>
</ResourceDictionary>

public sealed partial class MenuCustomButton : RadioButton
{
    public MenuCustomButton()
    {
        this.DefaultStyleKey = typeof(MenuCustomButton);
    }

    public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(nameof(Title),
       typeof(string), typeof(MenuCustomButton), new PropertyMetadata(string.Empty));

    public string Title
    {
        get => (string)GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }

    public static readonly DependencyProperty IconStringProperty = DependencyProperty.Register(nameof(IconString),
       typeof(string), typeof(MenuCustomButton), new PropertyMetadata(string.Empty));

    public string IconString
    {
        get => (string)GetValue(IconStringProperty);
        set => SetValue(IconStringProperty, value);
    }

    public static readonly DependencyProperty FullViewProperty = DependencyProperty.Register(nameof(FullView),
       typeof(bool), typeof(MenuCustomButton), new PropertyMetadata(false));

    public bool FullView
    {
        get => (bool)GetValue(FullViewProperty);
        set => SetValue(FullViewProperty, value);
    }

    public static readonly DependencyProperty IconFontProperty = DependencyProperty.Register(nameof(IconFont),
       typeof(FontFamily), typeof(MenuCustomButton), new PropertyMetadata(null));

    public FontFamily IconFont
    {
        get => (FontFamily)GetValue(IconFontProperty);
        set => SetValue(IconFontProperty, value);
    }
}

[MarkoShenodaa]

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <EventTrigger.Actions>
            <Setter Property="Foreground" Value="Red" />
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <EventTrigger.Actions>
            <Setter Property="Foreground" Value="White" />
        </EventTrigger.Actions>
    </EventTrigger>
</ControlTemplate.Triggers>

[jeromelaban]

Thanks for your question. Triggers in WinUI are handled using XamlBehaviors.

[agneszitte]

Note

A documentation update is on its way for XamlBehaviors
The details to properly add the related packages are mentioned here at the moment: #16871

[MarkoShenodaa]

is there any video tutorial for it

thank you

[MarkoShenodaa]

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:MenuCustomButton">
    <Style TargetType="local:MenuCustomButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="cont" TargetType="local:MenuCustomButton">
                    <Border
                        x:Name="MBorder"
                        Margin="10,5"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding Foreground}"
                        BorderThickness="2"
                        CornerRadius="5">
                        <StackPanel
                            Padding="10"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{TemplateBinding Background}"
                            Orientation="Horizontal">
                            <TextBlock
                                x:Name="txtIcon"
                                FontFamily="{TemplateBinding IconFont}"
                                Foreground="{TemplateBinding Foreground}"
                                Text="{TemplateBinding IconString}" />
                            <TextBlock
                                Margin="10,0,0,0"
                                Foreground="{TemplateBinding Foreground}"
                                Text="{TemplateBinding Title}" />
                        </StackPanel>

                    </Border>
                </ControlTemplate>

                <!--<ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <EventTrigger.Actions>
                            <Setter Property="Foreground" Value="Red" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <EventTrigger.Actions>
                            <Setter Property="Foreground" Value="White" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                </ControlTemplate.Triggers>-->
            </Setter.Value>

            <!--<Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <Setter Property="Foreground" Value="Red" />
            -->
            <!--<BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="Foreground.Color"
                                    To="LightGray"
                                    Duration="0:0:0.300" />
                            </Storyboard>-->
            <!--</BeginStoryboard>-->
            <!--
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <Setter Property="Foreground" Value="White" />
            -->
            <!--<BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="Foreground.Color"
                                    To="White"
                                    Duration="0:0:0.300" />
                            </Storyboard>
                        </BeginStoryboard>-->
            <!--
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>-->

        </Setter>
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click" SourceObject="{Binding}">
                <Core:ChangePropertyAction
                    PropertyName="Foreground"
                    TargetObject="{Binding ElementName=txtIcon}"
                    Value="#00bfff" />
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Style>
</ResourceDictionary>

That's what i'm in right now but it didn't work