DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > EvenTiles from Start to Finish - Part 2

EvenTiles from Start to Finish - Part 2

Maarten Struys user avatar by
Maarten Struys
·
Jan. 31, 12 · Mobile Zone · Interview
Like (0)
Save
Tweet
2.87K Views

Join the DZone community and get the full member experience.

Join For Free

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.





Visual 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.





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:

Application Bar on MainPage:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Opacity="0">
        <shell:ApplicationBarIconButton IconUri="/icons/appbar.feature.settings.rest.png"
                                        IsEnabled="True"
                                        Text="settings"
                                        Click="Settings_Click" />
        <shell:ApplicationBarIconButton IconUri="/icons/appbar.questionmark.rest.png"
                                        IsEnabled="True"
                                        Text="about"
                                        Click="About_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


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





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:

    private void Settings_Click(object sender, EventArgs e)
    {
        NavigationService.Navigate(new Uri("/SettingsPage.xaml", UriKind.Relative));
    }
     
    private void About_Click(object sender, EventArgs e)
    {
        NavigationService.Navigate(new Uri("/AboutPage.xaml", UriKind.Relative));
    }


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:



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.



Source: http://mstruys.com/2011/11/26/eventiles-from-start-to-finishpart-2/

application Windows Phone

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Make Git Forget a Tracked File Now in .gitignore
  • Five Tips to Fasten Your Skewed Joins in Apache Spark
  • Delegating JWT Validation for Greater Flexibility
  • Major PostgreSQL Features You Should Know About

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo