Essential XAML

Recently, I’ve had to inform many of my contacts that I have a new phone number, so I thought to myself “Wow… this is a tough one, sending SMS to many people, using the regular SMS interface, adding contact one by one…”.

So I decided to develop a small Windows Phone app for doing that, and I would like to share my solution and show how I developed it step-by-step.

Requirements

First, lets talk about the requirements of such an app:

1. Sending SMS to contacts in my phone which are Mobile type only.
2. Select relevant contacts from a list and filter the rest.
3. Edit the message before sending it.
4. Select relevant contacts from a list and send SMS only to them.
5. Removing selected contacts after sending SMS.

New Project

Now that we have some requirements, lets create a simple Windows Phone project.

First thing to do is to create a new Windows Phone project, using Visual Studio:

You can download Windows Phone SDK 7.1 which include Visual Studio and Blend from APP HUB.

Now that we have an empty phone page, lets drop some user controls:

Adding Controls

First lets change the application and page titles. From the solution explorer, open the MainPage.xaml by double clicking on it, then edit the following XAML:

   1: <!--TitlePanel contains the name of the application and page title-->

   2: <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

   3:     <TextBlock x:Name="ApplicationTitle" Text="SEND SMS" Style="{StaticResource PhoneTextNormalStyle}"/>

   4:     <TextBlock x:Name="PageTitle" Text="Contacts" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

   5: </StackPanel>

Now lets drop the relevant controls into the page from the ToolBar on the left, and layout them using the designer.

For the contacts list we will use a simple ListBox, and for the SMS content we will use a simple TextBox.

After doing so, the XAML should be something similar to this:

   1: <!--ContentPanel - place additional content here-->

   2: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   3:     <Grid.RowDefinitions>

   4:         <RowDefinition Height="0.7*" />

   5:         <RowDefinition Height="0.3*" />

   6:     </Grid.RowDefinitions>

   7:     <TextBox Name="textBox1" Text="TextBox" Grid.Row="1" AcceptsReturn="True" />

   8:     <ListBox Name="listBox1" />

   9: </Grid>

Change the TextBox.AcceptsReturn property to “True” so it will display more them one line.

Application Bar

Ok, so now that we have basic controls, lets add Application Bar and two buttons so we can Filter contacts, and Send SMS.

First, unmark the Application Bar code in the bottom of the page, and re-mark the MenuItems section. We don’t need it.

Now, change the two buttons icons and text to something more relevant. To add your own images, create an Images folder in the project and add .png icons to it. You can use the images from the Windows Phone SDK: %ProgramFiles%\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

   1: <!--Sample code showing usage of ApplicationBar-->

   2: <phone:PhoneApplicationPage.ApplicationBar>

   3:     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

   4:         <shell:ApplicationBarIconButton IconUri="/Images/appbar_filter.png" Text="Filter"/>

   5:         <shell:ApplicationBarIconButton IconUri="/Images/appbar_send.png" Text="SMS"/>

   6:         <!--<shell:ApplicationBar.MenuItems>

   7:             <shell:ApplicationBarMenuItem Text="MenuItem 1"/>

   8:             <shell:ApplicationBarMenuItem Text="MenuItem 2"/>

   9:         </shell:ApplicationBar.MenuItems>-->

  10:     </shell:ApplicationBar>

  11: </phone:PhoneApplicationPage.ApplicationBar>

Looking at the phone XAML designer, you should see something similar to this:

In the next post of this tutorial I’ll show how to connect the data behind and then how to design each item in the ListBox.

You can download the code so far from here.