Universal windows platform development workload

Join the Chocolatey Team on our regular monthly stream where we discuss all things Community, what we do, how you can get involved and answer your Chocolatey questions.

Join the Chocolatey Team on our regular monthly stream where we put a spotlight on the most recent Chocolatey product releases. You’ll have a chance to have your questions answered in a live Ask Me Anything format.

Sign up

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

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.

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.

Figure 5: Visual Studio 2017 installation process

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

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.

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.

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.

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.

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.

Figure 12: Visual Studio 2017 to create new project

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.

Figure 14: Target and minimum version selection

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

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.

Figure 15: Running Universal Windows app on VS17

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.

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.

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.

Figure 34

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

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

Figure: 47 Windows Platform.

Время на прочтение
7 мин

Количество просмотров 23K

Дорогие хабравчане!

Хотел бы попродробнее рассказать вам про одно из самых интересных на мой взгляд нововведений недавно прошедшей конференции Build 2014. Речь пойдет про одновременную разработку приложений для Windows 8 и Windows Phone, т.е. про универсальные приложения для платформы Windows.

Платформа Майкрософт покрывает широкий спектр устройств — от смартфонов и планшетов до настольных компьютеров и игровой приставки Xbox One, и вполне естественно, что разработчику хочется минимизировать усилия при создании приложений под все форм-факторы. На конкурирующих платформах существует огромная разница между настольными и мобильными приложениями (поскольку они работают под управлением различных операционных систем), при этом мобильные приложения, разработанные для смартфона, могут работать на планшетных устройствах, что зачастую приводит к неудовлетворенности пользователя из-за не очень качественного пользовательского интерфейса.

На данный момент Майкрософт вплотную подошел к тому, чтобы унифицировать все платформы (Windows Phone, Windows 8, Xbox One) с точки зрения API, и позволить программисту максимально использовать общий код при создании приложений, при этом сохранив возможность использования различного дизайна для различных форм-факторов. Подробнее про то, как это реализовано на текущий момент — читайте ниже.

Как раньше создавались приложения Windows + Phone

До сегодняшнего дня для создания приложений с общим кодом для Windows и Windows Phone приходилось использовать разделяемую переносимую библиотеку (portable library) для выделения общего кода, отвечающего за доступ к данным и бизнес-логику, и различные проекты для UI. Подробнее такой подход описан в специальном курсе на Microsoft Virtual Academy, или в этом посте на хабре. Также из-за разницы в API Windows 8 и Windows Phone приходилось часть кода делать платформенно-зависимым.

Универсальные приложения Windows

На конференции build были объявлены следующие нововведения:

• В новой версии Windows Phone 8.1 будут использоваться Windows RT API Это означает, что около 90% системных вызовов между Windows 8.1 и Windows Phone 8.1 будут общими. Кроме того, язык разметки XAML также был унифицирован между платформами. Иными словами, новые приложения Windows Phone 8.1 будут использовать Windows XAML, а не Silverlight. Если вам нужна совместимость, для Windows Phone по-прежнему можно будет разрабатывать с использованием Silverlight, в т.ч. используя новые возможности, но это тема для отдельной статьи.
• В Visual Studio 2013 Update 2 появится новый шаблон проекта для унифицированных приложений Windows. Этот шаблон создает различные проекты для Windows и Phone, и третий «разделяемый» проект, в котором размещается весь общий код. При этом разделяемый проект
  может содержать не только код, но и XAML-разметку, общие ресурсы, изображения и т.д. Этот проект не компилируется в отдельную библиотеку, а разделяется между двумя платформенными проектами на уровне текстового включения на этапе компиляции. Такой шаблон можно использовать для разработки на C#/XAML, C++/XAML или HTML/JS.
