Universal Windows Platform Controls - Part Two

Introduction

Welcome again,

• Universal Windows Platform Controls - Part 1

We have seen seven essential controls of universal Windows platform. Today, we’ll learn about more common controls like input controls. We’ll mostly talk about TextBox, Date and Time Picker controls. Thus, let’s get started.

Working with TextBox Control

First of all, today I’m not going to explain how to open up a project from the beginning. We’ve done this before. Thus, I’m moving up to the content right here. Take two TextBlocks and change the Text content to “First Name” & “Last Name”. Take two TextBoxes, name them “firstNameTextBox” & “lastNameTextBox”. Take another two TextBlocks and name them “welcomeTextBlock” & “nameTextBlock”. Arrange them , as shown in the image, given below:



Designing 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,5,0,0" Grid.Row="3" TextWrapping="Wrap" VerticalAlignment="Top" Height="40" Width="320" FontSize="20" Grid.ColumnSpan="2" />
<TextBlock x:Name="nameTextBlock" HorizontalAlignment="Left" Margin="10,50,0,0" Grid.Row="3" TextWrapping="Wrap" Width="320" FontSize="20" Grid.ColumnSpan="2" Height="40" VerticalAlignment="Top" />

Listing 1

As we have to handle the Input operation, we used a Button control in the code mentioned above and have a click event.

“GoButton_Click”. Thus, our C# code will look, as shown below:

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 check the text of “lastNameTextBox” to see whether it’s empty or not. If it’s not empty, it’ll be good to go. We’re checking the text of “firstNameTextBox” and if it’s not empty, we’ll do the operation given below, the second "if decision statement". Thus, in this case, we make a welcome text, “Hello”. Subsequently, 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 last name can’t be empty.

Working with Date & Time Picker Control

Now, we’ll talk about 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 a header to show some text, one DatePicker, 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:



Designing the code is given below:

<TextBlock HorizontalAlignment="Left" Margin="10,10.333,0,0" Grid.Row="4" TextWrapping="Wrap" Text="Pick a Date and Time" FontSize="20" VerticalAlignment="Top" Height="40" Width="320" Grid.ColumnSpan="2" />
<DatePicker x:Name="datePicker" HorizontalAlignment="Left" Margin="10,54,0,0" Grid.Row="4" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2" />
<TimePicker x:Name="timePicker" HorizontalAlignment="Left" Margin="10,93,0,0" Grid.Row="4" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2" />
<Button x:Name="submitButton" Grid.Row="4" Content="Submit" Width="110" Click="submitButton_Click" Margin="10,131,0,202.333" />
<TextBlock HorizontalAlignment="Left" Margin="10,172,0,0" Grid.Row="4" TextWrapping="Wrap" Text="You have selected" FontSize="20" VerticalAlignment="Top" Height="47" Width="320" Grid.ColumnSpan="2" />
<TextBlock x:Name="dateTextBlock" HorizontalAlignment="Left" Margin="10,208,0,0" Grid.Row="4" TextWrapping="Wrap" FontSize="20" VerticalAlignment="Top" Height="40" Width="320" Grid.ColumnSpan="2" />
<TextBlock x:Name="timeTextBlock" HorizontalAlignment="Left" Margin="10,253,0,0" Grid.Row="4" TextWrapping="Wrap" FontSize="20" VerticalAlignment="Top" Height="40" Width="320" Grid.ColumnSpan="2" />

Listing 3

In the code at the backend, C# code will look like:

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 easiest 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:



If you run the Application, it’ll work just like this:

 

Summary

Hope you can do it now. See you with Part 3. Until then, good bye. Have a nice day. Happy coding.

Source code is here.