Category: Expression Blend

EvenTiles from Start to Finish–Part 15

In the previous episode of this series about how to develop a Windows Phone application from scratch you learned how you can transfer data between an application and a PeriodicTask by using a file in IsolatedStorage. With that, the most important functionality of EvenTiles is in place. Today we will add the User Interface for an About Page to the application. Since we are not worrying about functionality yet, we will use Expression Blend exclusively in today’s part of the EvenTiles series.

An empty About Page is already part of our EvenTiles solution, and it can already be reached by clicking the corresponding icon on the ApplicationBar. The final About Page should look like this (with the upper 4 fields ready to fill in some data programmatically), some explaining text and a few buttons.

imageThe UI of the About Page is not that complex as you can see. It consists of a Grid Control containing a Border Control, a TextBlock and a number of Buttons, each on separate rows. All rows containing UI Elements have their height defined as auto. To complete the layout, two empty rows are also defined that fill up unused space on the page.

The Border Control contains another Grid Control which in turn contains 4 rows and 2 columns, all containing TextBlocks. The TextBlock that holds the version number of the application will be filled programmatically with the assembly version number that is defined for the application. The color of the Border Control and of the TextBlocks inside it is defined to be the accent color, so it will automatically change when the user changes the theme colors on the phone.

To keep the margins for text in each TextBlock consistent, we make sure to use one of the predefined styles on them from inside Expression Blend (all are using a PhoneTextNormalStyle). If you want to learn more about creating consistent user interfaces for Windows Phone pages, you should take a look at this excellent blog article from Jeff Wilcox with great tips on Metro Design.

image

In order to nicely divide a number of UI elements over the About Page, we are making use of the ContentPanel Grid. Inside that Grid, we define a few more Rows than we actually need, just to make sure that our layout looks good.

dump5

You can see that in the this screen shot, where all rows and columns are visible. The dotted lines show all rows and columns available, both for the Grid inside the Border and for the entire ContentPanel. In the ContentPanel you see two blank rows, they are used to fill up unused space on the page, by specifying their height to be of size “1*”. All the other rows are using the height they need by specifying their height to be auto.

 

 

 

 

 

 

The other thing that is noticeable, is the image to the left of the text inside the upper button. This button is created with a StackPanel defining its Content area. The StackPanel holds both an Image and a TextBlock and is defined as follows in XAML:

XAML to define ’email’ button
  1. <Button x:Name="btnEmail"
  2.         Grid.Row="4">
  3.     <StackPanel Orientation="Horizontal">
  4.         <Image Source="appbar.feature.email.rest.png" />
  5.         <TextBlock TextWrapping="Wrap"
  6.                     Text="Email feedback / suggestions"
  7.                     VerticalAlignment="Center"
  8.                     Style="{StaticResource PhoneTextNormalStyle}" />
  9.     </StackPanel>
  10. </Button>

You can also see that we simply re-use the email icon that ships with the tools for use in an ApplicationBar. Of course it is rather hard to show how to create a user interface inside a blog article. Most likely it makes more sense for this episode of EvenTiles to watch the accompanying video, in which you can see how the entire user interface for this page was created using Expression Blend.

Creating an About Page for a Windows Phone Application with Expression Blend

In the next episode of EvenTiles we return to actual programming, when we add functionality to the AboutPage to access MarketPlace, to submit application reviews and to use a Launcher to create / send an email message. You will also learn how to retrieve the application’s version number programmatically. Just make sure to return to this blog regularly or to subscribe to the RSS feed.

EvenTilesIf you want to see EvenTiles already in action on your Windows Phone, you can also install the latest version from Marketplace. Remember that this application is not meant to be extremely useful, although it contains similar functionality that “serious” applications have. Just go ahead and get your free copy of EvenTiles from Marketplace at this location: http://www.windowsphone.com/en-US/search?q=EvenTiles (or search on your phone for EvenTiles in the Marketplace application).

EvenTiles from Start to Finish–Part 3

In the second part of this series about how to develop a Windows Phone application from scratch we looked at the ApplicationBar and Page Navigation. Today we will introduce the Silverlight Toolkit for Windows Phone, show how to use it inside an application and add page transitions to the application. We will take off where we finished in Part 2.

The Silverlight Toolkit for Windows Phone is a separate assembly that you can install after downloading it. It installs in the same location where the Windows Phone SDK’s are installed, making it very easy to add a reference to it in order to use functionality that can be found in the toolkit.

imageAfter you have installed the toolkit, you can add a reference to it inside your application by right-clicking the references field your project and selecting the toolkit in the dialog box that appears. After adding the toolkit to the references, you will see it under references inside solution explorer. The first thing we are going to do is adding page transitions. If you look at the video, you will see that the pages of our application are currently simply appearing without any animations. However, page transitions inside many applications are similar to turning pages in a book. This is for instance the case with applications that are already installed on your Windows Phone. The Silverlight Toolkit contains functionality to make it very easy to incorporate similar page transitions inside your own applications. There are many different transitions to choose from, but we will use the same page turning transitions that you probably already know when you activate an application from the start screen.

