Is it possible to remove or change default flyout transition animation?

Question

When you add a flyout for a button control, for example, after you tap on that button the flyout is displayed with a transition animation which depends on the Placement property of the flyout. If the Placement is set to Top the animation looks like drop down from that button. In my case I would like to either remove the animation altogether or make it expanding by x and y from that button. How to do that?

Answer 1

There is a similar case:How to change ContentDialog transition.

As Rob Caplan said,You cannot override the transitions in the ContentDialog, etc. They are designed to be easy ways to get standard behaviour and will always use the PopupThemeTransition.

So if you want non-standard behaviour then you can write a custom control which uses your own TransitionCollection or without Transition.

For example:

<UserControl
    x:Class="Is_it_possible_to_remove_or_change_default_flyou.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Is_it_possible_to_remove_or_change_default_flyou"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
   LostFocus="UserControl_LostFocus">

    <UserControl.Transitions>
        <TransitionCollection>
             <!--Add the Transition that you want-->
        </TransitionCollection>
    </UserControl.Transitions>

    <Grid Name="MyGrid" BorderBrush="Gray" BorderThickness="1" Background="LightGray">
        <StackPanel>
            <TextBox Name="MyText" Text="Hello"></TextBox>
            <TextBox Text="!"></TextBox>
        </StackPanel>
    </Grid>
</UserControl>

The code behind:

 public sealed partial class MyUserControl1 : UserControl
 {
     public Popup hostPopup;
     public double actHei;
     public double actWei;

     public MyUserControl1()
     {
         this.InitializeComponent();
         hostPopup = new Popup();
         hostPopup.Child = this;
     }

     public void Show()
     {
         hostPopup.IsOpen = true;
         actHei = MyGrid.ActualHeight;
         actWei = MyGrid.ActualWidth;
         MyText.Focus(FocusState.Pointer);
     }

     private void UserControl_LostFocus(object sender, RoutedEventArgs e)
     {
         hostPopup.IsOpen = false;
     }
 }

In MainPage code behind:

public sealed partial class MainPage : Page
{
    public MyUserControl1 popup;

    public MainPage()
    {
        this.InitializeComponent();
        popup = new MyUserControl1();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (popup.hostPopup.IsOpen != true)
        {
            var ttv = MyButton.TransformToVisual(Window.Current.Content);
            Point screenCoords = ttv.TransformPoint(new Point(0, 0));
            popup.hostPopup.VerticalOffset = screenCoords.Y - 100;
            popup.hostPopup.HorizontalOffset = screenCoords.X;
            popup.Show();
        }
    }
}