How to change ContentDialog transition?

Question

Windows Phone 8.1 introduced a new transition for dialogs and flyouts that looks like a Venetian blind. I don't like this; I preferred the way it looked in Windows Phone 8 where it sort of swiveled/tilted in. Is there any way to change this?

I've tried things like:

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

But it doesn't change the transition.

Answer 1

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.

If you want non-standard behaviour then you can write a custom control which uses your own TransitionCollection. I couldn't find any existing samples exactly of this, but check out Callisto's CustomDialog for the general concept. It mimics the Windows MessageDialog with contents in a horizontally centred bar over a full-screen dimming window, but it shouldn't be hard to shift the UI to match Windows Phone's top-docked panel.

Once you're in your own control you can use whichever transitions you like. I don't have a WP8 device handy to see what the transition was, but the PaneThemeTransition with Edge="Left" sounds like it matches your description. If not then once you have transitions going you can swap it for one you like or remove all transitions and apply your own Storyboarded animation. I'd either stick with a standard transition which makes sense for the user or do a full customisation since the theme transitions could change again.

Creating a panel that looks right is pretty easy. The tricky part is in how to show the control. If you include it in your Xaml so it's part of the visual tree to start with then you can just show it. If it's not in the visual tree then you need to either add it to the visual tree or host it in a Popup.

Here's a quick and dirty UserControl which hosts itself in a Popup and uses a PaneThemeTransition to slide in from 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;
        }
    }
}