Windows Phone Controls: Part 2

Introduction

Welcome again! I hope you are learning with us, give us feedback, let us know about your opinion. In Windows Phone Controls – Part 1 we saw seven essential controls of Windows Phone. Today we'll learn about more common controls like Input controls. We'll mostly talk about TextBox, Date and Time Picker controls. So let's get started.

Working with TextBox Control

First of all, today I'm not going to explain how to open a project from the start. We've done this before. So, I'm moving up to the content right here. Use two TextBlocks and change the Text content to “First Name” & “Last Name”. Then take two TextBoxs, named “firstNameTextBox” & “lastNameTextBox” and take another two TextBlocks and name them “welcomeTextBlock” & “nameTextBlock”. Arrange them as in the picture below.


                                             Figure 1

The design of the code is also given here.

<TextBlock Text="First Name: " FontSize="24"/>
<TextBox x:Name="firstNameTextBox" Grid.Column="1" />

<TextBlock Text="Last Name: " Grid.Row="1" FontSize="24"/>
<TextBox x:Name="lastNameTextBox" Grid.Row="1" Grid.Column="1" />

<Button x:Name="GoButton" Grid.Column="1" Grid.Row="2" Content="Go"
        VerticalAlignment="Bottom" Width="110" Click="GoButton_Click" />
<TextBlock x:Name="welcomeTextBlock" HorizontalAlignment="Left"
           Margin="10,9.5,0,0" Grid.Row="3" TextWrapping="Wrap"
           VerticalAlignment="Top" Height="55" Width="360" FontSize="24"
           Grid.ColumnSpan="2"/>
<TextBlock x:Name="nameTextBlock" HorizontalAlignment="Left"
           Margin="10,98.5,0,0" Grid.Row="3" TextWrapping="Wrap"
           Width="360" FontSize="24" Grid.ColumnSpan="2"
           Height="55" VerticalAlignment="Top"/>

Listing 1

Since we need to handle the Input operation, we used a Button control in the code above and have a click event “GoButton_Click”. So our C# code will look like this.

private void GoButton_Click(object sender, RoutedEventArgs e)
{
    if (lastNameTextBox.Text != string.Empty)
    {
        if (firstNameTextBox.Text != string.Empty)
        {
            welcomeTextBlock.Text = "Hello,";
            nameTextBlock.Text = firstNameTextBox.Text + " " + lastNameTextBox.Text;
        }
        else
        {
            welcomeTextBlock.Text = "Hello,";
            nameTextBlock.Text = lastNameTextBox.Text;
        }
    }
    else
    {
        welcomeTextBlock.Text = "Sorry,";
        nameTextBlock.Text = "Last name can't be empty!";
    }
}

Listing 2

Now, what I actually did is, checked whether or not the text of “lastNameTextBox” is empty. If it's not empty, it'll be good to go. Then we're checking the text of “firstNameTextBox” and if it's not empty then we'll do the operation below the second if decision statement. So, in this case we make a welcome text “Hello” and put the first and last name in the “nameTextBlock” or we'll just put the last name in this field.

Otherwise, we'll give an error message if the last name field is empty, because the last name can't be empty.

Working with Date & Time Picker Control

Now, we'll talk about the Date and Time Picker controls. Drag and drop or just write your own customized XAML. I like to write my preferable customized XAML. I've taken one Textblock as the header to show some text, one DatePicker and one TimePicker and a Button. On the right side, I've also taken a TextBlock as a header field and two other TextBlocks to show the date and time you'll pick. The design is given here.


                                               Figure 2

The design code is given below.

<TextBlock HorizontalAlignment="Left" Margin="10,10.167,0,0"
           Grid.Row="4" TextWrapping="Wrap" Text="Pick a Date and Time"
           FontSize="20" VerticalAlignment="Top" Height="47" Width="170"/>
<DatePicker x:Name="datePicker" HorizontalAlignment="Left"
            Margin="10,74.167,0,0" Grid.Row="4"
            VerticalAlignment="Top" Width="170"/>
<TimePicker x:Name="timePicker" HorizontalAlignment="Left"
            Margin="10,146.167,0,0" Grid.Row="4" VerticalAlignment="Top"
            Width="170"/>
<TextBlock HorizontalAlignment="Left" Margin="10,10.167,0,0"
           Grid.Row="4" TextWrapping="Wrap" Text="You have selected"
           FontSize="20" VerticalAlignment="Top" Height="47"
           Width="170" Grid.Column="1"/>
<TextBlock x:Name="dateTextBlock" HorizontalAlignment="Left"
           Margin="10,84.167,0,0" Grid.Row="4" TextWrapping="Wrap"
           FontSize="20" VerticalAlignment="Top" Height="47"
           Width="170" Grid.Column="1"/>
<TextBlock x:Name="timeTextBlock" HorizontalAlignment="Left"
           Margin="10,156.167,0,0" Grid.Row="4" TextWrapping="Wrap"
           FontSize="20" VerticalAlignment="Top" Height="47" Width="170"
           Grid.Column="1"/>
<Button x:Name="submitButton" Grid.Row="4" Content="Submit"
        VerticalAlignment="Bottom" Width="110"
        Click="submitButton_Click" Margin="10,0,0,1" />

Listing 3

And in the code behind, the C# code will be like this.

private void submitButton_Click(object sender, RoutedEventArgs e)
{
    //dateTextBlock.Text = datePicker.Date.Day + " /" + datePicker.Date.Month + " /" + datePicker.Date.Year;
    dateTextBlock.Text = datePicker.Date.ToString("D");
    //timeTextBlock.Text = timePicker.Time.Hours + ":" + timePicker.Time.Minutes;
    //timePicker.ClockIdentifier = Windows.Globalization.ClockIdentifiers.TwelveHour;
    timeTextBlock.Text = timePicker.Time.ToString("T");
}

Listing 4

Here, in the Button event handler, we've used some methods to show the date and time. The best and easy option is given here for both date and time. Others are commented out, you can try these if you want.

After you've set all these, your design will look like this:


                                       Figure 3

And if you run the application, it'll work just like this.


                                          Figure 4

Summary

I hope, you can do that with me. See you soon with Part 3. Until then, good bye. Have a nice day. Happy coding.

Read the original article at: http://bit.ly/1FcnI0H