pop up animation

Question

pop up animation

Eduardo Gomez Romero 1,355

I have an poup that is opening with an animation

 private async void PopUpBorder_Loaded(object sender, EventArgs e) {
     PopUpBorder.Scale = 0.5;
     PopUpBorder.Opacity = 0;
     await Task.WhenAll(new Task[]
     {
          PopUpBorder.ScaleTo(1, 500, Easing.CubicInOut),
          PopUpBorder.FadeTo(1, 500, Easing.CubicInOut)
     });
 }

https://reccloud.com/u/1o1r2a1

but when I close it, it closes from the upper left, and I want to close it from the center
like the way I open it

  private static async Task ExiitAnimation(Popup popup) {
      if (popup.Content is VisualElement popUpBorder) {
          // Set the anchor to the center
          popUpBorder.AnchorX = 0.5;
          popUpBorder.AnchorY = 0.5;
          await Task.WhenAll(new Task[]
          {
              popUpBorder.ScaleTo(0.5, 500, Easing.CubicInOut),
              popUpBorder.FadeTo(0, 500, Easing.CubicInOut)
          });
          popup.Close();
      }

0 comments

2 answers

Your answer

Answer 1

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

2 deleted comments

Comments have been turned off. Learn more

Answer 2

Rolle Michel 75

To ensure your popup closes from the center, you need to adjust the AnchorX and AnchorY properties before starting the exit animation. It looks like you're on the right track. Just make sure you're setting those anchors to 0.5 for both axes. Here’s a revised version of your exit animation method:

private static async Task ExitAnimation(Popup popup) {
    if (popup.Content is VisualElement popUpBorder) {
        // Set the anchor to the center
        popUpBorder.AnchorX = 0.5;
        popUpBorder.AnchorY = 0.5;
        // Optionally reset scale and opacity before starting the animation
        popUpBorder.Scale = 1;
        popUpBorder.Opacity = 1;
        await Task.WhenAll(new Task[]
        {
            popUpBorder.ScaleTo(0.5, 500, Easing.CubicInOut),
            popUpBorder.FadeTo(0, 500, Easing.CubicInOut)
        });
        
        popup.Close();
    }
}

Eduardo Gomez Romero 1,355

hello. It still closes from the far left, I problably shoudgive you the xaml

<mct:Popup
    x:Class="METROWIND.Views.PopUps.AddTurbnePopUp"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:constant="clr-namespace:METROWIND.Constants"
    xmlns:controls="clr-namespace:METROWIND.Controls"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:sys="clr-namespace:System;assembly=netstandard"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:Name="TurbineAddPopUp"
    x:DataType="vm:AddTurbnePopUpViewModel"
    CanBeDismissedByTappingOutsideOfPopup="False"
    Color="Transparent">
    <Grid
        Padding="20"
        HeightRequest="500"
        RowDefinitions="Auto"
        WidthRequest="400">
        <Border
            x:Name="PopUpBorder"
            Grid.Row="0"
            BackgroundColor="#0213A0"
            Loaded="PopUpBorder_Loaded"
            StrokeShape="RoundRectangle 10"
            StrokeThickness="8">
            <Grid
                Padding="20"
                ColumnDefinitions="*, Auto"
                RowDefinitions="40, 60, 60, 60, 0, 60, *">
                <Label
                    Grid.Row="0"
                    Grid.Column="1"
                    Style="{x:DynamicResource CloseLabelStyle}">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer
                            Command="{Binding CloseCommand}"
                            CommandParameter="{Binding Source={x:Reference TurbineAddPopUp}}" />
                    </Label.GestureRecognizers>
                    <Label.Behaviors>
                        <OnIdiom x:TypeArguments="Behavior">
                            <OnIdiom.Desktop>
                                <mct:TouchBehavior HoveredBackgroundColor="Red" />
                            </OnIdiom.Desktop>
                        </OnIdiom>
                    </Label.Behaviors>
                </Label>
                <Border
                    Grid.Row="1"
                    Grid.ColumnSpan="2"
                    Style="{x:DynamicResource PopUpBorderStyle}">
                    <controls:BorderlessEntry
                        Placeholder="{x:Static rex:AppResource.TurbineName}"
                        Style="{x:DynamicResource AddTurbineForm}"
                        Text="{Binding TurbineName}" />
                </Border>
                <Border
                    Grid.Row="2"
                    Grid.ColumnSpan="2"
                    Style="{x:DynamicResource PopUpBorderStyle}">
                    <Grid ColumnDefinitions="*,60">
                        <Button
                            Grid.Column="1"
                            Command="{Binding OpenDatePickerCommand}"
                            CommandParameter="{Binding Source={x:Reference picker}}"
                            Style="{x:DynamicResource PopUpIconStyle}">
                            <Button.ImageSource>
                                <FontImageSource
                                    FontFamily="ma"
                                    Glyph="{Static constant:MaterialFonts.Calendar_month}"
                                    Color="Black" />
                            </Button.ImageSource>
                        </Button>
                        <controls:BorderlessEntry
                            Grid.Column="0"
                            IsReadOnly="True"
                            Placeholder="{x:Static rex:AppResource.TurbineInstalationDateTime}"
                            Style="{x:DynamicResource AddTurbineForm}"
                            Text="{Binding TurbineFormattedDate}"
                            VerticalOptions="Center" />
                    </Grid>
                </Border>
                <Border
                    Grid.Row="3"
                    Grid.ColumnSpan="2"
                    Style="{x:DynamicResource PopUpBorderStyle}">
                    <controls:BorderlessEntry
                        Placeholder="{x:Static rex:AppResource.TurbineAddress}"
                        Style="{x:DynamicResource AddTurbineForm}"
                        Text="{Binding TurbneAddress}" />
                </Border>
                <picker:SfDateTimePicker
                    x:Name="picker"
                    Grid.Row="4"
                    BackgroundColor="Transparent"
                    Style="{x:DynamicResource DateTimePickerStyle}">
                    <picker:SfDateTimePicker.Behaviors>
                        <mct:EventToCommandBehavior
                            Command="{Binding ConfirmDateCommand}"
                            CommandParameter="{Binding SelectedDate, Source={x:Reference picker}}"
                            EventName="OkButtonClicked" />
                        <mct:EventToCommandBehavior
                            Command="{Binding CancelCommand}"
                            CommandParameter="{Binding Source={x:Reference picker}}"
                            EventName="CancelButtonClicked" />
                    </picker:SfDateTimePicker.Behaviors>
                </picker:SfDateTimePicker>
                <Button
                    Grid.Row="5"
                    Grid.ColumnSpan="2"
                    Command="{Binding SaveCommand}"
                    CommandParameter="{Binding Source={x:Reference TurbineAddPopUp}}"
                    IsEnabled="{Binding IsSaveEnable}"
                    Text="{x:Static rex:AppResource.NewTurbine}"
                    VerticalOptions="End" />
            </Grid>
        </Border>
    </Grid>
</mct:Popup>

https://reccloud.com/u/hfzhgnb

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,461 Reputation points Microsoft External Staff

2024-10-04T03:06:51.4933333+00:00

On which platform? Windows/iOS or Android? (The video is not available in the link.)
Eduardo Gomez Romero 1,355 Reputation points

2024-10-07T02:04:27.4966667+00:00

in Windows works fine, but android is the problem, I presume IOS as well

https://reccloud.com/u/e9j1gi4
Eduardo Gomez Romero 1,355 Reputation points

2024-10-07T02:09:20.11+00:00

so now the video is up
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,461 Reputation points Microsoft External Staff

2024-10-08T09:45:12.1966667+00:00

I watched the video. When clicking the X button, the view will go the left on the page.

When you run the app on another Android emulator, does the issue still exist?
Eduardo Gomez Romero 1,355 Reputation points

2024-10-08T10:57:35.5666667+00:00

Yes on Windows it closes rom me center, on Android from the left

https://reccloud.com/u/7p406jy