0

I am using a separate namespace for triggers to not break MVVM here. When the primary button below is clicked I want to animate said button. So far so good, but I also want to animate one or more other controls on the page at the same time. In this case the x:Name="AnotherButton" button, but it could be any element with a name.

How do I trigger an animation for multiple controls in .NET MAUI?

View

<ContentPage xmlns:triggers="clr-namespace:MauiApp1.Triggers">

    ...

    <Button Text="Click this button"
            Command="{Binding ShowOptionsCommand}"
            Opacity="1">
        <Button.Triggers>
            <DataTrigger Binding="{Binding ShowOptions}" 
                         TargetType="Button" 
                         Value="true">
                <DataTrigger.EnterActions>
                    <triggers:ShowOptionsTrigger ShowOptions="True"/>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <triggers:ShowOptionsTrigger ShowOptions="False"/>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Button.Triggers>
    </Button>

    <Button Text="Another button"
            x:Name="AnotherButton"/>

    ...

</ContentPage>

ViewModel

private bool showOptions = false;
public bool ShowOptions
{
    get => showOptions;
    set => SetProperty(ref showOptions, value);
}

public Command ShowOptionsCommand { get; private set; }

public OptionsViewModel()
{
    ShowOptionsCommand = new Command(() => ShowOptions = !ShowOptions);
}

Trigger
I can only animate sender here. How do I animate different controls at the same time? This trigger action is in a separate file in a "triggers" folder in my project. So this is not in my ViewModel!

namespace MauiApp1.Triggers;

public class ShowOptionsTrigger : TriggerAction<VisualElement>
{
    public bool ShowOptions { get; set; }

    protected override async void Invoke(VisualElement sender)
    {
        if (ShowOptions)
            await sender.FadeTo(0.0, 250);
        else
            await sender.FadeTo(1.0, 250);

        // I am trying to also animate AnotherButton like so:
        AnotherButton.FadeTo(1.0, 250);
    }
}
14
  • 2
    Not a solution that goes on your way, but imo it's ok to place things like animations in code-behind, because they're View stuff. So you could simply handle the Button Clicked event and get access to all controls you need in code-behind. Commented Feb 6, 2024 at 15:14
  • @RiccardoMinato If that is the only way I'm probably fine with that. Though I hope to find a way to do this the MVVM way, so if anyone has a solution it is more than welcome!
    – Al John
    Commented Feb 6, 2024 at 15:45
  • If you are going to animate something on the View, you can do it in the cs file that does not break any MVVM principles
    – FreakyAli
    Commented Feb 6, 2024 at 15:50
  • @FreakyAli Thanks, but besides events how does that work with triggers on a data change in the ViewModel / DataTriggers?
    – Al John
    Commented Feb 6, 2024 at 15:52
  • What I am trying to say is you should not be doing this with your ViewModel, your ViewModel should not be aware of the animations taking place, if you want to use triggers anyway I can take a look
    – FreakyAli
    Commented Feb 6, 2024 at 15:54

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.