Universal Windows Platform App Development Using Visual Studio 2017

Universal Windows Platform App Development Using Visual Studio 2017 

 
Microsoft launched Visual Studio 2017 last week. Today, in this article, I am going to talk about how to download Visual Studio 2017, how to install VS17, how to create new Universal Windows Platform (UWP) app using Visual Studio 2017; and will also talk about some basic features of Visual Studio, app deployment, Universal Windows Emulator and some common controls of UWP apps, available on Visual Studio 2017.
 
You can download Visual Studio 2017 from here.
 
For this article, I am using Visual Studio 2017 Professional Version.
 
visual studio 2017
Figure 1: Visual Studio 2017 Professional version download page
 
Download and save web installer of Visual Studio 2017. If you download VS 2017 now, you can claim for a 60-day free trial license of Xamarin University.
 
visual studio 2017 
Figure 2: Xamarin University trial license offer
 
Once you download and click on the web installer, you will see the VS privacy settings page like below.
 
visual studio 2017
 
visual studio 2017
Figure 3: Visual Studio installation file loading
 
Click "Continue" on the above page to start the installation process of VS 2017.
  
visual studio 2017
Figure 4: Visual Studio 2017 installation process
 
No Visual Studio installation process will start. You need to select from the Workloads the one you want to install.
  
visual studio 2017
Figure 5: Visual Studio 2017 installation process
 
Here, for UWP app development, I have selected Universal Windows Platform development from the Windows workload.
  
visual studio 2017
Figure 6: Visual Studio 2017 individual component selection
 
Here, I have added a few more components. My installation is almost full installation of VS17 with all the features, that’s why the size is bigger - more than 46 GB.
  
visual studio 2017
Figure 7: Visual Studio 2017 language packs selection
 
You can select your own language from the language packs selection option. Once you click on the "Install" button, the installation will begin.
  
visual studio 2017
Figure 8: Visual Studio installation
 
As the installation begins, you can see the above screen.
  
visual studio 2017
Figure 9: Starting Visual Studio
 
Once the installation is done, you need to restart your computer and launch Visual Studio. For the first time, the above screen will show. It will take a few minutes to launch Visual Studio for the first time.
 
visual studio 2017
Figure 10: Initial page of Visual Studio 2017
 
The above screen is the initial page of Visual Studio 2017. If developer mode is off, then the below screen will appear on your pc and prompt you to toggle the developer mode ON.
 
visual studio 2017
Figure 11: Settings page to on Developer mode
 
Once you turn on the developer mode, now you can use visual studio 2017 to develop the UWP app.
 
visual studio 2017
Figure 12: Visual Studio 2017 to create new project
 
visual studio 2017
Figure 13: VS 17 project template for UWP
 
Now, you need to select your project type. Here, I have selected a Blank App – Universal Windows. You need to select the target version and minimum supported version now.
 
I have selected Windows 10 Anniversary Edition as a target version and Windows 10 as the minimum version.
 
visual studio 2017
Figure 14: Target and minimum version selection
 
A new Universal Windows Platform project is created, and now, you can develop the UWP app in Visual Studio 2017.
 
Now, click on the mainpage.xaml from Solution Explorer to see the designer section on VS17.
 
visual studio 2017
Figure 14: Designer Section
 
From the toolbox, drag and drop text block control in the designer section and modify the text to “Universal Windows Platform App Development”. Your design should look like the above figure.
 
visual studio 2017
Figure 15: Running Universal Windows app on VS17
 
There are a lot of options for us to run our UWP app. We can run our app on,
  • Local machine
  • Remote machine
  • Device
  • And different Windows phone mobile emulators
visual studio 2017
Figure 16: Splash screen after running the Universal Windows app
 
You can select any option from figure 15 to run the app. Here, I have selected a local machine to run my first app. At first, it will take some time to run the app. It will build the app first and then run.
 
visual studio 2017
Figure 17: Universal Windows Platform app on a local machine
 
In the running app, we can see a black bar at the top. This bar is to see UI layout properly and its contents. We can see display layout adcorners and positions of each controls on the app.
 
visual studio 2017
Figure 18: Display layout adcorners on local machine simulator
 
Now, close the local machine simulator and you will notice Live Visual Tree from the left section of Visual Studio 2017. You can see the hierarchy of the UI on the Live Visual Tree section.
 