• Если вы хотите выделить часть платформенно-независимого кода в отдельную библиотеку, разделяемую между несколькими приложениями, то по-прежнему можно использовать переносимую библиотеку, в которую теперь можно включать также и XAML-разметку. Переносимые библиотеки можно использовать для разработки на C# или Visual Basic.
• Бинарной совместимости между платформами пока нет, т.е. приложения Windows 8 и Windows Phone по-прежнему будут распространяться через соответствующие магазины, и разработчику будет необходимо создать и загрузить в каждый из магазинов пакеты приложения (хотя теперь Windows Phone 8.1 будет использовать такой же формат .appx, что и Windows 8. Однако в магазинах Windows и Windows Phone будут использоваться единые идентификаторы приложений, что позволит реализовать сценарии единой покупки приложения для использования на всех платформах.
• Приложения для Xbox One в текущей версии Visual Studio Update 2 не так хорошо вписываются в общую историю, хотя на пленарном докладе было показано универсальное приложение Khan Academy с использованием Kinect, работающее на Xbox и Windows (да, Kinect v2 будет поддерживаться в приложениях магазина Windows, но это опять же тема для отдельной статьи). Разработка для Xbox One на текущий момент предполагается на HTML/JS/CSS и C++

Таким образом, теперь появилась удобная возможность для разработчиков создавать приложения под платформы Windows и Windows Phone, которые содержат значительное количество общего кода, с возможностью кастомизировать дизайн под разные платформы для максимизации удовлетворенности пользоваталя!

Universal Hello World

Рассмотрим небольшой пример создания универсального приложения. Структура проектов в Visual Studio 2013 Update 2 была изменена, и теперь в разделе Магазин Window доступны как приложения для Windows и Windows Phone, так и универсальные приложения и библиотеки.

Вновь создаваемое универсальное приложение будет расчитано на платформу Windows Phone 8.1 и Windows 8.1 Update. При этом в разделе приложений Windows Phone доступны шаблоны проектов Windows Phone, основанные на Silverlight, которые позволят создавать приложения для ранних версий платформы — но возможности универсальных приложений при этом использовать нельзя.

После создания пустого универсального приложения, мы получим следующую структуру, состоящую из трех проектов: по одному проекту на каждую платформу и общий разделяемый проект:

Обратите внимание:

• По умолчанию дизайн страничек (XAML) для платформ разнесен по разным проектам. Однако в простых случаях вы можете использовать общие XAML-файлы для всех платформ, если вы уверены, что ваш дизайн будет достаточно хорошо адаптироваться к разным разрешениям, от смартфона до десктопа. При этом многие встроенные элементы управления (например, GridView) умеют адаптироваться и изменять свой внешний вид в зависимости от платформы.
• Если у вас есть уже готовый проект Windows или Windows Phone, вы можете создать на его основе универсальное приложение, выбрав в контекстном меню проекта соответствующий пункт. При этом проект будет преобразован в такую же трех-проектную структуру, и вы сможете переносить файлы приложения в общий проект для их совместного использования.
• В разреляемый проект можно включать ссылки на библиотеки (References), при этом эти ссылки будут добавлены в оба проекта (мы видим, что в ссылках каждого из платформенных проектов присутствует Shared-ссылка). Если какие-то библиотеки доступны только для одной из платформ, то мы все равно можем использовать соответствующую функциональность в общем коде, окружая её директивами условной компиляции #ifdef. Visual Studio настолько удобна, что при этом будет работать Intellisense, предупреждая нас о том, что ссылка доступна только в одной из платформ.
• Если мы выносим XAML-код в общий проект, то в редакторе XAML доступен drop-down для переключения платформы, и мы можем визуально редактировать дизайн страницы как в режиме телефона, так и в режиме планшета/десктопа.

В большинстве случаев вы захотите разделять как можно больше кода между платформами, перенеся все, что возможно, в проект shared. В нашем случае мы можем перенести MainPage.xaml из одного из проектов в разделяемый проект, и удалить его в платформенных проектах, поскольку в нашем случае дизайн странички не будет отличаться от платформы к платформе:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Style="{StaticResource HeaderTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center">
            Hello, world!
        </TextBlock>
    </Grid>

Таким образом, мы получили универсальное приложение, код и дизайн которого полностью находятся в разделяемом проекте.

На пути к реальному приложению — Photo Viewer

Попробуем превратить наше приложение Hello World во что-то полезное — например, в просмотрщик лучших фотографий flickr. Flickr предоставляет RSS-поток фотографий, поэтому определить соответствующий источник данных сравнительно просто (для пущей простоты загрузка RSS сделана не-асинхронной, в реальных проектах так делать не надо):

public class Flickr
{

List<BitmapImage> list = new List<BitmapImage>();

public Flickr()
{
    var xdoc = XDocument.Load("http://api.flickr.com/services/feeds/photos_public.gne");
    XNamespace xn = "http://www.w3.org/2005/Atom";
    var res = from z in xdoc.Descendants(xn + "entry")
                let l =
                    (from x in z.Descendants(xn + "link")
                    where x.Attribute("rel").Value == "enclosure"
                    select x.Attribute("href").Value).FirstOrDefault()
                where (l!=null) && (l!="")
                select l;

    foreach (var x in res)
    {
        list.Add(new BitmapImage(new Uri(x)));
    }
}

public List<BitmapImage> Images
{
    get
    {
        return list;
    }
}

На основной страничке используем GridView, привязанный к этому источнику данных. Для того, чтобы на разных платформах фотографии были разного размера, используем ключ из ресурсного файла, определяющий требуемый размер фотографии.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView ItemsSource="{Binding Images}">
            <GridView.DataContext>
                <local:Flickr/>
            </GridView.DataContext>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Image Height="{StaticResource ImageSize}" Width="{StaticResource ImageSize}" Source="{Binding}"/>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>

Чтобы задать разные параметры в ресурсном файле, создадим в каждом из платформенных проектов свой ресурсный файл Resource.xaml следующего содержания:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalHello">

    <x:Double x:Key="ImageSize">150</x:Double>
    
</ResourceDictionary>

И в завершение нам надо подключить этот ресурсный файл в App.xaml (который находится в разделяемом проекте):

<Application ...>
    <Application.Resources>
        <ResourceDictionary Source="Resources.xaml"/>
    </Application.Resources>
</Application>

В результате мы получаем пару приложений для Windows 8 и Windows Phone, которые корректно отображают галерею изображений с учетом специфики платформы.

Полный исходный код приложения можно получить на github.

Мораль

Для создания новых приложений на платформе Windows 8 сейчас лучшим решением будет использовать универсальные приложения. Если у вас есть существующее приложение Windows 8, то его имеет смысл потихоньку конвертировать в универсальное приложение и портировать на Windows Phone 8.1. Существующее приложения Windows Phone 8 преобразовать в универсальное приложение сложнее (т.к. для ряда операций используются другие наборы API), об этом мы еще с вами поговорим. Наконец, универсальные приложения для Windows Phone требуют версии Windows Phone 8.1, поэтому на текущий момент, чтобы иметь достаточно широкую install base, имеет смысл использовать приложения Silvelight 8.0

Материалы

Доклады build по теме:

• Построение универсальных приложений Windows с помощью Visual Studio
• Пленарный доклад 1 дня конференции build
• Разработка приложений с использованием XAML для двух платформ

Скачать Visual Studio 2013 Update 2 RC