To add page transitions inside your own application, it is important to change the PhoneApplicationFrame for your application into a TransitionFrame. The latter is defined in the Silverlight toolkit and allows for page transitions. The RootFrame is a container to hold all pages that you will create inside your application. You will have to search for the method InitializePhoneApplication inside the source file App.xaml.cs that Visual Studio created for you when you created the EvenTiles project. Inside this method, you can see that a new RootFrame is created of type PhoneApplicationFrame. You will have to change this into a TransitionFrame in order to get your page transitions working.

Using a TransitionFrame
  1. // Do not add any additional code to this method
  2. private void InitializePhoneApplication()
  3. {
  4.     if (phoneApplicationInitialized)
  5.         return;
  6.  
  7.     // Create the frame but don't set it as RootVisual yet; this allows the splash
  8.     // screen to remain active until the application is ready to render.
  9.     // RootFrame = new PhoneApplicationFrame();
  10.     RootFrame = new TransitionFrame();
  11.     RootFrame.Navigated += CompleteInitializePhoneApplication;
  12.  
  13.     // Handle navigation failures
  14.     RootFrame.NavigationFailed += RootFrame_NavigationFailed;
  15.  
  16.     // Ensure we don't initialize again
  17.     phoneApplicationInitialized = true;
  18. }

In order to get page transitions working, the next thing you have to do is add some XAML that defines the different page transitions to each page on which you want to make use of page transitions. Instead of adding individual pieces of XAML for each page, you can also create a new style that you use inside all pages that you want to make use of page transitions. That is the approach we are taking in this sample. First thing to do is add the following XAML to the App.xaml file:

PageTransition Style
  1. <!–Application Resources–>
  2. <Application.Resources>
  3.     <Style x:Key="DefaultPageWithTransitions"
  4.             TargetType="phone:PhoneApplicationPage">
  5.         <Setter Property="sltk:TransitionService.NavigationInTransition">
  6.             <Setter.Value>
  7.                 <sltk:NavigationInTransition>
  8.                     <sltk:NavigationInTransition.Backward>
  9.                         <sltk:TurnstileTransition Mode="BackwardIn" />
  10.                     </sltk:NavigationInTransition.Backward>
  11.                     <sltk:NavigationInTransition.Forward>
  12.                         <sltk:TurnstileTransition Mode="ForwardIn" />
  13.                     </sltk:NavigationInTransition.Forward>
  14.                 </sltk:NavigationInTransition>
  15.             </Setter.Value>
  16.         </Setter>
  17.         <Setter Property="sltk:TransitionService.NavigationOutTransition">
  18.             <Setter.Value>
  19.                 <sltk:NavigationOutTransition>
  20.                     <sltk:NavigationOutTransition.Backward>
  21.                         <sltk:TurnstileTransition Mode="BackwardOut" />
  22.                     </sltk:NavigationOutTransition.Backward>
  23.                     <sltk:NavigationOutTransition.Forward>
  24.                         <sltk:TurnstileTransition Mode="ForwardOut" />
  25.                     </sltk:NavigationOutTransition.Forward>
  26.                 </sltk:NavigationOutTransition>
  27.             </Setter.Value>
  28.         </Setter>
  29.     </Style>
  30. </Application.Resources>

Here we define different transitions that will run when you are navigating to and from pages inside the application. The transitions that you can see in the code snippet are all TurnStileTransitions which are commonly used for page transitions inside a Windows Phone application. The Silverlight Toolkit contains other transition types as well.

imageAfter having defined the transitions and after having changed the RootFrame to be able to host transitions, the only thing that is left to do is assigning newly created transition style to each individual page. This can for instance be done using Expression Blend. When you now would run the application, it will blend in perfectly with applications that came with your Windows Phone. Navigating from page to page inside our application is now identical to navigating inside for instance the different settings on the Windows Phone. Of course it is not necessary to make use of page transitions, but it does make your application look better and even more professional.

 

The Silverlight Toolkit for Windows Phone contains much more useful items, like a number of cool user interface elements. To see already one of them in action, we are adding it to the Settings Page. On the SettingsPage we later need a switch that can enable / disable reading of location data. Right now we are just going to enter a dummy switch and we are choosing a nice control from the Silverlight Toolkit, the ToggleSwitch. This control looks like a light switch and has (like a CheckBox) two different states, checked and unchecked. This control looks extremely good inside a Windows Phone application, as you can see in the following screenshot:

image

