How to change the transition ContentDialog?

Question

Windows Phone 8.1 has a new transition for dialogs and pop-ups that looks like the Venetian blind . I do not like it; I preferred what it looked like in Windows Phone 8, where it seems to be rotated / tilted. Is there any way to change this?

I tried things like:

<ContentDialog.Transitions> <TransitionCollection> </TransitionCollection> </ContentDialog.Transitions> 

But he does not change the transition.

Answer 1

You cannot override transitions in ContentDialog, etc. They are intended for easy ways to get standard behavior and will always use PopupThemeTransition.

If you want custom behavior, you can write a custom control that uses your own TransitionCollection. I could not find any existing samples of exactly this, but check out Callisto CustomDialog for a general concept. It mimics a Windows MessageDialog with content in a horizontally-centered strip in full-screen dimming, but it shouldn't be difficult to change the user interface to fit the top panel of Windows Phone.

Once you control yourself, you can use any transitions that you like. I don’t have a WP8 device that could find out what the transition is, but PaneThemeTransition with Edge = "Left" sounds as if it matches your description. If not, then after the transitions, you can change it to the one you like, or delete all the transitions and apply your own Storyboarded animation. I would either stick to the standard transition, which makes sense to the user or does a complete setup, as theme changes can change again.

Creating a panel that looks right is pretty simple. The hard part is how to show the control. If you include it in your Xaml so that it becomes part of the visual tree, you can simply show it. If it is not in the visual tree, you need to either add it to the visual tree or place it in a popup window.

Here is a quick and dirty UserControl that is hosted in Popup and uses PaneThemeTransition to navigate to the right.

 <UserControl x:Class="App199.MyUserControl1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App199" 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" PointerReleased="UserControl_PointerReleased"> <UserControl.Transitions> <TransitionCollection> <PaneThemeTransition Edge="Left"/> </TransitionCollection> </UserControl.Transitions> <Grid> <Grid.RowDefinitions> <RowDefinition x:Name="statusBarRow" Height="0" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <StackPanel Grid.Row ="1" Background="Black"> <Ellipse Height="100" Width="100" Fill="Yellow" /> <TextBlock>Lorem Ipsum</TextBlock> <Rectangle Height="100" Width="100" Fill="Red" /> </StackPanel> <Border Grid.Row="2" Background="#7F000000" /> </Grid> 

 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.Phone.UI.Input; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236 namespace App199 { public sealed partial class MyUserControl1 : UserControl { Popup hostPopup; public MyUserControl1() { this.InitializeComponent(); hostPopup = new Popup(); hostPopup.Child = this; Loaded += MyUserControl1_Loaded; Unloaded += MyUserControl1_Unloaded; } void MyUserControl1_Loaded(object sender, RoutedEventArgs e) { HardwareButtons.BackPressed += HardwareButtons_BackPressed; } void MyUserControl1_Unloaded(object sender, RoutedEventArgs e) { HardwareButtons.BackPressed -= HardwareButtons_BackPressed; } public void Show() { this.Height = Window.Current.Bounds.Height; this.Width = Window.Current.Bounds.Width; var occRect = Windows.UI.ViewManagement.StatusBar.GetForCurrentView().OccludedRect; statusBarRow.Height = new GridLength(occRect.Height); hostPopup.IsOpen = true; } void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e) { if (hostPopup.IsOpen) { hostPopup.IsOpen = false; e.Handled = true; } } private void UserControl_PointerReleased(object sender, PointerRoutedEventArgs e) { hostPopup.IsOpen = false; } } }