Windows* 8 had a visual state known as the “snap view.” This was a fixed window width that an app could reside in when snapped. The window is fixed at 320 pixels so the user run two applications at the same time. Windows 8.1 Release Preview changed the behavior of snap view. When a window is snapped, the minimum width is 500 pixels. The width can be modified in the project manifest file. Up to four apps can be snapped concurrently, enhancing the multitasking experience when compared to Windows 8.
The question we ask is: how do I handle resizing and repositioning content if the snapped window size changes? The answer is: it depends. Depending on your XAML content, you may be able to do it all in XAML.
For example, suppose you just have an image in the root level grid of a Blank Page XAML template. The following code auto-scales when the window size is adjusted:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="60*"/> <ColumnDefinition Width="20*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="20*" /> <RowDefinition Height="60*" /> <RowDefinition Height="20*" /> </Grid.RowDefinitions> <Image Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Stretch="Uniform" VerticalAlignment="Center" Source="Assets/img101.png"/> </Grid>
Figure 1: Simple Image inside a Grid**
The use of the asterisk for the columns and widths proportionately allows the rows and columns to resize. With the XAML code shown, regardless of the windows size, the image will always appear in the center of the window spanning the full size of the grid cell it’s in (the middle cell of a 3x3 grid).
This code is simple enough in that it just works for Windows 8’s snap view as well. This example didn’t require any code changes for Windows 8.1 in terms of handling the various window widths that are now supported.
OK, now, let’s throw a canvas control into the picture. We’ll make it a child of the grid and make the image a child of the Canvas. In Windows 8.1, will the following code work?
<Grid Name="g" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="20*"></RowDefinition> <RowDefinition Height="60*"></RowDefinition> <RowDefinition Height="20*"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="20*"></ColumnDefinition> <ColumnDefinition Width="60*"></ColumnDefinition> <ColumnDefinition Width="20*"></ColumnDefinition> </Grid.ColumnDefinitions> <Canvas x:Name="my_canvas" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Image Source="Assets/img101.png"Height="{Binding ElementName=my_canvas, Path=ActualHeight}"Width="{Binding ElementName=my_canvas, Path=ActualWidth}"/> </Canvas> </Grid>Figure 2: A First Attempt with a Canvas Control**
This code works on application launch, when app is in full screen mode. The image like before appears centered in the grid and spanning the cell size. However, if you snap the app, then no matter how you adjust the window size, the image size and position will not readjust on the fly to the new window dimensions. This is a problem as the image is now clipped.
There are some ways you can handle this. I took what I thought was the simpler route: write some code-behind in C#. Let me discuss the steps I took to get up and going in Windows 8.1 app development!
Before we start, you’ll want to grab the Windows 8.1 Release Preview and Visual Studio* 2013 preview here:
http://windows.microsoft.com/en-us/windows-8/preview-download
http://www.microsoft.com/visualstudio/eng/2013-downloads
In Visual Studio 2013, I created a blank app:
Figure 3: Creating the New Project in Visual Studio 2013 Preview (Picture taken from Visual Studio 2013)
I then filled the application’s window space with a canvas and in it, placed an Image control. The XAML looks like this:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Canvas x:Name="my_canvas" HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366"> <Image x:Name="my_image" Height="100" Width="100" Source="Assets/img101.png"/> </Canvas> </Grid>
Figure 4: XAML Code for Canvas and Image**
On program launch, I then do the following:
- Programmatically center the image on the screen and scale it to 60% canvas width and height
- Register a handler to be invoked when screen size changes
The corresponding code is here:
//arbitrarily chose this scale so that the image takes up 60% of window width and heightdouble SCALE = .6; public MainPage() { this.InitializeComponent(); Window.Current.SizeChanged += Window_Size_Changed; my_image.Width = my_canvas.Width * SCALE; my_image.Height = my_canvas.Height * SCALE; //keep in mind that the origin of the image is top left corner, NOT //image center, so we must adjust how to position left and top //properties to keep the image centered in the window Canvas.SetLeft(my_image, (my_canvas.Width / 2) - (my_image.Width / 2)); Canvas.SetTop(my_image, (my_canvas.Height / 2) - (my_image.Height / 2)); }
Figure 5: C# Code for Centering an Image and Registering Event Handler***
Finally, when the window is resized when snapped, the code pertaining to the event handler mentioned above is shown here:
private void Window_Size_Changed(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{ my_canvas.Width = e.Size.Width; my_canvas.Height = e.Size.Height; my_image.Width = e.Size.Width * SCALE; my_image.Height = e.Size.Height * SCALE; Canvas.SetLeft(my_image, (my_canvas.Width / 2) - (my_image.Width / 2)); Canvas.SetTop(my_image, (my_canvas.Height / 2) - (my_image.Height / 2)); }Figure 6: C# Code for Adjusting Image on Window Size Change***
That’s it for the code! The unsnapped image appears as follows:
Figure 7: Unsnapped Image (Image taken from Windows 8.1 Sample Wallpaper)
Here are some examples of various snapped sizes:
Notice that in each case, the image stays centered and properly scaled. That’s it! Thank you for reading!
**This sample source code includes XAML code automatically generated by Visual Studio IDE and is released under the Intel OBL Sample Source Code License (MS-LPL Compatible)
***This sample source code is released under the Microsoft Limited Public License (MS-LPL)
Immagine icona:
