Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Use Triggers To Change Grid Column/Row Values in Universal Windows Apps

When creating your awesome layout to your awesome new app, you’ll often use Grids as a way of ensuring things are placed where you want them to be and you’d most likely use the ColumnDefinitions and RowDefinitions. Using these has a number of benefits, not least letting you specify exact heights/widths for your columns/rows, but you can also use Auto and the * values to set screen percentages. What this means is you can have a very exact UI or one that adapts as the size of the window changes.

Adapting to the size of the window is something that’s more relevant to UWPs than ever before with you bringing one UI to all possible screens the user can use your app on. But what if you still want to keep some rows at a certain screen percentage until the user hits a trigger point? Well, a small, but subtle change to xaml now allows you to do more with your Column/RowDefinitions.

The Solution

In previous xaml versions, you were able to add an x:name to your Row/Column definition, but you could never actually use it, certainly not in a visual state. Now, however, that’s changed. So not only can you use the power of the new StateTriggers, and the custom ones that you can create, but you can now apply the trigger setters to affect your definitions.

Enough jibber jabber, let’s look at some xaml.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Wide">
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="620"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="LeftSide.Width"
                                Value="100"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="Narrow">
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="LeftSide.Width"
                                Value="0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name="LayoutGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftSide"
                                  Width="0"/>
                <ColumnDefinition x:Name="RightSide"
                                  Width="*"/>
            </Grid.ColumnDefinitions>
            
            <Rectangle Grid.Column="0"
                       Fill="SkyBlue"/>
                       
            <Rectangle Grid.Column="1"
                       Fill="Red"/>
        </Grid>
    </Grid>

As you can see, it’s only a basic amount of xaml, but enough to get the point across and show you what can be achieved now. What the xaml is saying is, if the width of the app is between 0 and 619, then the LeftSide ColumnDefinition’s width should be 0, once it hits 620, then set it to be 100.

The app will work like this when run:
GridTriggersAnimation

In previous versions of xaml, you could have written the same kind of xaml as this, but it would never have actually changed the values when a visual state was set.

I have a sample app that shows off both of these in the new UWP app and how you could have tried doing it in the old Universal apps that wouldn’t have had any affect. This project can be grabbed from https://github.com/Ferret-Labs/MetroNuggetsCode/tree/master/GridTriggers

SL

Advertisements

5 responses to “Use Triggers To Change Grid Column/Row Values in Universal Windows Apps

  1. Pingback: Dew Drop – June 24, 2015 (#2041) | Morning Dew

  2. amine da (@MAYHEM54) August 25, 2015 at 23:23

    how about changing a control row and column with visual state ?

  3. Andrew December 6, 2015 at 01:39

    Thanks, took me ages to find this answer, exactly what I was looking for.

  4. amacadabra December 6, 2015 at 01:41

    Thanks – I’ve been looking in vain to do this, it didn’t seem to be possible, exactly what I was looking for.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: