CSS, Expression Blend, HTML5, Windows Store apps

setting view states in HTML windows store apps using Blend

Intro

From developing XAML applications I got used to working with the visual state manager to set various states of my applications and controls. In Windows Store apps that are build using XAML use the visual state manager to change various properties when the view state of the app changes. The app can be ran in fullscreen, filled or snapped state.

When building Windows Store apps using HTML and JavaScript I wanted to show some UI different when the view state changes. One way to accomplish this is to change the CSS class of the elements from JavaScript. Just handle the change in view states and call some methods to set the classes.

Another way comes very close to the visual state manager from the XAML world. And can be done from within Blend.

CSS Media queries

It turns out you can set the styles for the view states using CSS media queries or media types. You might know these from building websites, where they’re often used to set different styles for different media or screen sizes.

If you look at the Style Rules pane in Blend for Visual Studio, when having an HTML Windows Store app opened, you can see four different “@media” definitions. Each one is used for a different view states. The media queries are added by default, but if they are missing or you want to add another you can do this by right click on the .css file.

image

Notice that only the fullscreen-landscape is white. The other three are greyed out. This is an indication that Blend is showing the landscape orientation at this moment. You can change the current orientation used in Blend on the Device pane. Just select another option for view.

image

To demonstrate how to use this I created a very simple example showing a grid with 6 boxes. For this I used a FlexBox. When a FlexBox is filled with elements they are stacked horizontally or vertically and wrapping could be enabled.

image

html:

<div class="ms-flexbox">
    <div class="tile red"></div>
    <div class="tile green"></div>
    <div class="tile red"></div>
    <div class="tile green"></div>
    <div class="tile red"></div>
    <div class="tile green"></div>
</div>

css:

.ms-flexbox {
    display: -ms-flexbox;
    -ms-flex-flow: wrap column;
    width: 1000px;
}
.tile {
    width: 250px;
    height: 200px;
    margin: 20px;
}
.tile.red {
    background-color:red;
}
.tile.green {
    background-color:green;
}

A similar layout like this is often used in Windows Store apps. Unfortunately it does not work when the app is snapped. In the snapped state the elements should be shown in a list, but will remain in three columns at this point. You’ll need to place parts of the .ms-flexbox class in both @media queries. You could do this by hand by editing the .css file, but I’ll show you how to do it using Blend.

The first step is to copy the .ms-flexbox class to the fullscreen-landscape and to the snapped media queries. Just right-click the .ms-flexbox entry on the Style Rules pane and click copy. That paste it on the fullscreen-landscape and the snapped media queries.

image

image


 

 

Next, select the original .ms-flexbox class and have a look at the CSS Properties pane. There’s a long list of collapsible panels containing a lot of properties. To shorten the list to only the properties that have a value, check the “View set properties only” checkbox. 

image

The original .ms-flexbox style will be the style that is applied to all view states and contains the properties that are equal in every state. The Flexbox properties will be different. So these need to be removed. To do this click on the small advanced properties square next to Flexbox and select clear.

image

Select the .ms-flexbox style on the fullscreen media query on the Style Rules pane. For this part of the style clear the layout and the sizing. And do the same for the style on the snapped media query.

The style for the snapped state has to have some different properties for the Flexbox. Start by setting the View to the snapped state on the Device pane, so it visible what the change in properties is causing. First, clear the –ms-flex-wrap property, because in this state wrapping is not needed. Than, set the
–ms-flex-direction property to column. Notice the change in the designer.

image

And that’s it. Well… Almost actually. We haven’t done anything with the filled and fullscreen-portrait states. You could copy the state from the landscape state, but this would mean you’ll have to keep them in sync in case of changes.

At this point I changed the CSS by hand and added the filled and portrait definition to the landscape view state, which results to:

@media screen and (-ms-view-state: fullscreen-landscape),
screen and (-ms-view-state: fullscreen-portrait),
screen and (-ms-view-state: filled)
{
    .ms-flexbox {
        -ms-flex-flow: wrap;
    }
}

Wrap up

Handling view states is an important part of you Windows Store app. In a real world application the styles and HTML will be a lot more complex than I showed here, but I hope you’ll get the idea. Otherwise, just drop me a line and I’ll see if I can expand the tutorial.

2 comments

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: