Custom Animation on X axis in .NET MAUI

Let me start with 2 images, the from and the to image:

I would like to change the width of the element (called trackListSideBar) on a button press, but without any success. I managed to achieve some animation with scale, but that scales the content too.

Here is my XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:converters="clr-namespace:Solution.MobileApp.Converters"
             xmlns:viewModels="clr-namespace:Solution.MobileApp.ViewModels"
             x:Class="Solution.MobileApp.Pages.Tabs.PlayerPage"
             x:DataType="viewModels:PlayerPageViewModel"
             Title="wPlayer"
             BackgroundColor="Black"
             Shell.NavBarIsVisible="False"
             Unloaded="OnUnloaded">
  <ContentPage.Resources>
    <toolkit:TimeSpanToSecondsConverter x:Key="TimeSpanConverter" />
    <converters:SecondsToStringConverter x:Key="SecondsToStringConverter" />
  </ContentPage.Resources>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="0" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>

    <Frame Grid.Row="0" Grid.RowSpan="5" Grid.Column="0"
           ZIndex="100"
           HeightRequest="600"
           x:Name="trackListSideBar">
      <ImageButton Source="song.png" Clicked="OnTrackListImageClicked" WidthRequest="50" HeightRequest="50" />
    </Frame>

    <toolkit:MediaElement
        Grid.Row="0"
        Grid.Column="1"
        x:Name="mediaElement"
        ShouldAutoPlay="True"
        Source="{Binding Source}"
        MediaEnded="OnMediaEnded"
        MediaFailed="OnMediaFailed"
        MediaOpened="OnMediaOpened"
        PositionChanged="OnPositionChanged"
        StateChanged="OnStateChanged"
        SeekCompleted="OnSeekCompleted" />

    <HorizontalStackLayout Grid.Row="1" Grid.Column="1" Padding="0,0,0,15">
      <Label HorizontalOptions="Center">
        <Label.Text>
          <MultiBinding StringFormat="Current State: {0}">
            <Binding Path="CurrentState" Source="{x:Reference mediaElement}" />
          </MultiBinding>
        </Label.Text>
      </Label>
    </HorizontalStackLayout>

    <Grid Grid.Row="2" Grid.Column="1" Padding="0,10,0,10" ColumnDefinitions="*,*,*,*" ColumnSpacing="5">
      <ImageButton Grid.Column="0" Source="back.png" Clicked="OnPreviousClicked" HeightRequest="50" WidthRequest="50" />
      <ImageButton Grid.Column="1" Source="play.png" Clicked="OnPlayOrPauseClicked" HeightRequest="50" WidthRequest="50">
        <ImageButton.Triggers>
          <DataTrigger TargetType="ImageButton"
                       Binding="{Binding CurrentState, Source={x:Reference mediaElement}}"
                       Value="Playing">
            <Setter Property="Source" Value="pause.png" />
          </DataTrigger>
          <DataTrigger TargetType="ImageButton"
                       Binding="{Binding CurrentState, Source={x:Reference mediaElement}}"
                       Value="Paused">
            <Setter Property="Source" Value="play.png" />
          </DataTrigger>
          <DataTrigger TargetType="ImageButton"
                       Binding="{Binding CurrentState, Source={x:Reference mediaElement}}"
                       Value="None">
            <Setter Property="Source" Value="play.png" />
          </DataTrigger>
        </ImageButton.Triggers>
      </ImageButton>
      <ImageButton Grid.Column="2" Source="stop.png" Clicked="OnStopClicked" HeightRequest="50" WidthRequest="50" />
      <ImageButton Grid.Column="3" Source="forward.png" Clicked="OnNextClicked" HeightRequest="50" WidthRequest="50" />
    </Grid>

    <VerticalStackLayout Grid.Row="3" Grid.Column="1" Padding="0,10,0,10">
      <Slider x:Name="positionSlider"
              MinimumTrackColor="Gray"
              DragStarted="OnSliderDragStarted"
              DragCompleted="OnSliderDragCompleted"/>

      <HorizontalStackLayout Padding="0,10,0,10">
        <Label HorizontalOptions="Center">
          <Label.Text>
            <MultiBinding StringFormat="{}Position: {0}/{1}">
              <Binding Path="Position" Source="{x:Reference mediaElement}" Converter="{StaticResource SecondsToStringConverter}" />
              <Binding Path="Duration" Source="{x:Reference mediaElement}" Converter="{StaticResource SecondsToStringConverter}" />
            </MultiBinding>
          </Label.Text>
        </Label>
      </HorizontalStackLayout>
    </VerticalStackLayout>

    <Grid Grid.Row="4" Grid.Column="1" Padding="0,10,0,10" RowDefinitions="*,*" ColumnDefinitions="*,*" ColumnSpacing="5">
      <Label Grid.Column="0" Grid.Row="0">
        <Label.FormattedText>
          <FormattedString>
            <Span Text="Volume:" />
            <Span Text="{Binding Source={x:Reference mediaElement}, Path=Volume, StringFormat='{}{0:P0}'}" />
          </FormattedString>
        </Label.FormattedText>
      </Label>
      <Slider Grid.Column="0" Grid.Row="1" 
              Maximum="1.0"
              Minimum="0.0"
              MinimumTrackColor="Red"
              MaximumTrackColor="Gray"
              Margin="10,0,10,0">
        <Slider.Value>
          <Binding Path="Volume" Source="{x:Reference mediaElement}" />
        </Slider.Value>
      </Slider>
      <ImageButton Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
                   HeightRequest="50" WidthRequest="50"
                   Source="mute.png"
                   Clicked="OnMuteClicked">
        <ImageButton.Triggers>
          <DataTrigger TargetType="ImageButton"
                       Binding="{Binding ShouldMute, Source={x:Reference mediaElement}}"
                       Value="True">
            <Setter Property="Source" Value="sound.png" />
          </DataTrigger>
          <DataTrigger TargetType="ImageButton"
                       Binding="{Binding ShouldMute, Source={x:Reference mediaElement}}"
                       Value="False">
            <Setter Property="Source" Value="mute.png" />
          </DataTrigger>
        </ImageButton.Triggers>
      </ImageButton>
    </Grid>
  </Grid>
</ContentPage>

So I am struggling with the buttons event handler or the animation.

>Solution :

In .NET MAUI, you can create custom animations in the code-behind:

private async void OnTrackListImageClicked(object sender, EventArgs args)
{
    await MainThread.InvokeOnMainThreadAsync(() => {
        var animation = new Animation(v => trackListSideBar.WidthRequest = v, 50, 200);
        animation.Commit(this, "TrackListSideBarAnimation", 16, 1000, Easing.CubinIn);
    });
}

This will create an animation which has a duration of one second and changes the WidthRequest of the trackListSideBar from 50 units to 200 units.