Windows 8 Labs #1

 

 

 

This tutorial shows you how to create a Windows Store app, which will alter its view depending on ApplicationView’s state. In this tutorial, you will create a simple grid view who’s cells will be colored differently and who’s columns will be altered in Snapped mode.

A screenshot from the completed app is below:

final app

 

Understand ApplicationViewStates

As ApplicationViewStates we have:  

  • FullScreenLandscape

The current app's view is in full-screen (has no snapped app adjacent to it), and has changed to landscape orientation. 

full screen landscape

  • Filled

The current app's view has been reduced to a partial screen view as the result of another app snapping. 

filled

  • Snapped

The current app's view has been snapped. 

snapped

  • FullScreenPortrait

The current app's view is in full-screen (has no snapped app adjacent to it), and has changed to portrait orientation.

full screen portrait

 

       

Create a new Windows Store App

Follow this steps to create a new Windows Store App.

1. Open Microsoft Visual Studio 2012

2. At the top of the Menu bar, click FILE -> New -> Project… 

new project

This displays the new project dialog.

3. Expand Templates -> Visual C# -> Windows Store, then select Blank App(XAML)

new project dialog

4.In the Name filed, type a desired name for your application, then hit OK.

5.Hit F5 key to rebuild the project and start the app.

 

Create the colorful grid

1. Open Solution Explorer and double click on MainPage.xaml.

solution explorer

This will lead you to the MainPage.xaml file, and that’s the place where we will create our custom interface.

2. In order to proceed we need to create a 2x2 matrix (grid). If you will move the cursor around the borders of the tablet displayed on MainPage.xaml page, you will notice an orange line that will follow your moves. That is the separator line, and it will helps us to split our grid in different configurations. Press click whenever you are ready. Follow the same procedure in order to create two rows.

splitted grid

3. In order to achieve two equal rows and columns we need to adjust their width and size to be equal to 1* (1 fractional unit). This way we will achieve two equally sized rows and columns no matter what’s the resolution. 

row-columns definition

4.  Once the 4 cells created we need to colorize them. Use the Toolbox to drag and drop a series of StackPanels into the grid. As you may notice they may overlay within one cell – don’t freak out, we are going to fix it . 

This is how your Document Outline View should look like until now:

document outline

5. The next step is to place each stack panel within one separate cell. To position the first stack panel at (0,1) we must select it first, then access it’s properties. 

stack pannel properties

Under the Layout section, we can decide the actual coordinates for the panel. So in  order to have it displayed at (0, 1) we need to adjust the Row and Column values. In order to provide an auto-resizable behavior for our panel we need to set it’s width and height values on Auto, select Stretch for both HorizontalAlignment and VerticalAlignment, and be sure that all margin values are 0. Repeat those steps for the rest of the panels.

6. Add some color to our app. Since we are familiar with the Properties view, we can adjust each panel’s background by changing its color from the Brush section. Once you’ve colored your app hit F5 key.

Expected result:

final app interim

 

Add the description label

1. Select from Toolbox a Border component and drag it over the grid. Pay attention not to place it inside any of the 4 stack panels. In order to validate that take a look on Document Outline view.

2. Place the border on grid’s center. In order to do that we will use Properties view again. Select the border then go to its properties. Adjust border’s Width and Height value to Auto. Set RowSpan and ColumnSpan values to 2 and select Center as HorizontalAlignment and VerticalAlignment. If your Padding values are set to 10 we are good to go. But what exactly have we done here?

border properties

By setting the RowSpan and Column to 2 we are just saying that the relative should be the exact same size of the grid, so the item will be position on the center of the grid.

3. Customize the Border Item. From Properties -> Brush we can adjust the background  and borderBrush colors, and from Properties -> Appearance we can adjust the border thickness and corner radius.

4. Place a TextBlock inside the border. The last element that needs to be added on the page is a TextBlock. Drag and drop it from Toolbox inside the border we’ve defined at the previous step and change it’s properties in order to be centered. (Width - Heigth on Auto, HorizonatalAlignment – VerticalAlignment on Center and Margins on 0 ). You may want to adjust it’s font size because it will be to small. To do that check the Text section under Properties. Last but not least name the textBlock “visualStateTextBlock”.

visualStateTextBlock

Hit F5 and run your app and make sure that all the elements are displayed according our specifications. 

 

SizeChanged EventListener

Now is the time to actualy write some code. In order to display the current app state we need to be notified about the UI changes. This can be accomplished in multiple ways. You can define a handler method for SizeChanged event by selecting the page element from XAML, and from its properties -> Event Handlers (the thunder button), then double click the Size Changed input field or the method I’ll describe in the following steps.

1.Open MainPage.xaml.cs by double clicking it from Solution Explorer. 

2. Add a new event handler for SizeChanged on MainPage() constructor.

public MainPage()

{

            this.InitializeComponent();

            this.SizeChanged += MainPage_SizeChanged;

}

3. Offer a proper implementation for MainPage_SizeChanged event handler.


void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)

{

            visualStateTextBlock.Text = ApplicationView.Value.ToString();

 

            if (ApplicationViewState.Snapped == ApplicationView.Value)

            {

                grid.ColumnDefinitions[0].Width = new GridLength(0);

            }

            else

            {

                grid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Star);

            }

}

 

What we’ve done here? It’s simple. First of all we’ve displayed the current state by adjusting the text property value, and for the snapped mode we’ve only displayed the second colum.

 

What’s next?

Windows 8 Labs #1 AppStates (JS) -comming soon

All the resources and demos presented this saturday are available for download here.

 

 

Posted by dorindanciu 03/11/2012 at 10:18PM


Comments

Leave a response

  1. noName 11/11/2012 at 11:15PM

    thank you, your effort is appreciated

Leave a comment