visual studio 2017
Figure 19: Live Visual Tree of Visual Studio 2017
 
You can run the app on the Windows Phone emulator as well. Here, I have selected a Windows phone emulator with 2 GB RAM. It will take some time to load the emulator and run it. Once you run the app, it will look like this.
 
visual studio 2017
 
visual studio 2017
Figure 20: UWP app on Windows Phone emulator
 
Now, we will work with different controls of the Universal Windows Platform.
 

HyperlinkButton

 
Now, we’ll work with another Button like control called “HeyperLinkButton”. It’s used to link a URL or some other things you like.
 
To do that, you can see Toolbox on the left side of Visual Studio and you can find it in the “All XAML Controls” section. Click on this control and drag it to your design. Like this,
 
visual studio 2017
Figure 21
 
Now, to make sure it works, we need another TextBlock control. To do so, drag it from the Toolbox and put it below the Hyperlink button. The designing code is given below. 
  1. <HyperlinkButton x:Name="HyperlinkButton_1"     
  2.                 Content="HyperlinkButton"     
  3.                 HorizontalAlignment="Left"    
  4.                 VerticalAlignment="Top"    
  5.                 Margin="10,10,0,0"    
  6.                 Click="HyperlinkButton_1_Click"    
  7.                 Grid.Column="0"    
  8.                 Grid.Row="0"    
  9.                 Width="114"    
  10.                 Height="50"/>  
  11. <TextBlock x:Name="HB_TextBlock"    
  12.         HorizontalAlignment="Left"    
  13.         VerticalAlignment="Top"    
  14.         TextWrapping="Wrap"                      
  15.         Height="50"    
  16.         Width="124"    
  17.         FontSize="24"    
  18.         Grid.Column="1"    
  19.         Grid.Row="0"    
  20.         Margin="10"/>     
Listing: 1
 
Here, in HyperlinkButton, we have an event controller named HyperlinkButton_1_Click. It creates a code block that will handle the background task when you will click on the hyperlink button and we will be shown a confirmation message in the TextBlock named HB_TextBlock.
 

Making Grid

 
We have made some Grids in our main Grid to arrange the controls in these Grids, like Grid 1, 2 and so on. You can make Grids wherever you want and customize the Grid as your need. 
  1. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="70*"/>  
  4.         <RowDefinition Height="80*"/>  
  5.         <RowDefinition Height="68*"/>  
  6.         <RowDefinition Height="93*"/>  
  7.         <RowDefinition Height="145*"/>  
  8.         <RowDefinition Height="124*"/>  
  9.         <RowDefinition Height="60*"/>  
  10.     </Grid.RowDefinitions>  
  11.     <Grid.ColumnDefinitions>  
  12.         <ColumnDefinition Width="60*"/>  
  13.         <ColumnDefinition Width="40*"/>  
  14.     </Grid.ColumnDefinitions>  
  15. </Grid>      
Listing: 2
 
Now, the main Grid will look like this.
 
visual studio 2017
Figure 22
 
You can define Row Definitions, a number of rows along with their width and Column Definitions according to their width. We have seven rows and two columns here.
 
Now, open MainPage.xaml.cs and put the code below the constructor. 
  1. private void HyperlinkButton_1_Click(object sender, RoutedEventArgs e)    
  2. {    
  3.     HB_TextBlock.Text = "OK";    
  4. }     
Listing 2
 
Now, run the application and it will look like the picture below once you click on the hyperlink button.
 
visual studio 2017  
 
visual studio 2017
Figure 23
 

Working with RadioButton

 
Well if you can do that, then you are on move. Now, we take another control name RadioButton, and drag it from TextBlock and put it in another Grid and also a TextBlock in Row 1. The customized code will look like this, or you can simply drag a control and test separately; it’s up to you. I suggest you to do as I did.
 
So, our design will look like this.
  
visual studio 2017
Figure 24
 
and the designing code is below.
  1. <RadioButton x:Name="RadioButton_1"    
  2.                 Content="RadioButton"    
  3.                 HorizontalAlignment="Left"    
  4.                 Margin="10,4,0,0"    
  5.                 Grid.Row="1"    
  6.                 Grid.Column="0"    
  7.                 VerticalAlignment="Top"    
  8.                 Checked="RadioButton_1_Checked" Height="66" Width="114"/>  
  9. <TextBlock x:Name="RB_TextBlock"    
  10.             HorizontalAlignment="Left"    
  11.             VerticalAlignment="Top"    
  12.             Margin="10,10,0,0"    
  13.             TextWrapping="Wrap"                      
  14.             Height="60"    
  15.             Width="124"    
  16.             FontSize="24"    
  17.             Grid.Column="1"    
  18.             Grid.Row="1"/>      
