Posts Tagged ‘ XAML ’

Navigating and passing Data between XAML pages

Up to this point I’ve only used a single XAML page for my examples. Most applications though do have more than one page. So, it is time to take a look at how to navigate through more than one XAML pages in a Silverlight Phone application.

First of all, pages in a Silverlight application are loaded similar to a html page in a web browser. Each website has its own URL. To navigate for example from this blog entry to the homepage, there is a so called Anchor Tag needed. Silverlight applications are very similar, except that instead of an anchor tag I use a hyperlink button control, and then I set its NavigateUri property to the URI of the XAML page I want to load into that parent frame that is top most in my application. Sounds easy enough.

URL is a Unified Resource Locator, URI is a Unified Resource Identifier. Both are ways of finding and locating resources. One is specific to the internet, the other one is more generalized and can be used for internet, local, within a local network, on a phone and so on.

So, let’s get started. I’ve created a new project. Right click on my project lets me add a new folder which I call “Views”:

Then I am going to add a new page to that folder:

I am going to make sure that I select Windows Phone Portrait Page in the opening dialogue box:

Now I have two XAML pages in my project:

Back on MainPage.xaml I am going to drag and drop a HyperlinkButton control onto my designer surface. Now I need to modify the NavigateUri property. I start with the name of the project followed by a semicolon and then the component. I have my new page nicely in a subfolder, so the name of that folder is added next:

/NavigatingBetweenPages;component/Views/Page1.xaml

Let’s run that:

When I click the Hyperlink Button I navigated from my Main Page to Page1. So far, so good. Now I want to pass some information between those two pages. So I am going to construct a query in my NavigateUri, I am also going to add a Querystring that will embed some additional information in that URI. And then I am going to retrieve that extra information on Page1.xaml and display it on the screen. In the World Wide Web, a query string is the part of a URL that contains data to be passed to web applications. Similarly, in a phone application a query string is the part of a URI that contains data that can be passed from page to page.

Let’s move on in my little example project. First I am adding the querystring to the NavigateUri property:

/NavigatingBetweenPages;component/Views/Page1.xaml?id=1

Then I am adding another Hyperlink Button and set the NavigateUri property to:

/NavigatingBetweenPages;component/Views/Page1.xaml?id=2

Now I am passing two different values, depending on which Hyperlink Button I choose to click.

Back on Page1,xaml I am going to add a textblock and clear out its text property. Then inside the PhoneApplicationPage of Page1 I am double clicking on the Loaded Event in the properties window to get to the code behind, in order to add some code:

When I run it now, I get this:

I just wanted to display the value that I defined in the NavigateUri property before. Seems to work.

This example is not doing anything really exciting just yet, but I could use the same technique to do several interesting things. For example if I wanted to create a weather application and I wanted to allow the user to select a city and a zip code. I could pass those values from a XAML page, where the user actually selects the city and the zip code, and then on a second XAML page I could use some web service over WiFi or the phone’s network, and then on a third page retrieve those values and display them to the user.

There is only one problem with the code that I’ve been writing so far: If there is no querystring with the name of “id” passed in from the preceding page then my application is going to blow up. It is going to throw an exception and crash. So, I need to fix that problem.

And also, I am wondering, what about sending and retrieving two or more querystring named value pairs? How can I accomplish that in my code? Well, it is the same basic idea. I just need to separate the named value pairs on my MainPage.xaml’s Hyperlink Buttons.

So, I am going to add a third Hyperlink Button to my designer surface, and I am going to set the NavigateUri property to:

/NavigatingBetweenPages;component/Views/Page1.xaml?id=3&state=tx

Then I am going to add a second textblock to my Page1.xaml’s designer surface and clear its Text property. Next I am going to my Page1.xaml.cs and add the following code into the Loaded Event:

By adding this code I fixed both of my problems.

The earlier solutions left me with the possibility that there is no id defined which would have caused the application to crash. Now, with the TryGetValue method, it is simply trying to retrieve the id value and throw it out. If it can’t find that value it will skip that code block and leave that out. The same is true for the second part of the code. It will try to retrieve state as an output parameter. If it can get “state” then it will execute the second code block.

In other words, if I run this code, and click the first Hyperlink Button, it should only show the value in textblock 1, if I click the third one, it should show both values in both textblocks. Let’s see, if that is true:

Seems to work like it is supposed to.

 

To be continued…

Understanding the XAML Syntax

In yesterday’s blog post I was taking a first closer look at XAML. I’d like to continue at exactly the same point.

