In this post I will walk you through on how to build a Hello World Windows Phone 7 App. The "Hello World" app that I am building in this tutorial is a "Save the World" app in which if you enter a correct pass phrase you will save the world for you :), if not you cannot save the world :P
To get started you will need Windows Phone 7 Developer Tools, you can download them here.
Once you download and install Windows Phone 7 Developer Tools, Create a Windows Phone Application.
You will be presented with a dialog which would look like this -
The first thing I did after creating the app is to rename Application Title and Page Title. Here is what I renamed them to
| 1 | <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> |
| 2 | <TextBlock x:Name="ApplicationTitle" Text="My Ninja App" Style="{StaticResource PhoneTextNormalStyle}"/> |
| 3 | <TextBlock x:Name="PageTitle" Text="Save the world" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> |
| 4 | </StackPanel> |
And this is what the Phone Emulator looked after I renamed -
I will now drag couple of textblocks, a textbox and a button on to the Phone designer and then rename them to something which makes more sense, here is the XAML -
| 1 | <TextBox Height="72" HorizontalAlignment="Left" Margin="12,116,0,0" Name="tbNinjaPhrase" Text="" VerticalAlignment="Top" Width="460" /> |
| 2 | <TextBlock Height="79" HorizontalAlignment="Left" Margin="25,31,0,0" Name="textBlock1" Text="What is your Ninja pass phrase to save the world?" VerticalAlignment="Top" Width="425" TextWrapping="Wrap" /> |
| 3 | <Button Content="Save the World!" Height="69" HorizontalAlignment="Left" Margin="109,194,0,0" Name="btnSaveTheWorld" VerticalAlignment="Top" Width="249" Click="btnSaveTheWorld_Click" /> |
| 4 | <TextBlock Height="114" HorizontalAlignment="Left" Margin="25,269,0,0" Name="messageBlock" Text="" VerticalAlignment="Top" Width="425" TextWrapping="Wrap" /> |
and this is how the phone UI will look like after dragging all the UI elements -
Then I double click on button and put in this code in the code behind -
| 1 | private void btnSaveTheWorld_Click(object sender, RoutedEventArgs e) |
| 2 | { |
| 3 | string ninjaPhrase = tbNinjaPhrase.Text; |
| 4 | if (!string.IsNullOrEmpty(ninjaPhrase)) |
| 5 | { |
| 6 | if (string.Compare("startrek", ninjaPhrase, StringComparison.OrdinalIgnoreCase) == 0) |
| 7 | { |
| 8 | messageBlock.Text = "Vola! Way to go Ninja, You saved the world!"; |
| 9 | } |
| 10 | else |
| 11 | { |
| 12 | messageBlock.Text = "That is not a Ninja Phrase! You cannot save the world!"; |
| 13 | } |
| 14 | } |
| 15 | else |
| 16 | { |
| 17 | messageBlock.Text = "Are you kidding? That is not a Ninja Phrase! You cannot save the world!"; |
| 18 | } |
| 19 | } |
I run the App and vola!,
Here is what you would see when you put it "stratrek" as pass code :)
And if you put in some other pass phrase you would see "You didn't save the world" :)
And that is your first Hello World Windows Phone 7 App.
If you wish to checkout the code here is the code on GitHub https://github.com/subbaraokv/Hello-World---Windows-Phone-7
Hope this helped,
Cheers,
Venkata