Build Your First Windows Phone 7 Silverlight Application

• Download application - 30.05 KB

Introduction

Windows Phone Developer Tools is available now for download, so if you didn't download it, now is the time.

I'll get easy on the first time so I'll just show you how to build a simple Color Picker application that will change the Phone Background Color, and one important detail – You Don't Need Windows Phone Device, the dev tool comes with Emulator.

The Emulator is actually the full WP7 OS running on your PC, so you'll get awesome debug features.
The Emulator will also support multi-touch directly on the PC if the developer is using a multi-touch enabled PC/screen.

Using the Code

So let’s get started…

After the installation is done, you'll notice Visual Studio 2010 Express for Windows Phone available under “Microsoft XNA Game Studio 4.0” folder.

But if you have Visual Studio 2010 (any version), it will also be available there.

Create Windows Phone Application

Open Visual Studio 2010 and you'll notice that there is a new category “SilverLight for Windows Phone”.

Pick “Windows Phone Application” and create the project.

Create UI

Open Toolbox and drag the following controls:

1. Button – change the content property to “Change”
2. Three RadioButtons – 1. Content = “Layout” 2. Content=”Content” 3. Content =”All”
3. Listbox

A nice thing you'll notice is that the Style of all controls is based on Windows Phone 7 Styles (placed in App.Xaml).

Add Code Behind

Create a New Method for Getting All Colors

IEnumerable EnumerateColors()
{
    foreach (var color in typeof(Colors).GetProperties())
    yield return new KeyValuePair<string, Color>(color.Name,
    (Color)color.GetValue(null, null));
}

Then Create ContentGrid Load Event and Add the Following

private void ContentGrid_Loaded(object sender, RoutedEventArgs e)
{
      list_colors.ItemsSource = EnumerateColors();
}

Change Button Click

if (list_colors.SelectedItem == null) return;

var item = (KeyValuePair<string,>)list_colors.SelectedItem;
var color = new SolidColorBrush(item.Value);

switch (rad_ContentGrid.IsChecked)
{
    case true:
        this.ContentGrid.Background = color;
        break;
    default:
        if (rad_layout.IsChecked == true)
            this.LayoutRoot.Background = color;
        else
            this.LayoutRoot.Background = this.ContentGrid.Background = color;
        break;
}

</string,>

Create StaticResource for Color ListBox

<Grid.Resources>
       <DataTemplate x:Key="ColorItemTemplate">
              <StackPanel Orientation="Vertical">
                     <TextBlock Text="{Binding Path=Key}" 
                         Foreground="{Binding Path=Key}" />
              </StackPanel>
       </DataTemplate>
</Grid.Resources>

<ListBox Height="477" ItemTemplate="{StaticResource ColorItemTemplate}" 
HorizontalAlignment="Left" Margin="20,149,0,0" Name="list_colors"VerticalAlignment="Top" 
Width="446" BorderBrush="#FFEB1212" BorderThickness="1"SelectionMode="Single" />

Run Windows Phone 7 Emulator

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)