Windows Phone – Hello world!

on
Welcome to Windows Phone App Development. Those who are thinking to start Windows Phone App developing, but can’t understand where to start, by thinking about them I’m starting Windows Phone Kick Start. I hope, at least, you can come in handy.
Programming language or software development whatever you say, everything starts with a “Hello world” application. Which means, you are declaring your existence to the world.
At first, you have to open Visual Studio, then you can see the picture below.
Untitled6
Select “New Project”, and you can see something like the picture below.
Untitled
Select “Window Phone App”, and give it named “HelloWorld”. Click the Next button, and then you can see a popup window. We will select “Windows Phone OS 8.0”, and click Ok.
Untitled1
Now we can Visual Studio like the picture below.
Untitled
Now we will modify the “TitlePanel contains the name of the application and page title” section, like the code below.
1
2
3
4
5
<!--TitlePanel contains the name of the 
application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0"
Margin="12,17,0,28">
    <TextBlock Text="MY FIRST APPLICATION" 
Style="{StaticResource 
PhoneTextNormalStyle}" Margin="12,0"/>
    <TextBlock Text="Hello world!" 
Margin="9,-7,0,0" 
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
In line number 3 & 4, we gave our application name “MY FIRST APPLICATION” and gave the title “Hello world!”.
Now, we will modify our main grid. We will change the “ContentPanel – place additional content here” section like below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Button Content="Click Me"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Click="Button_Click_Me">
    </Button>
    <TextBox x:Name="TextBox_HelloWorld"
             HorizontalAlignment="Left"
             Height="72" Margin="0,72,0,0"
             TextWrapping="Wrap" Text=""
             VerticalAlignment="Top"
             Width="456"
             RenderTransformOrigin="0.158,0.806">
    </TextBox>
</Grid>
Here, we take a button control, whose content is “Click Me”, which will show in the surface of the button, and gave an event controller, which will handle the background work if someone click the button. Also we have taken a TextBox control, which will show the text for us, and it’s name is “TextBox_HelloWorld”. Our design will look like this,
Untitled5
We have come to an end of our application. Till now, we have design our app. Now we will code behind with C#. We will double click the MaingPage.xaml.cs in the Solution Explorer, and modify the code inside like this,
1
2
3
4
5
6
7
8
9
10
11
12
13
// Constructor
public MainPage()
{
    InitializeComponent();
    // Sample code to localize the ApplicationBar
    //BuildLocalizedApplicationBar();
}
private void Button_Click_Me(object sender, RoutedEventArgs e)
{
    TextBox_HelloWorld.Text = "Rock the world!";
}
Here, in line number 12, “TextBox_HelloWorld” is our TextBox’s name. We will call it by name, and it will show us the text “Rock the world!”. So our TextBox’s showing text will be “Rock the world!”.
Now we will run the application, for that reason you have to click the play button or press F5 like below,
Untitled7
And the application will look like this.
c
Now, if we click the “Click Me” button, it will show the text “Rock the world!” in the TextBox below.
I hope that, everyone can do this. So that’s it for today, I will come back with some new topics. Till then, Allah Hafez. Stay with us.
Download link: http://1drv.ms/1vBsobI

Comments

Post a Comment