Listing 3
 
Here, like HyperlinkButton, in our RadioButton, we have also an event handler named RadioButton_1_Checked, and in our event handler, we will show the confirmation message whether checked or unchecked. 
  1. private void RadioButton_1_Checked(object sender, RoutedEventArgs e)    
  2. {    
  3.     if (RadioButton_1.IsChecked == true)    
  4.     {    
  5.         RB_TextBlock.Text = "Checked";    
  6.     }    
  7.     else    
  8.     {                   
  9.         RB_TextBlock.Text = "Not checked";    
  10.     }    
  11. }      
Listing 4
 
Here, we’re checking whether our RadioButton is checked or not. If it’s checked (true), the TextBlock will show “Checked”; and if it’s unchecked (false), the TextBox will show “Not checked”.
 
After you run your application, it’ll look exactly like this.
 
visual studio 2017
 
visual studio 2017
Figure 25
 

Working with TextBlock

 
Another control we rapidly use in our every application is TextBlock. We’ve used it in our previous controls also. We will show static data in our TextBlocke.x., “Hello world”.
 
The design will look like this.
 
visual studio 2017
Figure 26
 
Designing code is below. 
  1.     
  2.   
  3. <TextBlock Text="Hello world"    
  4.            HorizontalAlignment="Left"    
  5.            Margin="10,10,0,0"    
  6.            Grid.Row="2"    
  7.            TextWrapping="Wrap"    
  8.            VerticalAlignment="Top"    
  9.            Height="40"    
  10.            Width="380"    
  11.            FontSize="24" Grid.ColumnSpan="2"/>    
Listing 5
 
We don’t need any Button or event handler in this case, cause the text is given statically in the design (Text=”Hello world”).
 
After you run your application, it’ll look exactly like this.
  
visual studio 2017
 
visual studio 2017
Figure 27
 

Working with ToggleSwitch

 
Another control we’ll talk about is ToggleSwitch. It’s really a beautiful control that will make your application cooler than before. I think you know, how to use control now, we have done it before. So, just take this control and take another TextBlock, and the design will look like this.
 
 
visual studio 2017
Figure 28
 
The designing code is below, 
  1. <ToggleSwitch x:Name="ToggleSwitch_1"    
  2.                 Header="ToggleSwitch"    
  3.                 Margin="10,10,0,0"    
  4.                 Grid.Row="3"    
  5.                 VerticalAlignment="Top"    
  6.                 Toggled="ToggleSwitch_1_Toggled"    
  7.                 Width="196"    
  8.                 Height="73"/>  
  9. <TextBlock x:Name="TS_TextBlock"    
  10.             HorizontalAlignment="Left"    
  11.             VerticalAlignment="Top"    
  12.             Margin="10,10,0,0"    
  13.             TextWrapping="Wrap"                      
  14.             Height="73"    
  15.             Width="124"    
  16.             FontSize="24"    
  17.             Grid.Column="1"    
  18.             Grid.Row="3"/>  
Listing 6
 
We have an event handler here, so the C# code is given below. 
  1. private void ToggleSwitch_1_Toggled(object sender, RoutedEventArgs e)    
  2. {    
  3.     if (ToggleSwitch_1.IsOn == true)    
  4.     {    
  5.         TS_TextBlock.Text = "This is On";    
  6.     }    
  7.     else    
  8.     {    
  9.         TS_TextBlock.Text = "This is Off";    
  10.     }    
  11. }      
Listing 7
 
We did the same logic here as the RadioButton.
 
After you run your application, it’ll look exactly like this.
 
visual studio 2017
 
visual studio 2017
Figure 29
 

Working with ListBox

 
Our fifth control will be ListBox, its data binding control. It’s an important control which has some complicated structure. So let’s see how we can use it in our application.
 
Like other controls drag it from Toolbox and put in the Grid. Here, we need a Button and TextBlock controls.
 
The design will look like this,
 
visual studio 2017
Figure 30
 
The designing code is given below, 
  1. <ListBox x:Name="ListBox_1"    
  2.          HorizontalAlignment="Left"    
  3.          Height="120"    
  4.          Margin="10,10,0,0"    
  5.          Grid.Row="4"    
  6.          VerticalAlignment="Top"    
  7.          Width="196"    
  8.          ScrollViewer.VerticalScrollBarVisibility="Visible">  
  9.     <ListBoxItem Content="January"/>  
  10.     <ListBoxItem Content="February"/>  
  11.     <ListBoxItem Content="March"/>  
  12.     <ListBoxItem Content="April"/>  
  13.     <ListBoxItem Content="May"/>  
  14.     <ListBoxItem Content="June"/>  
  15.     <ListBoxItem Content="July"/>  
  16.     <ListBoxItem Content="August"/>  
  17.     <ListBoxItem Content="September"/>  
  18.     <ListBoxItem Content="October"/>  
  19.     <ListBoxItem Content="November"/>  
  20.     <ListBoxItem Content="December"/>  
  21. </ListBox>  
  22. <Button Content="Ok"    
  23.         x:Name="Ok"    
  24.         Grid.Column="1"    
  25.         HorizontalAlignment="Left"    
  26.         Margin="10,10,0,0"    
  27.         Grid.Row="4"    
  28.         VerticalAlignment="Top"    
  29.         Width="110"    
  30.         Click="Ok_Click"/>  
  31. <TextBlock x:Name="LB_TextBlock"    
  32.             HorizontalAlignment="Left"    
  33.             VerticalAlignment="Top"    
  34.             Margin="10,53,0,0"    
  35.             TextWrapping="Wrap"                      
  36.             Height="82"    
  37.             Width="124"    
  38.             FontSize="24"    
  39.             Grid.Column="1"    
  40.             Grid.Row="4"/>     
Listing 8
 
Here, we have an event handler named “Ok_Click”, and we have binded some month’s name inside the ListBox’s starting and closing tags. TextBlock’s name is LB_TextBlock.
 
So, the C# code will look like this. 
  1. private void Ok_Click(object sender, RoutedEventArgs e) {  
  2.  string[] month = {  
  3.   "January",  
  4.   "February",  
  5.   "March",  
  6.   "April",  
  7.   "May",  
  8.   "June",  
  9.   "July",  
  10.   "August",  
  11.   "September",  
  12.   "October",  
  13.   "November",  
  14.   "December"  
  15.  };  
  16.  if (ListBox_1.SelectedValue != null) {  
  17.   LB_TextBlock.Text = month[ListBox_1.SelectedIndex];  
  18.  } else {  
  19.   LB_TextBlock.Text = "Select a item from list.";  
  20.  }  
  21. }   
Listing 9
 
Here, we have created a string Array named month, and the array index’s values are the month’s name. In If decision statement, first we’re checking if the ListBlock is selected or not, if an item is selected we’re matching the SelectedIndex’s value with our array Index’s value, and if no item’s selected then an alert message will be shown in the TextBlock.
 
If we run the application, it will look exactly like this,
 
visual studio 2017
 
visual studio 2017
Figure 31
 

Working with ComboBox

 
Now, we’ll talk about a similar control and it’s really more awesome than ListBox; it works exactly the same as ListBox, but it depends on your application which will be more appropriate in case of your needs. It’s called a ComboBox. Take it from ToolBox or you can just write XAML on your own, like or something like that. So, the design will look like this,
 
visual studio 2017
Figure 32
 
The designing code is given below, 
  1. <ComboBox x:Name="ComboBox_1"      
  2.           HorizontalAlignment="Left"      
  3.           Margin="10,0.167,0,0"      
  4.           Grid.Row="5"      
  5.           VerticalAlignment="Top"      
  6.           Width="220">    
  7.     <ComboBoxItem Content="January"/>    
  8.     <ComboBoxItem Content="February"/>    
  9.     <ComboBoxItem Content="March"/>    
  10.     <ComboBoxItem Content="April"/>    
  11.     <ComboBoxItem Content="May"/>    
  12.     <ComboBoxItem Content="June"/>    
  13.     <ComboBoxItem Content="July"/>    
  14.     <ComboBoxItem Content="August"/>    
  15.     <ComboBoxItem Content="September"/>    
  16.     <ComboBoxItem Content="October"/>    
  17.     <ComboBoxItem Content="November"/>    
  18.     <ComboBoxItem Content="December"/>    
  19. </ComboBox>    
  20. <TextBlock x:Name="CB_TextBlock"      
  21.            HorizontalAlignment="Left"      
  22.            VerticalAlignment="Top"      
  23.            Margin="10,65.167,0,0"      
  24.            TextWrapping="Wrap"                        
  25.            Height="40"      
  26.            Width="380"      
  27.            FontSize="24"      
  28.            Grid.Row="5" Grid.ColumnSpan="2"/>   
Listing 10
 
And the C# code is here. 
  1. private void Ok_1_Click(object sender, RoutedEventArgs e) {  
  2.  string[] month = {  
  3.   "January",  
  4.   "February",  
  5.   "March",  
  6.   "April",  
  7.   "May",  
  8.   "June",  
  9.   "July",  
  10.   "August",  
  11.   "September",  
  12.   "October",  
  13.   "November",  
  14.   "December"  
  15.  };  
  16.  if (ComboBox_1.SelectedValue != null) {  
  17.   CB_TextBlock.Text = month[ComboBox_1.SelectedIndex];  
  18.  } else {  
  19.   CB_TextBlock.Text = "Select a item from list.";  
  20.  }  
  21. }  
Listing 11
 
If we run the application, it’ll look exactly like this.
 
visual studio 2017
 
visual studio 2017
Figure 33
 

Adding a User Control

 
And lastly, we’ll talk about Popup Box with a Button control, and it will show some messages. For this, we need a User Control. Go to the Solution Explorer, and Add >> New Item.
 
visual studio 2017
Figure 34
 
Now you’ve to select User Control and give it a name called “PopupPanel”.
 
visual studio 2017
Figure 35
 
Customize the XAML code, mainly the Grid section. 
  1. <Grid>  
  2.     <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
  3.         <StackPanel Orientation="Vertical" Height="200" Width="200" VerticalAlignment="Center">  
  4.             <TextBlock Text="This is a Popup!" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,60,0,0"/>  
  5.             <TextBlock Text="Hit the button again to hide me" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" TextWrapping="Wrap" TextAlignment="Center"/>  
  6.             <Button HorizontalAlignment="Center" Content="Close Popup" Click="ClosePopup" />  
  7.         </StackPanel>  
  8.     </Border>  
  9. </Grid>    
Listing 12
 
Here, we’ve Border brush, StacPanel which will bound the TextBlocks and a Button. The design will look like this,
 
visual studio 2017
Figure 36
 
The C# code of PopupPanel.xaml.cs is given below. It’s mainly the Button’s event handler. 
  1. private void ClosePopup(object sender, RoutedEventArgs e) {  
  2.  Popup hostPopup = this.Parent as Popup;  
  3.  hostPopup.IsOpen = false;  
  4. }   
Listing 13
 
We'll just make our first User Control. It’s really helpful when you need a custom control in your application.
 

Working with Popup Window

 
Now, in our MainPage.xaml, we have to take a TextBlock which will have a header message called “Popup Window” and a Button which content is “Show Popup”. The design will look like this,
 
visual studio 2017
Figure 37
 
The designing code is given below, 
  1. <TextBlock HorizontalAlignment="Left"    
  2.            Text="Popup Winodow"    
  3.            VerticalAlignment="Top"    
  4.            Margin="10,10,0,0"    
  5.            TextWrapping="Wrap"                      
  6.            Height="40"    
  7.            Width="220"    
  8.            FontSize="24"    
  9.            Grid.Row="6"/>  
  10. <Button Content="Show Popup"    
  11.         x:Name="PopupButton"    
  12.         Grid.Column="1"    
  13.         HorizontalAlignment="Left"    
  14.         Margin="10,0,0,0"    
  15.         Grid.Row="6"    
  16.         VerticalAlignment="Top"    
  17.         Width="140"    
  18.         Click="PopupButton_Click"/>   
Listing 14
 
Our event handler C# code behind is also given here, 
  1. private void PopupButton_Click(object sender, RoutedEventArgs e) {  
  2.  if (!popup.IsOpen) {  
  3.   popup.Child = new PopupPanel();  
  4.   popup.VerticalOffset = 250.0;  
  5.   popup.HorizontalOffset = 100.0;  
  6.   popup.IsOpen = true;  
  7.  }  
  8. }  
  9. Popuppopup = newPopup();   
Listing 15
 
Here, we have created a new object of Popup window and checked it in our event handler code block by If decision statement. We have created a Popup Child object and set its position and make IsOpen equal to true so that it shows up when it’s called.
 
If we run the application, it’ll look exactly like this.
 
visual studio 2017
 
visual studio 2017
Figure 38
 

Finalizing and running our Control Application

 
In the end, our full design will look like the picture below,
 
visual studio 2017
Figure 39
 
And if we run the complete application, it’ll look exactly like this.
 
visual studio 2017
 
visual studio 2017
Figure 40
 

Working with TextBox Control

 
Take two TextBlocks, and change the Text content to “First Name” & “Last Name”. Then take two TextBoxs, named it “firstNameTextBox” & “lastNameTextBox”, and take another two TextBlock and named it “welcomeTextBlock” & “nameTextBlock”. Arrange them like the picture below.
 
visual studio 2017
Figure 41
 
Designing code is also given here. 
  1. <TextBlock Text="First Name: "FontSize="24"/>  
  2. <TextBoxx:NameTextBoxx:Name="firstNameTextBox"Grid.Column="1" />  
  3. <TextBlock Text="Last Name: "Grid.Row="1"FontSize="24"/>  
  4. <TextBoxx:NameTextBoxx:Name="lastNameTextBox"Grid.Row="1"Grid.Column="1" />  
  5. <Buttonx:NameButtonx:Name="GoButton"Grid.Column="1"Grid.Row="2" Content="Go"VerticalAlignment="Bottom" Width="110" Click="GoButton_Click" />  
  6. <TextBlockx:NameTextBlockx: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"/>  
  7. <TextBlockx:NameTextBlockx: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 16
 
As we have 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. 
  1. private void GoButton_Click(object sender, RoutedEventArgs e) {  
  2.  if (lastNameTextBox.Text != string.Empty) {  
  3.   if (firstNameTextBox.Text != string.Empty) {  
  4.    welcomeTextBlock.Text = "Hello,";  
  5.    nameTextBlock.Text = firstNameTextBox.Text + " " + lastNameTextBox.Text;  
  6.   } else {  
  7.    welcomeTextBlock.Text = "Hello,";  
  8.    nameTextBlock.Text = lastNameTextBox.Text;  
  9.   }  
  10.  } else {  
  11.   welcomeTextBlock.Text = "Sorry,";  
  12.   nameTextBlock.Text = "Last name can't be empty!";  
  13.  }  
  14. }   
Listing 17
 
Now, what I actually did, is check whether the text of “lastNameTextBox” is empty or not. If it’s not empty, it’s good to go. Then we’re checking the text of “firstNameTextBox”, and if it’s not empty 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 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 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 TextBlcok to show the date and time you’ll pick. The design is given here.
 
visual studio 2017
Figure 42
 
Designing code is given below. 
  1. <TextBlockHorizontalAlignmentTextBlockHorizontalAlignment="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"/>  
  2. <DatePickerx:NameDatePickerx:Name="datePicker"HorizontalAlignment="Left" Margin="10,54,0,0"Grid.Row="4"VerticalAlignment="Top" Width="100"Grid.ColumnSpan="2"/>  
  3. <TimePickerx:NameTimePickerx:Name="timePicker"HorizontalAlignment="Left" Margin="10,93,0,0"Grid.Row="4"VerticalAlignment="Top" Width="100"Grid.ColumnSpan="2"/>  
  4. <Buttonx:NameButtonx:Name="submitButton"Grid.Row="4" Content="Submit" Width="110" Click="submitButton_Click" Margin="10,131,0,202.333"/>  
  5. <TextBlockHorizontalAlignmentTextBlockHorizontalAlignment="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"/>  
  6. <TextBlockx:NameTextBlockx: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"/>  
  7. <TextBlockx:NameTextBlockx: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 18
 
And in the code behind, the C# code will be like this. 
  1. private void submitButton_Click(object sender, RoutedEventArgs e) {  
  2.  dateTextBlock.Text = datePicker.Date.ToString("D");  
  3.  timeTextBlock.Text = timePicker.Time.ToString("T");  
  4. }   
Listing 19
 
Here, in the Button event handler, we’ve used some methods to show 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 this,
 
visual studio 2017
Figure 43
 
and if you run the application, it’ll work just like this.
 
visual studio 2017
 
visual studio 2017
Figure 44
 

Working with Image Control

 
You can take an Image control from Toolbox or just write a simple code like that, and you have to take four RadioButtons. We’ve talk about RadioButton in our first part of this section Universal Windows Platform Part - 1. If you don’t familiar with RadioButton feel free to take a look of it. So, our design looks like this picture below.
 
visual studio 2017
Figure 45
 
Adding an Image to Our Project
 
Now we’ve to do a little bit of work before to go. We need to add an image to our project. Just right-click on the Solution Explorer and go to Add >> New Folder. Give it the name “Images”.
 
Now, right-click on the “Images” folder and go to Add >> Existing Item. Go to your destination directory to select your desired image. Select and add it.
 
Designing UI and Code Behind
 
Now, in the XAML code show the path of the image you’ve added in the Source property of Image control. The XAML code is given below. 
  1. <Grid>  
  2.     <Image x:Name="Image1"     
  3.     HorizontalAlignment="Left"     
  4.     Height="473"     
  5.     VerticalAlignment="Top"    
  6.     Width="380"     
  7.     Source="Images/sample.jpg"    
  8.     Stretch="None"     
  9.     Margin="10,10,0,0"/>  
  10.     <RadioButton x:Name="NoneButton"     
  11.                 Content="None"     
  12.                 HorizontalAlignment="Left"     
  13.                 VerticalAlignment="Top"     
  14.                 Checked="StretchModeButton_Checked"     
  15.                 Margin="10,488,0,0"/>  
  16.     <RadioButton x:Name="FillButton"     
  17.                 Content="Fill"     
  18.                 HorizontalAlignment="Left"     
  19.                 VerticalAlignment="Top"     
  20.                 Checked="StretchModeButton_Checked"     
  21.                 Margin="222,488,0,0"/>  
  22.     <RadioButton x:Name="UniformButton" Content="Uniform"     
  23.                 HorizontalAlignment="Left"     
  24.                 VerticalAlignment="Top"     
  25.                 Checked="StretchModeButton_Checked"     
  26.                 Margin="10,555,0,0"/>  
  27.     <RadioButton x:Name="UniformToFillButton"     
  28.                 Content="UniformToFill"     
  29.                 HorizontalAlignment="Left"     
  30.                 VerticalAlignment="Top"     
  31.                 Checked="StretchModeButton_Checked"     
  32.                 Margin="222,555,0,0"/>  
  33. </Grid>     
Listing 20
 
Here, we’ve shown the path full path of our image in line number seven. We will mainly show the four image Zooming property e.g., Fill, Uniform, Uniform to Fill and Normal (None). Our four RadioButton will handle this operation. C# code is given here. 
  1. private void StretchModeButton_Checked(object sender, RoutedEventArgs e) {  
  2.  RadioButton button = sender as RadioButton;  
  3.  if (Image1 != null) {  
  4.   switch (button.Name) {  
  5.    case "FillButton":  
  6.     Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Fill;  
  7.     break;  
  8.    case "NoneButton":  
  9.     Image1.Stretch = Windows.UI.Xaml.Media.Stretch.None;  
  10.     break;  
  11.    case "UniformButton":  
  12.     Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Uniform;  
  13.     break;  
  14.    case "UniformToFillButton":  
  15.     Image1.Stretch = Windows.UI.Xaml.Media.Stretch.UniformToFill;  
  16.     break;  
  17.    default:  
  18.     break;  
  19.   }  
  20.  }  
  21. }   
Listing 21
 
Here, we’ve applied a very simple logic, like Switch Case operation. We just call every RadioButton by their name like inline number eight, eleven, fourteen and seventeen, and call Windows Media Class. Image1 is our Image control’s name. It’s really small lines of codes but really helpful.
 
Running the Application
 
If you run the application, it’ll look exactly like this.
 
visual studio 2017
Figure: 46 Windows Phone
 
visual studio 2017
Figure: 47 Windows Platform.
 

Conclusion

 
In this article, we talked about how we download and install Visual Studio 2017, create our first application on UWP, run our app on Windows phone and local machine; we have talked about different Universal Windows Platform Controls as well.


Similar Articles