UWP Flyout - animation

Question

I'm pretty new in windows programming and I created a custom "Flyout" that looks like the "SettingsFlyout" and I want to change the animation of this "Flyout" that acts like the "SettingsFlyout". can I control the animation of "Flyout"? and if so can I create the same animation like the "SettingsFlyout"?

In the picture the layout that I want to edit his animation :

Answer 1

You can use Offset animation from Microsoft community toolkit to acheive the animation. I have added a sample animation of what you are trying to achieve.

Microsoft.Toolkit.Uwp.UI.Animations;

//Mainpage.Xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    x:Name="YourPage"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Button Click="settings_clicked" Content="Settings"/>
        <Grid x:Name="Settings_Popup_Grid" Background="Transparent" Tapped="SettingsPopup_Grid_Tapped" Visibility="Collapsed"/>
        <Popup HorizontalAlignment="Right" IsLightDismissEnabled="False"  IsOpen="False"  Opened="SettingsPopup_Opened" Closed="SettingsPopup_Closed" x:Name="SettingsPopup" VerticalAlignment="Stretch"  >
            <Border x:Name="SettingsPopupBorder" Width="320" Background="{ThemeResource SystemControlBackgroundAccentBrush}" BorderBrush="{StaticResource SystemControlBackgroundChromeMediumLowBrush}"  Height="{Binding ActualHeight, ElementName=View_Grid,Mode=OneWay}"  BorderThickness="1" VerticalAlignment="Stretch">
                <ListView>
                    <ListViewItem Content="Settings" Foreground="White" FontWeight="SemiBold"></ListViewItem>
                </ListView>
            </Border>
        </Popup>
    </Grid>
</Page>

//MainPage.Xaml.cs

 public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void settings_clicked(object sender, RoutedEventArgs e)
        {
            SettingsPopupBorder.Height = ((Frame)Window.Current.Content).ActualHeight;
            SettingsPopup.IsOpen = true;

            if (SettingsPopup.IsOpen)
                Settings_Popup_Grid.Visibility = Visibility.Visible;
            else
                Settings_Popup_Grid.Visibility = Visibility.Collapsed;
        }
        private async void SettingsPopup_Grid_Tapped(object sender, TappedRoutedEventArgs e)
        {
            await SettingsPopup.Offset(offsetX: 0,
                         offsetY: 0,
                         duration: 300, delay: 0).StartAsync();

            SettingsPopup.IsOpen = false;
        }
        private void SettingsPopup_Closed(object sender, object e)
        {
            Settings_Popup_Grid.Visibility = Visibility.Collapsed;
        }
        private async void SettingsPopup_Opened(object sender, object e)
        {
            await SettingsPopup.Offset(offsetX: -320,
                            offsetY: 0,
                              duration: 300, delay: 0).StartAsync();
        }
    }