XAML, Blend, and Snapped View

I was working on a single page Windows 8 store app using XAML and I knew I needed to create a snapped view. The problem was that I didn’t know how to get this to work. When you use the built in templates Microsoft does a lot of the work for you, but if you are doing it all by hand it can be difficult to find out exactly what you need to do to get it to work.

I decided I’d put together a little walkthrough of setting up an app that handles the snapped view to help others in my situation. This example is in VB.NET but I’ve also done it with C#, both final examples are available for download from my SkyDrive at http://sdrv.ms/ZXDDZE.

The walkthrough will create a simple app with 3 horizontal buttons that will change orientation when in snapped mode.

First create an app

Open VS and select new project. Under Visual Basic select the Windows Store option. Then select the Blank App (XAML). I’ve named my app TrafficLight but you can name it whatever you want.

image

The App.xaml.vb code window should open. We won’t need this so you can close it.

Making the App do something

We will be working with the MainPage.xaml file from your solution. Double click it to open it in the VS designer. You should see a blank page. If you haven’t done so, make sure the split view turned on (I prefer Horizontal).

In the XAML code for the page you should see a <Grid… definition. Change the Grid definition by adding a Name (mainGrid), it will look like this:

    <Grid x:Name="mainGrid" 
Background="{StaticResource
ApplicationPageBackgroundThemeBrush}">


     </Grid>
Now lets add a StackPanel to hold our buttons:
    <Grid x:Name="mainGrid" 
Background="{StaticResource
ApplicationPageBackgroundThemeBrush}">


        <StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
        </StackPanel>
   </Grid>

and now lets add some buttons inside the StackPanel:

            <Button x:Name="redLight" 
HorizontalAlignment="Center"
Height="200" Width="200"
Margin="10,20"
Content="Red"
Click="Light_Click"
Background="Red"
Foreground="Black"/>

You will want to add two more buttons just like this one but with the x:Name set to yellowLight and GreenLight and the Content set to Yellow and Green.

After doing this your page should have 3 boxes on it and look something like this:

image

 

Just to make the app actually do something we can add some code to the MainPage.xaml.vb code that will change the background of the main grid to the button color we select. find the Click attribute in any of the buttons and right click on it and select Navigate to Event Handler. This will open the MainPage.xaml.vb code and position your cursor inside the click event handler. Add this code to it.

        Dim bColor As SolidColorBrush = New SolidColorBrush()
         Select Case sender.Content
             Case "Red"
                 bColor.Color = Colors.Red
             Case "Yellow"
                 bColor.Color = Colors.Yellow
             Case "Green"
                 bColor.Color = Colors.Green
         End Select
         mainGrid.Background = bColor

You will have to fix the errors under Colors by importing the Windows.UI namespace.

At this point you should be able to run the code and be able to change the background color of the form by click on the buttons.

You should also notice that if you snap the app to one of the sides you will only see a portion of the Red and Green buttons.

Handling Snapped

There are two reasons why the App looks this way. The first is that we didn’t define how the app should behave when in snapped mode, the other is that we didn’t tell the app how to see  that the size of the window had changed.

First lets decide how we want the App to look when in snapped mode.

Stop the app if it is still running. Then open the MainPage.xaml file and add the following code after the StackPanel:

        <VisualStateManager.VisualStateGroups>
             <!– Visual states reflect the application’s view state –>
             <VisualStateGroup :Name=”ApplicationViewStates”>
                 <VisualState x:Name=”FullScreenLandscape”/>
                 <VisualState x:Name=”Filled”>
                 </VisualState>
                 <VisualState x:Name=”FullScreenPortrait”>
                 </VisualState>
                 <VisualState x:Name=”Snapped”>
                 </VisualState>
              </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>

This code defines our different Visual States of the app. The x:Name attribute can be anything.

Now that we have setup our different states we need to define how they will look. We will actually be setting up a storyboard for the snapped view and to do this we use Blend.

Right click on the MainPage.xaml file in your solution explorer and select Open in Blend… You can do all this without using Blend, but Blend makes it much easier to get started.

Once Blend starts and opens your file we can start changing the views. At the top left you should see four tabs that look like this:

image

We are going to be working with the States and Device tabs. Click on the States tab an you should see the different states listed that we defined at the bottom of our page:

image

We will only be modifying the Snapped view in this walkthrough but you can certainly experiment with the other views.

I like to set the device first, so go to the device tab and select the snapped view then come back to the states tab.

Once back in the States tab, click on the snapped item. You should see a red dot next to it, the rendered view should have a red line around it and the words Snapped state recording is on should be showing.

Now comes the fun part, in the Objects and Timeline tab open the mainGrid by clicking on the triangle to its left and you should see the StackPanel showing. Click on the StackPanel, your display should look like this:

image

Now on the right side of the screen you should see the properties of the StackPanel. Go to the Layout section and change the Orientation to Vertical.

image

This will change the display so that you can now see all the buttons. You will also see a red dot next to the StackPanel.

Save the MainPage.xaml file and close Blend. When you go back to Visual Studio you will see a dialog that says the file was changed outside of visual studio. Select Yes to All.

Now if you look at the XAML code for MainPage.xaml you will see that inside the visualState for Snapped there is a storyboard and instructions on how the page gets modified.

We still need to add one more thing to make it all work. We have to let the page know that the windows size has changed. We will want to add an event and handler to the VB code. Go to the top of the XAML code and put the cursor above the Grid definition. Now go to the properties panel on the right and click on the lighting bolt (event handlers) and find SizeChanged. Enter Current_SizeChanged and hit enter. You will be taken to the VB code where you will need to add the following code:

Select Case Windows.UI.ViewManagement.ApplicationView.Value
Case ApplicationViewState.Filled
  VisualStateManager.GoToState(Me, "Filled", False)
Case ApplicationViewState.FullScreenLandscape
  VisualStateManager.GoToState(Me, "FullScreenLandscape", False)
Case ApplicationViewState.Snapped
  VisualStateManager.GoToState(Me, "Snapped", False)
Case ApplicationViewState.FullScreenPortrait
  VisualStateManager.GoToState(Me, "FullScreenPortrait", False)
Case Else
End Select

Now you should be able to run the app and the StackPanel will change orientation when you put the app in snapped mode.

The one thing that I had trouble with was making sure I was recording while in Blend. If you aren’t careful then you will be modifying the base layout of your app. Other properties could be modified as well, I choose to simply change the StackPanel. I’ll leave it up to you to make more change.

About these ads

2 Responses to XAML, Blend, and Snapped View

  1. dvb t says:

    You really make it seem so easy with your presentation but I find this matter to be actually something that I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of it!

  2. JD says:

    This was a great example. although every time I would my window I have to change to VisualStateManager.GoToState(Me, “FullScreenLandscape”, False), Is there any other way…
    I think my controls are overriding the visual state when window activates.
    jd.

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

Follow

Get every new post delivered to your Inbox.

Join 111 other followers

%d bloggers like this: