如何更改 ContentDialog 过渡? [英] How to change ContentDialog transition?

问题描述

Windows Phone 8.1 为对话框和弹出窗口引入了一个新的过渡，看起来像一个百叶窗.我不喜欢这样；我更喜欢它在 Windows Phone 8 中旋转/倾斜的样子.有什么办法可以改变这种情况吗?

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?

我尝试过以下方法:

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

但它不会改变过渡.

推荐答案

您不能覆盖 ContentDialog 等中的转换.它们旨在以简单的方式获得标准行为，并且将始终使用 PopupThemeTransition.

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.

如果您想要非标准行为，那么您可以编写一个使用您自己的 TransitionCollection 的自定义控件.我找不到任何与此相关的现有示例，但请查看 Callisto 的 CustomDialog 以了解一般概念.它模仿了 Windows MessageDialog，其内容位于全屏调光窗口上方水平居中的栏中，但移动 UI 以匹配 Windows Phone 的顶部停靠面板应该不难.

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.

一旦您掌握了自己的控制权，您就可以使用任何您喜欢的过渡效果.我手边没有 WP8 设备来查看过渡是什么，但是带有 Edge="Left" 的 PaneThemeTransition 听起来与您的描述相符.如果没有，那么一旦您进行了转场，您可以将其换成您喜欢的转场或删除所有转场并应用您自己的故事板动画.我要么坚持使用对用户有意义的标准过渡，要么进行完全自定义，因为主题过渡可能会再次更改.

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.

创建一个看起来不错的面板非常简单.棘手的部分是如何显示控件.如果您将它包含在您的 Xaml 中，因此它是可视化树的一部分，那么您可以直接显示它.如果它不在可视化树中，那么您需要将其添加到可视化树中或将其托管在弹出窗口中.

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.

这是一个快速而肮脏的 UserControl，它在一个 Popup 中托管自己，并使用 PaneThemeTransition 从右侧滑入.

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

这篇关于如何更改 ContentDialog 过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！