Designing your app with XAML: Resizing

  • Article

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

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.

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:

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.

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

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.

 

Designing your app with XAML: the Grid

Designing your app with XAML: Orientation

Responsive design 101 for UWP 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)