Inside Visual Studio 2010 Express Edition you can see the SettingsPage in designer mode. In it, you can also see a ToggleSwitch (in checked mode). The ToggleSwitch is added to the content grid, filling up as much space as it needs in the last row of the grid. How to layout UI controls inside a grid and in other container controls is something we will cover later in this series about Windows Phone Application Development.

In the following video you can see all the steps that are needed to add transitions to your Windows Phone Application and how to be able to use functionality from the Silverlight Toolkit inside your own application.

Using the Silverlight Toolkit to add Page Transitions to EvenTiles

LiveTiles will be extended soon. In the next episode we will create the SettingsPage UI and make sure that we can store data entered on the SettingsPage. Make sure to lookout for part four in this series about Windows Phone application development which will be published soon.

EvenTiles from Start to Finish–Part 2

In the first part of this series about how to develop a Windows Phone application from scratch we looked at the initial project and how to initialize the Application Tile by setting elements in the manifest file. Today we will add an ApplicationBar to our application and we will add page navigation as well. We simply take off where we finished in Part 1. Adding an application bar is actually easier from within Expression Blend. This tool can be used to design and prototype Windows Phone applications. The advantages of using Expression Blend to add the application bar are:

  • immediate visual feedback;
  • simple selection / insertion of application bar icons
  • simple reordering possibilities for application bar icons en menu items.

imageVisual Studio can work closely together with Expression Blend. Changes in one environment will be visible in the other environment (usually changed files must only be saved or a project must be rebuilt in order to achieve this). If a solution is already open in Visual Studio, you can start Expression Blend from within the Project Menu as shown. Even though you can use Expression Blend to add code to your Windows Phone pages, you probably want to limit doing so, since you don’t have Intellisense available, which is one of the great features of Visual Studio that really makes entering code easy. You can immediately see that you are in a different environment when looking at Expression Blend. Its default theme color is dark. Something else that is immediately noticeable is the large amount of windows, options and choices available inside Expression Blend. It surely will take you some time to feel comfortable in this powerful design tool.

image

What you can see here is Expression Blend showing the MainPage of our EvenTiles application. You can also see how to select an ApplicationBarIcon in the collection of ApplicationBarIcon buttons. Besides concentrating on creating a (static) UI for a Windows Phone application, Expression Blend is also a fantastic tool to create different visual states and animations. We are still in the early stages of application development in this series, but more in depth usage of Expression Blend will definitely follow later on. For now we will just add a little bit of functionality to our application. Using Expression Blend, two new pages have been added to the project, a Settings Page and an About Page. Both these pages only contain a filled title section. Right now, the only functionality that will be added to the application is code to navigate to each of the two empty pages when the corresponding ApplicationBar buttons are clicked. The following code snippet shows the ApplicationBar that was created with Expression Blend in XAML, and already includes Click event handlers:

ApplicationBar on MainPage
  1. <phone:PhoneApplicationPage.ApplicationBar>
  2.     <shell:ApplicationBar Opacity="0">
  3.         <shell:ApplicationBarIconButton IconUri="/icons/appbar.feature.settings.rest.png"
  4.                                         IsEnabled="True"
  5.                                         Text="settings"
  6.                                         Click="Settings_Click" />
  7.         <shell:ApplicationBarIconButton IconUri="/icons/appbar.questionmark.rest.png"
  8.                                         IsEnabled="True"
  9.                                         Text="about"
  10.                                         Click="About_Click" />
  11.     </shell:ApplicationBar>
  12. </phone:PhoneApplicationPage.ApplicationBar>

To add code to the Click event handers, we are using the C# code behind file, belonging to the MainPage.

image

To create entries in the code behind file for both Click event handlers (and in that way connecting XAML to code), you can right click on the event handler in XAML and selecting Navigate to Event Handler entry from the shown popup menu. The code in the event handlers is very simple, using the NavigationService to navigate to another page by providing a Uri that contains the page name.

Navigating to other pages
  1. private void Settings_Click(object sender, EventArgs e)
  2. {
  3.     NavigationService.Navigate(new Uri("/SettingsPage.xaml", UriKind.Relative));
  4. }
  5.  
  6. private void About_Click(object sender, EventArgs e)
  7. {
  8.     NavigationService.Navigate(new Uri("/AboutPage.xaml", UriKind.Relative));
  9. }

After deploying the application to the emulator, the Main Page shows an ApplicationBar. Clicking on either of the two ApplicationBar buttons results in navigating to another page inside the application. The following video shows all steps to create the ApplicationBar, the additional pages and the code to navigate from page to page:

Adding an ApplicationBar and showing page navigation

LiveTiles will be extended soon. In the next episode we will take a look at the Silverlight toolkit, Page Transitions and additional controls that are available in the Silverlight toolkit. Make sure to lookout for part three in this series about Windows Phone application development.