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

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();
}
}
}

Answer 2

Contrary to what Rob Caplan and Jayden statet it is actually possible to override the default Transition of a ContentDialog.
You can create a class extending the ContentDialog and subscribe to to Loading event as shown in the code below.
There you can override the Transitions of the newly created popup for the ContentDialog.
I know this is a late answer and this might be a bit of a hacky solution but since I was looking for it I hope I can help somebody.
Example Code (no xaml):
public class CustomContentDialog : ContentDialog {
public CustomContentDialog() {
Loading += (sender, args) => {
// gets the background rectangle and the popup containing the ContentDialog
var popups = VisualTreeHelper.GetOpenPopups(Window.Current);
// remove all transitions and childtransitions from the popups
foreach (var p in popups) {
p.ChildTransitions = new TransitionCollection {
// your transitions
};
p.Transitions = new TransitionCollection {
// your transitions
};
}
};
}
}