加载时不显示 UWP 过渡答案

【问题标题】：don't show UWP Transition when loading加载时不显示 UWP 过渡
【发布时间】：2017-02-11 15:42:07
【问题描述】：

我在 UWP / WinRT 中使用过渡来遵循快速流畅的 UI 设计语言。例如，我有 StackPanels 来定义这样的转换：

    <StackPanel Orientation="Horizontal">
        <StackPanel.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition></EntranceThemeTransition>
            </TransitionCollection>
        </StackPanel.ChildrenTransitions>
    </StackPanel>

这很好用，但是当第一次填充 StackPanel 和添加新元素时，会显示 ChildrenTransition 中设置的动画。我只想在添加新元素时显示它。有没有一种简单的方法可以禁用动画？我已经考虑过创建一个附加属性来包装 ItemsSource 并删除 ChildrenTransition 的内容并在之后重置它，但这似乎不太优雅。

【问题讨论】：

标签： windows-runtime uwp winrt-xaml

【解决方案1】：

有没有一种简单的方法可以禁用动画？

在后面的代码中有一个简单的方法可以做到这一点，只需将这个Transition 添加到这个StackPanel 的Loaded 事件中：

<StackPanel x:Name="rootStackPanel" Loaded="rootStackPanel_Loaded">
    <!--<StackPanel.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromVerticalOffset="600" x:Name="enttst">
            </EntranceThemeTransition>
        </TransitionCollection>
    </StackPanel.ChildrenTransitions>-->

    <TextBlock Text="11111" FontSize="30" />

    <TextBlock Text="2222" FontSize="20" Margin="0,5" />

    <Button Content="add new textblock" Click="Button_Click_1" />
</StackPanel>

在后面的代码中：

private void rootStackPanel_Loaded(object sender, RoutedEventArgs e)
{
    TransitionCollection trs = new TransitionCollection();
    EntranceThemeTransition enttrs = new EntranceThemeTransition()
    {
        FromVerticalOffset = 600
    };
    trs.Add(enttrs);
    rootStackPanel.ChildrenTransitions = trs;
}

也许你也觉得这个方法不太优雅，但似乎在纯 xaml 中没有办法做到这一点。

【讨论】：

【解决方案2】：

根据 Grace Feng 的回答，我通过创建附加属性编写了一个更具 XAML 风格的解决方案：

public class PanelExtensions : DependencyObject
{
    public static readonly DependencyProperty ChildrenTransitionsAfterLoadProperty =
        DependencyProperty.Register("ChildrenTransitionsAfterLoad", typeof(TransitionCollection),
            typeof(Panel), new PropertyMetadata(new TransitionCollection()));

    public static TransitionCollection GetChildrenTransitionsAfterLoad(DependencyObject d)
    {
        return (TransitionCollection)d.GetValue(ChildrenTransitionsAfterLoadProperty);
    }

    public static void SetChildrenTransitionsAfterLoad(DependencyObject d, TransitionCollection collection)
    {
        d.SetValue(ChildrenTransitionsAfterLoadProperty, collection);
        var panel = d as Panel;
        if (panel == null)
            return;
        panel.Loaded += PanelOnLoaded;
    }

    private static void PanelOnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        (sender as Panel).ChildrenTransitions = GetChildrenTransitionsAfterLoad(sender as DependencyObject);
    }
}

可以这样使用：

<StackPanel Orientation="Horizontal">
    <yourNamespace:PanelExtensions.ChildrenTransitionsAfterLoad>
        <TransitionCollection>
            <EntranceThemeTransition></EntranceThemeTransition>
        </TransitionCollection>
    </yourNamespace:PanelExtensions.ChildrenTransitionsAfterLoad>
</StackPanel>

【讨论】：