CODEWITHSUNDEEP
windows-runtimeuwpwinrt-xaml
SebastianR
SebastianR

Reputation: 2193

don't show UWP Transition when loading

I use transitions in UWP / WinRT to follow the Fast & Fluid UI design language. For example I have StackPanels that define transitions like this:

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

This works fine, but the animation set in ChildrenTransition is shown when the StackPanel is first populated and when I add new elements. I only want to display it when a new element is added. Is there an easy way of disabling the animation? I've already thought about creating an attached property that wraps around ItemsSource and removes the content of ChildrenTransition and resets it afterwards, but this doesn't seem too elegant.

Upvotes: 0

Views: 189

Answers (2)

SebastianR
SebastianR

Reputation: 2193

Based on Grace Feng's answer I've written a more XAML style solution by creating an attached property:

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

It can be used like this:

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

Upvotes: 0

Grace Feng
Grace Feng

Reputation: 16652

Is there an easy way of disabling the animation?

There is a easy way to do this in code behind, just add this Transition in the Loaded event of this StackPanel:

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

in code behind:

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

Perhaps you also think this method is not quite elegant, but seems there is no method to do this in pure xaml.

Upvotes: 1

Related Questions