XAML is a programming language that is created in such a way that it is focused on defining the design or the layout for a Silverlight application. It is characterized by a series of opening and closing tags.

XAML-files are hierarchically structured.

Depending on their order, one or more elements can influence the layout and behavior of the interface. Each element has only one parent, but can have an unlimited number of children. Only for a few elements the amount of children is limited, e.g. the Scrollbar does not have a child. Typically in XAML applications the root object is a Panel, that is responsible for positioning and rendering. A Panel can contain other Panels.

Anything that is created or implemented in XAML can be expressed using a more traditional .NET language, such as C# or VisualBasic.NET. However, a key aspect of the technology is the reduced complexity needed for tools to process XAML, because it is based on XML. And because of that developers and designers are able to share and edit content freely amongst themselves without requiring compilation.

The key idea is that you want to use XAML to build the interface of your Silverlight Windows Phone 7 applications.

XAML is not exclusive to Silverlight, not even to defining a user interface. It can be used in other products as well.

If you’re a designer and you want to build a user interface for a Silverlight application you might want to use a different tool instead of Visual Studio to help you define the user interface, for example Expression Blend for Windows Phone 7. It contains additional XAML generating tools that are more focused on the user interface and the user experience than Visual Studio 2010 Express. This creates a nice separation between the work that a designer does and the work a developer will do.

So, let’s have a look at XAML. I’ve created a new project and dragged a button to my main form. I’ll have a look at what an empty XAML document looks like before I add any controls more than that one button:

This is the beginning tag, and when I scroll down to the end, I see the ending tag:

Everything else will be contained within this PhoneApplicationPage. I can see “phone:” right in the beginning. That means, my PhoneApplicationPage belongs to a namespace that’s been aliased by this “phone:” If I look through the code I see that in line 5 it’ll be defined what that namespace shortcut really is. The xml namespace “phone” is really from the clr-namespace Microsoft.Phone.Controls and is contained within a file, an assembly, called the Microsoft.Phone.dll.

So in XAML, whenever there is a word followed by a colon, that’s defining namespaces. Quite similar to how namespaces are defined in a using statement in C#.

Next in my XAML I have my layout defined:

Using Grids and Panels is the main technique for positioning controls and text on a Windows Phone 7 Silverlight application.

This block  contains the layout definition, the StackPanel (which is another layout control) and controls, in my case just the button.

This root Grid contains a StackPanel, but also a ContentPanel.

This particular StackPanel contains the application name and the page name in textblocks. I could change the names directly in that block of XAML code instead of changing the content in the properties window.

The ContentPanel is basically where the body of an application lives.

Below that there is a big commented out section:

This gives a nice little template for adding an ApplicationBar. Of course I can use my own icons, write my own code.

For now there’s only one thing left to mention. Both the MainPage.xaml file and the MainPage.xaml.cs file are two parts of a whole. In other words, the work I do in the XAML file and the work I do In the C# file are compiled. They are built by the compiler into a single class that defines both the appearance and the behavior of the MainPage in my application.

One more look to my C# file:

“partial” means, that part of this class is defined in C#, and part of it in XAML.

To be continued…

Looking closer at XAML

I’ve seen people writing code rather in the XAML page than in the C# code page. Things seem to be easier, faster.

So I figured, it might be time to take a closer look.

XAML (Extensible Application Markup Language) is a declarative XML-based language created by Microsoft which is used to initialize structured values and objects.

When creating a new project (or opening an existing one) the first thing I see in Visual Studio is the design pane on the left side and the XAML pane on the right side. The design pane provides a fast and convenient way to arrange controls and set properties visually. Everything that goes on in the design pane has one purpose. And that is to create code in the XAML window. The XAML is what actually gets compiled into a .NET assembly, a .dll file that ultimately gets packaged up in a SAP file.

To have an example I just created a new project. When I drag a button control to my design surface, something happens in the XAML pane. Some code is being generated that defines the button:

That’s a whole block of code without me even having to write it. Now I want to create a new button without dragging it to my design pane. I am writing code in XAML:

What happens now, is that this in XAML created button also appears in my design pane:

 

The first button was dragged and dropped, the second one was created in XAML.

Since I don´t have a click event for my buttons, the C# code for my buttons just refers to my XAML pane:

Basically what I learned is that if I really want to develop applications for Windows Phone 7, I have to continue learning C#, but also XAML. Well, so far that doesn’t seem too difficult.

 

To be continued…

%d bloggers like this: