Build Your First Windows Phone 7 Silverlight Application – Part 1

18/03/2010

Build Your First Windows Mobile 7 Silverlight Applicationimage – Part 1

Yesterday I post about Windows Phone Developer Tools Available Now For Download, so if you didn’t download it now it’s 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.

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.

image 

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 there is new category “SilverLight for Windows Phone”.

Pick “Windows Phone Application” and create the project.

image

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

Nice thing you’ll notice is the Style of all controls is based on Windows Phone 7 Styles (Placed in App.Xaml)

image

 

Add Code Behind

Create 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));

}

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

{

    var item = (KeyValuePair<string, Color>)list_colors.SelectedItem;

    SolidColorBrush color = new SolidColorBrush(item.Value);

 

    if (rad_ContentGrid.IsChecked == true)

        this.ContentGrid.Background = color;

    else if (rad_layout.IsChecked == true)

        this.LayoutRoot.Background = color;

    else

        this.LayoutRoot.Background = this.ContentGrid.Background = color;

}

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

image

 

Full Code Behind:

public MainPage()

{

    InitializeComponent();

 

    SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

}

 

private void ContentGrid_Loaded(object sender, RoutedEventArgs e)

{

    list_colors.ItemsSource = EnumerateColors();

}

 

private void button1_Click(object sender, RoutedEventArgs e)

{

    if (list_colors.SelectedItem != null)

    {

        var item = (KeyValuePair<string, Color>)list_colors.SelectedItem;

        SolidColorBrush color = new SolidColorBrush(item.Value);

 

        if (rad_ContentGrid.IsChecked == true)

            this.ContentGrid.Background = color;

        else if (rad_layout.IsChecked == true)

            this.LayoutRoot.Background = color;

        else

            this.LayoutRoot.Background = this.ContentGrid.Background = color;

    }

}

 

IEnumerable EnumerateColors()

{

    foreach (var color in typeof(Colors).GetProperties())

        yield return new KeyValuePair<string, Color>(color.Name,

            (Color)color.GetValue(null, null));

}

 

Full Xaml:

<phoneNavigation:PhoneApplicationPage

    x:Class="DemoHelloWorldApplication.MainPage"

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

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

    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"

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

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

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    >

 

  <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

    <Grid.RowDefinitions>

      <RowDefinition Height="Auto"/>

      <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

 

    <Grid.Resources>

      <DataTemplate x:Key="ColorItemTemplate">

        <StackPanel Orientation="Vertical">

          <TextBlock Text="{Binding Path=Key}" Foreground="{Binding Path=Key}" />

        </StackPanel>

      </DataTemplate>

    </Grid.Resources>

 

    <!–TitleGrid is the name of the application and page title–>

    <Grid x:Name="TitleGrid" Grid.Row="0">

      <TextBlock Text="Hello World Application – Shai Raiten" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>

      <TextBlock Text="Colors…" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>

    </Grid>

 

    <!–ContentGrid is empty. Place new content here–>

    <Grid x:Name="ContentGrid" Grid.Row="1" Loaded="ContentGrid_Loaded">

      <Button Content="Change" Height="70" HorizontalAlignment="Left" Margin="306,19,0,0" Name="btn_start" VerticalAlignment="Top" Width="160" Click="button1_Click" />

      <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" />

      <TextBlock Height="39" HorizontalAlignment="Left" Margin="20,42,0,0" Name="textBlock1" Text="Pick Color" VerticalAlignment="Top" Width="123" />

      <RadioButton Content="Layout" Height="40" HorizontalAlignment="Left" Margin="20,87,0,0" Name="rad_layout" VerticalAlignment="Top" IsChecked="True" />

      <RadioButton Content="Content" Height="40" HorizontalAlignment="Left" Margin="160,87,0,0" Name="rad_ContentGrid" VerticalAlignment="Top" />

      <RadioButton Content="All" Height="40" HorizontalAlignment="Left" Margin="320,87,0,0" Name="rad_all" VerticalAlignment="Top" Width="160" />

    </Grid>

  </Grid>

 

</phoneNavigation:PhoneApplicationPage>

 

Continue To Part 2

Add comment
facebook linkedin twitter email

Leave a Reply

one comment