Question

I have a StackPanel containing three red Grid elements in the fullscreen view of a Metro app.

Before:

What is the proper way of dynamically modifying the Style of all child Grids when the application changes to snapped state, such that their Background is set to blue and their Height to N pixels?

After:

Answer 1

In WinRT XAML, while you can change styles at run time, the changes won’t be propagated to existing elements with that style. You can change the style assigned to an element, but you can’t change the style. So, you can clear / reset a style and it will change the element, but you can’t change the style and have it be automatically adjusted unfortunately.

If it’s not too many Grids the easiest would be to start with a LayoutAwarePage (part of the VS/Blend Metro templates) and in VisualStates assigned to ApplicationViewStates, simply adjust each of the Grids per your needs. You can apply a new style or size, or anything you’d like. It’s pretty straightforward.

Or, you can also create a resource that has the various states defined and in the page where your grids are located, you should be able to wire up the Loaded event to the public StartLayoutUpdates method in the base class (LayoutAwarePage):

By this, you’d have states like this available. However, these would need to be defined on the Grid — which might be messy (and impractical). You’d be better off switching to a Templated Control at this point (or a UserControl) that would contain the grid instance and apply the states there.

<VisualStateGroup x:Name="ApplicationViewStates">
    <VisualState x:Name="FullScreenLandscape"/>
    <VisualState x:Name="Filled"/>
    <VisualState x:Name="FullScreenPortrait" />
    <!-- etc ...->
</VisualStateGroup>

Or, you can create a Control and hook up the Window Resizing/Layout events manually and do the same work. It’s basically the same (just depends if where you want to put the logic).