Archita's Blog: xaml

If you are familiar with Silverlight , WPF Xaml , you may find this blog very basic.
If you are new to Windows 8 app/phone app development and want to understand UI layouts then you are at the right place.

What do you mean by UI Layout?

In my last article I explained containers. Containers tell you how your controls are held on the UI , layout defines how the containers or the controls inside the containers are positioned.

If layout of your application is proper , the UI is not going to get distorted on different devices and different resolutions. The main concept of Windows 8 was Develop Once and Port anywhere. For this porting to happen smoothly we need to be careful enough when we are selecting layout of the xaml page.

For a canvas container you always define the controls at their absolute positions , for a grid/stack panel you define the controls in a relative manner.

So , if your app is targeted towards various devices the best I will suggest is grid and stackpanel.

Now that we are settled with the grid/stack panel as container , let us think on how to position them.

Windows 8 Phone/App supports two types of layout.
a. Absolute Layout
b. Dynamic Layout

Absolute layout should be used when you can define the absolute positions of the controls. That is you define exact locations of all your child elements relative to the parent.If the app requires absolute positioning of UI elements, you can design different pages for different screen resolutions or use scaling as an alternative.

By default the layout is absolute and container is grid for a Windows 8 app.

Dynamic Layout:

You specify the relative positions for all your controls.To use automatic or proportional sizing, you must assign special values to the Height and Width properties.

Microsoft recommends following for a dynamic layout:
(Following lines are taken as is from msdn)

Set the Height and Width of the control or layout to Auto. When these values are used for controls in the Grid layout, the control fills the cell that contains it. Auto sizing is supported for controls and for the Grid and StackPanel layouts.

For controls that contain text, remove the Height and Width properties, and set the MinWidth or MinHeight properties. This prevents the text from scaling down to a size that's unreadable.

To set proportional values for the RowDefinition and ColumnDefinition elements in a Grid layout, use relative Height and Width values. For example, to specify that one column is five times wider than another column, use "*" and "5*" for the Width properties in the ColumnDefinition elements.

Conclusion:
If you have a screen that should readjust itself based on reolutions my suggestion is use Grid with Dynamic layout.

Suppose you want to create an application which uses mailing , messaging , appointments and social networking. And you want to access existing contacts rather than adding your own contact, in this case Windows 8 provides you with the Contact Picker API.

Using Contact Picker API you can:

Add a contact
Pick a contact
Pick multiple contacts

Basically the Contact Picker API and ContactPicker class enables apps that to select and acquire info about contacts.

Namespace used is: Windows.ApplicationModel.Contacts

Following are the various classes in this namespace:

Contact	Creates a new contact.
ContactField	Shows a piece of contact data.
ContactFieldFactory	Creates fields that contain information about a contact.
ContactInformation	Contains the information about a contact.
ContactInstantMessageField	Defines a field that is an instant messaging (IM) address.
ContactLocationField	Contains information about a user's location and address.
ContactPicker	Controls how the Contact Picker user interface opens and what information it shows.
KnownContactField	A static class that contains the names of contact fields for storing commonly requested information like email address and phone numbers.

In the following example we will use:

ContactPicker class
ContactInformation class

In this demo I am trying to:

Open all the contact information available with me.
Select single information.
Display the data fetched from the contact information.

The namespaces I added for this sample are:

using Windows.ApplicationModel.Contacts;
using System.Text;
using Windows.Storage.Streams;
using Windows.UI.Xaml.Media.Imaging;

In the xaml file , I have six text blocks and one button called ‘pick single contact’

When the button is clicked , user is prompted with a screen which lists all the contacts that I have on my Windows 8 device.

I can select a single contact and on clicking the OK button the screen details the contact details of the contact selected in the previous screen.

For the above contact there is no address added, so the address field is empty. If the address fields are present in the contact information the address is also shown.

Now, let us look the xaml code.

<Page

x:Class="ContactPicker.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:ContactPicker"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Button.Projection>

</Button.Projection>

</Button>

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

</Grid>

</Page>

