加载时不显示 UWP Transition
don't show UWP Transition when loading
我在 UWP/WinRT 中使用转换以遵循 Fast & Fluid UI 设计语言。例如,我有 StackPanels 定义这样的转换:
<StackPanel Orientation="Horizontal">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition></EntranceThemeTransition>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
这工作正常,但在首次填充 StackPanel 和添加新元素时会显示 ChildrenTransition 中设置的动画。我只想在添加新元素时显示它。有没有简单的方法来禁用动画?我已经考虑过创建一个附加的 属性 来环绕 ItemsSource 并删除 ChildrenTransition 的内容并在之后重置它,但这似乎不太优雅。
Is there an easy way of disabling the animation?
在代码隐藏中有一种简单的方法可以做到这一点,只需将此 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.
好像没有这个方法
根据 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>
我在 UWP/WinRT 中使用转换以遵循 Fast & Fluid UI 设计语言。例如,我有 StackPanels 定义这样的转换:
<StackPanel Orientation="Horizontal">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition></EntranceThemeTransition>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
这工作正常,但在首次填充 StackPanel 和添加新元素时会显示 ChildrenTransition 中设置的动画。我只想在添加新元素时显示它。有没有简单的方法来禁用动画?我已经考虑过创建一个附加的 属性 来环绕 ItemsSource 并删除 ChildrenTransition 的内容并在之后重置它,但这似乎不太优雅。
Is there an easy way of disabling the animation?
在代码隐藏中有一种简单的方法可以做到这一点,只需将此 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.
好像没有这个方法根据 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>