CODEWITHSUNDEEP
c#windows-8microsoft-metrowinrt-xaml
synth3tk
synth3tk

Reputation: 171

Remove background animation with XAML C#?

I'm creating a header with the back button and logo. I figured out how to add a background using

<Grid Grid.ColumnSpan="2" Background="Black">
[...]
</Grid>

But now I end up with the background being part of the page animation transition. What I want is exactly like the header background in Microsoft's Contoso News demonstration application on their "Animating your UI" page. That first video shows all the content in the app being animated with the header being static.

I've tried multiple searches and putting together code I've thought would work, including messing with <EntranceThemeTransition FromHorizontalOffset="0" FromVerticalOffset="0"/>. Unless I'm missing something, I can't find documentation on removing an animation.

A step in the right direction would be greatly appreciated. Thanks.

Upvotes: 3

Views: 1176

Answers (1)

synth3tk
synth3tk

Reputation: 171

I guess I didn't read Microsoft's documentation thoroughly-enough during a 3am session.

What I needed to do was add a custom EntranceThemeTransition to the parent:

<Style x:Key="LayoutRootStyle" TargetType="Panel">
    <Setter Property="Background" Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/>
    <Setter Property="ChildrenTransitions">
        <Setter.Value>
            <TransitionCollection>
                <EntranceThemeTransition FromHorizontalOffset="0" IsStaggeringEnabled="false"/>
            </TransitionCollection>
        </Setter.Value>
    </Setter>
</Style>

The FromHorizontalOffset="0" tells it to move zero pixels horizontally (in other words, not to animate at all), and IsStaggeringEnabled="false" tells it to render all the items at once. From here, I can add a custom animation to each of the children.

MSDN Resources:
IsStaggeringEnabled property
FromHorizontalOffset property

Upvotes: 4

Related Questions