The xaml code is nothing but a very simple xaml page.

Now , Let us do the button click event:

1. Create an object of the Contact class

var contactPicker = new Windows.ApplicationModel.Contacts.ContactPicker();

2. Now , we need to fetch the contact information using the ContactInformation class:

ContactInformation contact = await contactPicker.PickSingleContactAsync();

PickSingleContactAsync(); is the method which internally collates all the contact information from my OS and presents to me on the UI.

When implementing PickSingleContactAsync();This method has no parameters. Using this method I can select only one contact at a time.

Once , I have selected a contact , the contact information is now available , we need to fetch the information and show them in appropriate format.

contactName.Visibility = Visibility.Visible;

AddressValue.Text = string.Empty;

contactName.Text = contact.Name;

EmailValue.Visibility = Visibility.Visible;

EmailValue.Text = contact.Emails[0].Value.ToString();

if (contact.Locations.Count > 0)

{

string street = contact.Locations[0].Street.ToString();

string city = contact.Locations[0].City.ToString();

string category = contact.Locations[0].Category.ToString();

string region = contact.Locations[0].Region.ToString();

string country = contact.Locations[0].Country.ToString();

string postalCode = contact.Locations[0].PostalCode.ToString();

string address = street + city + region + country + postalCode;

AddressValue.Visibility = Visibility.Visible;

AddressValue.Text = address;

}

Although , I can get the all the contact information using this, I cannot get the thumbnail information using contact class.

So, Let us try to fetch the thumbnail information.

To fetch the thumbnail information ,

IRandomAccessStreamWithContentType stream = await contact.GetThumbnailAsync();

And once , you have fetched the image stream use following:

if (stream != null && stream.Size > 0)

{

BitmapImage bitmap = new BitmapImage();

bitmap.SetSource(stream);

OutputThumbnail.Source = bitmap;

}

else

{

OutputThumbnail.Source = null;

}

So, the .cs file now looks like:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

using Windows.ApplicationModel.Contacts;

using System.Text;

using Windows.Storage.Streams;

using Windows.UI.Xaml.Media.Imaging;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace ContactPicker

{

/// <summary>

/// An empty page that can be used on its own or navigated to within a Frame.

/// </summary>

public sealed partial class MainPage : Page

{

public MainPage()

{

this.InitializeComponent();

}

/// <summary>

/// Invoked when this page is about to be displayed in a Frame.

/// </summary>

/// <param name="e">Event data that describes how this page was reached. The Parameter

/// property is typically used to configure the page.</param>

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private async void PickContact_Click(object sender, RoutedEventArgs e)

{

var contactPicker = new Windows.ApplicationModel.Contacts.ContactPicker();

ContactInformation contact = await contactPicker.PickSingleContactAsync();

if (contact != null)

{

contactName.Visibility = Visibility.Visible;

AddressValue.Text = string.Empty;

contactName.Text = contact.Name;

EmailValue.Visibility = Visibility.Visible;

EmailValue.Text = contact.Emails[0].Value.ToString();

if (contact.Locations.Count > 0)

{

string street = contact.Locations[0].Street.ToString();

string city = contact.Locations[0].City.ToString();

string category = contact.Locations[0].Category.ToString();

string region = contact.Locations[0].Region.ToString();

string country = contact.Locations[0].Country.ToString();

string postalCode = contact.Locations[0].PostalCode.ToString();

string address = street + city + region + country + postalCode;

AddressValue.Visibility = Visibility.Visible;

AddressValue.Text = address;

}

IRandomAccessStreamWithContentType stream = await contact.GetThumbnailAsync();

if (stream != null && stream.Size > 0)

{

BitmapImage bitmap = new BitmapImage();

bitmap.SetSource(stream);

OutputThumbnail.Source = bitmap;

}

else

{

OutputThumbnail.Source = null;

}

Archita's Blog

Wednesday, 30 January 2013

Layout : Xaml

Conatainer Panels in XAML

Canvas :

Stack Panel :

Grid :

Conclusion

Friday, 4 January 2013

Windows 8 : Contact Picker