Designing your app with XAML: Resizing

Design your C#/XAML app so it responds as expected to resizing.

An attractive feature of Windows 8 is the ability to display two or more apps on the screen at the same time. When the user drags down from the top of the screen, they can push an app to the left or right side of the screen, and create space for a new app to appear. Your app must be ready for this to happen, and if necessary change how or what it is currently displaying on-screen.

A screen showing one app in view, with room for a second app to be opened and displayed

If you've used a XAML grid to position your controls, things might look ok by default, but you may want to fine-tune a few things. It's best to respond to the same messages, and use the Visual State Manager, as discussed in Designing your app with XAML: Orientation. For example, you might want to create a new Visual State called Narrow to hide some controls in order give the remaining ones more room. Here's how to do that.

Detecting the screen size change

First, let's add the handler to the .cs code behind page (if you haven't already) to work with orientation changes:


        public MyPage()
        {
            this.InitializeComponent();
           
            // Add the handler
            Window.Current.SizeChanged += Current_SizeChanged;
         }
        
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            double width = e.Size.Width;

            // Obtain the orientation - Landscape or Portait
            string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();

            // Test to see if the app is fullscreen or not
            if (ApplicationView.GetForCurrentView().IsFullScreen)
            {
                // It is, so handle Landscape or Portrait visual states as before
                VisualStateManager.GoToState(this, CurrentViewState, false);
                return;
            }

            // At this point, the screen is split, so decide if it's narrow enough
            // to require a new visual state

            if (width < 800)
                VisualStateManager.GoToState(this, "Narrow", false);
        }



We make use of a second property in this handler, ApplicationView.GetForCurrentView().IsFullScreen, that tells us if the app is currently full screen or not. If it isn't, it must be split, and we can then decide to activate the new visual state if the width has become extra narrow.

Supporting the new visual state

We define the new visual state just as before with the portrait/landscape states. In this example, it's going to hide one of the columns of information being displayed to create a little more space.


       <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Landscape"/>
                <VisualState x:Name="Narrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
          Storyboard.TargetName="TheSuperfluousColumn"
          Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  

To see how this works, here's the app before the screen is split:

Three columns, regular size

Now here's the app when the user has divided the screen in two, without any extra support for the narrower screen. Notice how the same content has been squashed into a smaller space.

Three columns, but squashed

And now, by displaying only the most important information, everything is a lot less squashed.

One column, and no squashing

The minimum width

Your app can specify a minimum width value. By default this value is 500. If your view is smaller than the minimum size, the app gives up - essentially saying "I refuse to work under such conditions!" and is then suspended. You can change the value to a minimum 320, which allows your app to remain in a thin column on the side of the screen – potentially useful as an ever-present utility for your users.

Important  The app width size adjustment is instigated by the user: you cannot programmatically force it to happen.

Related topics

Designing your app with XAML: the Grid
Designing your app with XAML: Orientation
Guidelines for window sizes and scaling to screens (Windows Store apps)
Quickstart: Designing apps for different window sizes
Guidelines for resizing windows to tall and narrow layouts
Quickstart: Defining app layouts (Windows Store apps using JavaScript and HTML)

 

 

Show:
© 2015 Microsoft