Click here to Skip to main content
11,705,610 members (46,546 online)
Click here to Skip to main content

Build Your First Windows Phone 7 Silverlight Application

, 24 Jun 2011 Ms-PL 42.9K 1.1K 36
Rate this:
Please Sign up or sign in to vote.
Build Your First Windows Phone 7 Silverlight Application

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

1.png

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.

2.png

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.

3.png

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

4.png

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

Add the following inside the Grid element.
<Grid.Resources>
       <DataTemplate x:Key="ColorItemTemplate">
              <StackPanel Orientation="Vertical">
                     <TextBlock Text="{Binding Path=Key}" 
                         Foreground="{Binding Path=Key}" />
              </StackPanel>
       </DataTemplate>
</Grid.Resources>
Edit the ListBox and add ItemTemplate property for ColorItemTemplate
<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" />
And one last thing, Change Application Name and Page Name 5.png

Run Windows Phone 7 Emulator

In Visual Studio 2010, you will notice that you have a combobox to select the desired Device. Unless you have a Windows Phone 7 device, you need to select “Windows Phone 7 Emulator”. 6.png The first time can take a couple of seconds and you will see the Emulator loading, you only need to do this Once, after the emulator loaded for the first time there isn't any need to close him even for debugging. 7.png If you press F5, you automatically get your application on the screen, if not you can use Home and Back button in the bottom of the emulator to get to the home page. 8.png Once you are in the Home Page, click the Right Arrow and then click on your application. 9.png 10.png Now Color Application should be up, pick a color, grid and click “Change”. 11.png12.png 13.png

License

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

Share

About the Author

Shai Raiten
Architect Sela
Israel Israel
Shai Raiten is VS ALM MVP, currently working for Sela Group as a ALM senior consultant and trainer specializes in Microsoft technologies especially Team System and .NET technology. He is currently consulting in various enterprises in Israel, planning and analysis Load and performance problems using Team System, building Team System customizations and adjusts ALM processes for enterprises. Shai is known as one of the top Team System experts in Israel. He conducts lectures and workshops for developers\QA and enterprises who want to specialize in Team System.

My Blog: http://blogs.microsoft.co.il/blogs/shair/

You may also be interested in...

Comments and Discussions

 
Questionwindow Phone 7 Development,how to ListView Bind by Get a json data using any api Example Pin
nishant chandwani9-Feb-14 23:12
membernishant chandwani9-Feb-14 23:12 
Generalpermission Pin
Risman Gunawan22-Apr-13 1:57
memberRisman Gunawan22-Apr-13 1:57 
GeneralMy vote of 1 Pin
Member 790546729-Dec-11 20:57
memberMember 790546729-Dec-11 20:57 
GeneralMy vote of 5 Pin
Bill SerGio, Infomercial King5-Jul-11 9:29
memberBill SerGio, Infomercial King5-Jul-11 9:29 
GeneralRe: My vote of 5 Pin
Member 790546729-Dec-11 20:52
memberMember 790546729-Dec-11 20:52 
GeneralIs it possible design a smart device window based application with HTML. Laugh | :laugh: Laugh | :laugh: Laugh | :laugh: Pin
Member 788088721-May-11 8:21
memberMember 788088721-May-11 8:21 
GeneralMy vote of 1 Pin
Member 79054677-May-11 21:05
memberMember 79054677-May-11 21:05 
GeneralMy vote of 1 Pin
hfrmobile7-May-11 10:10
memberhfrmobile7-May-11 10:10 
AnswerRe: My vote of 1 Pin
Shai Raiten24-Jun-11 22:13
memberShai Raiten24-Jun-11 22:13 
SuggestionRe: My vote of 1 Pin
hfrmobile25-Jun-11 23:11
memberhfrmobile25-Jun-11 23:11 
Shai Raiten wrote:
Just for your informaiton:

You can't write 'if (rad_ContentGrid.IsChecked)' because it's bool? and cannot be converted to bool

if (rad_ContentGrid.IsChecked.HasValue && rad_ContentGrid.IsChecked.Value)
{
  ...
}

Just a thought.

Using bool? that way enables the reader of the code immediately to see that it is bool? and not bool.
MCP, MCTS, MCPD
http://www.hfrmobile.com

AnswerRe: My vote of 1 Pin
Shai Raiten26-Jun-11 1:19
memberShai Raiten26-Jun-11 1:19 
AnswerRe: My vote of 1 Pin
hfrmobile26-Jun-11 2:53
memberhfrmobile26-Jun-11 2:53 
GeneralRe: My vote of 1 Pin
Shai Raiten26-Jun-11 3:35
memberShai Raiten26-Jun-11 3:35 
GeneralRe: My vote of 1 Pin
Member 790546729-Dec-11 20:56
memberMember 790546729-Dec-11 20:56 
JokeMVP Pin
hfrmobile19-Oct-10 3:51
memberhfrmobile19-Oct-10 3:51 
GeneralRe: MVP Pin
Member 790546729-Dec-11 20:58
memberMember 790546729-Dec-11 20:58 
GeneralMy vote of 2 Pin
hfrmobile19-Oct-10 3:47
memberhfrmobile19-Oct-10 3:47 
GeneralRe: My vote of 2 Pin
Shai Raiten19-Oct-10 4:21
memberShai Raiten19-Oct-10 4:21 
GeneralRe: My vote of 2 Pin
hfrmobile19-Oct-10 6:39
memberhfrmobile19-Oct-10 6:39 
GeneralMy vote of 5 Pin
Kim Togo31-Aug-10 0:50
memberKim Togo31-Aug-10 0:50 
GeneralRe: My vote of 5 Pin
Shai Raiten2-May-11 20:41
memberShai Raiten2-May-11 20:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150819.1 | Last Updated 25 Jun 2011
Article Copyright 2010 by Shai Raiten
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid