Universal windows platform visual studio

For this article, I am using Visual Studio 2017 Professional Version.

Картинка с сайта: www.c-sharpcorner.com

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.

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.

Figure 3: Visual Studio installation file loading

Click «Continue» on the above page to start the installation process of VS 2017.

Картинка с сайта: www.c-sharpcorner.com

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.

Картинка с сайта: www.c-sharpcorner.com

Figure 5: Visual Studio 2017 installation process

Here, for UWP app development, I have selected Universal Windows Platform development from the Windows workload.

Картинка с сайта: www.c-sharpcorner.com

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.

Картинка с сайта: www.c-sharpcorner.com

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.

Картинка с сайта: www.c-sharpcorner.com

Figure 8: Visual Studio installation

As the installation begins, you can see the above screen.

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.

Картинка с сайта: www.c-sharpcorner.com

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.

Картинка с сайта: www.c-sharpcorner.com

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.

Картинка с сайта: www.c-sharpcorner.com

Figure 12: Visual Studio 2017 to create new project

Картинка с сайта: www.c-sharpcorner.com

Figure 13: VS 17 project template for UWP

I have selected Windows 10 Anniversary Edition as a target version and Windows 10 as the minimum version.

Картинка с сайта: www.c-sharpcorner.com

Figure 14: Target and minimum version selection

Now, click on the mainpage.xaml from Solution Explorer to see the designer section on VS17.

Картинка с сайта: www.c-sharpcorner.com

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.

Картинка с сайта: www.c-sharpcorner.com

Figure 15: Running Universal Windows app on VS17

Картинка с сайта: www.c-sharpcorner.com

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.

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.

Картинка с сайта: www.c-sharpcorner.com

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.

Картинка с сайта: www.c-sharpcorner.com

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.

Figure 20: UWP app on Windows Phone emulator

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,

Figure 21

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»/>     

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>      

Now, the main Grid will look like this.

Figure 22

1. private void HyperlinkButton_1_Click(object sender, RoutedEventArgs e)    
2. {    
3.     HB_TextBlock.Text = «OK»;    
4. }     

Now, run the application and it will look like the picture below once you click on the hyperlink button.

Figure 23

So, our design will look like this.

Figure 24

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»/>      

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. }      

After you run your application, it’ll look exactly like this.

Figure 25

The design will look like this.

Figure 26

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»/>    

After you run your application, it’ll look exactly like this.

Figure 27

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.

Figure 28

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»/>  

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. }      

After you run your application, it’ll look exactly like this.

Figure 29

The design will look like this,

Figure 30

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»/>     

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. }   

If we run the application, it will look exactly like this,

Figure 31

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,

Figure 32

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»/>   

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. }  

If we run the application, it’ll look exactly like this.

Figure 33

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.

Картинка с сайта: www.c-sharpcorner.com

Figure 34

Now you’ve to select User Control and give it a name called “PopupPanel”.

Картинка с сайта: www.c-sharpcorner.com

Figure 35

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>    

Here, we’ve Border brush, StacPanel which will bound the TextBlocks and a Button. The design will look like this,

Figure 36

1. private void ClosePopup(object sender, RoutedEventArgs e) {  
2.  Popup hostPopup = this.Parent as Popup;  
3.  hostPopup.IsOpen = false;  
4. }   

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,

Figure 37

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»/>   

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();   

If we run the application, it’ll look exactly like this.

Figure 38

In the end, our full design will look like the picture below,

Figure 39

And if we run the complete application, it’ll look exactly like this.

Figure 40

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.

Figure 41

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»/>    

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. }   

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.

Figure 42

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»/>     

1. private void submitButton_Click(object sender, RoutedEventArgs e) {  
2.  dateTextBlock.Text = datePicker.Date.ToString(«D»);  
3.  timeTextBlock.Text = timePicker.Time.ToString(«T»);  
4. }   

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

Figure 43

and if you run the application, it’ll work just like this.

Figure 44

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.

Figure 45

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>     

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. }   

If you run the application, it’ll look exactly like this.

Figure: 46 Windows Phone

Картинка с сайта: www.c-sharpcorner.com

Figure: 47 Windows Platform.