Fall Creators Update: Important for Programmer

Classic dotnet applications are good because they are practically unlimited in their rights and, for example, can work in the tray. But universal applications (UWP) are safer, and they can be installed and removed countless times without clogging up the system and registry. The UWP platform is constantly evolving, and as long as users update to Fall Creators Update, which was released in October of this year, we, the developers, can look at its new and interesting features.



Ready? Download the latest SDK from the official page and begin our introductory tour.
')
Note: we continue the series of publications of the full versions of articles from the magazine Hacker. Spelling and punctuation of the author saved.

First of all, I would like to note about the multiple improvements in the XAML designer. One of the most anticipated improvements for me is to increase the speed of work. Compare the download speed in Fall Creators Update (left) with the simple Creators Update:



At the Build 2017 conference, Microsoft announced a new design UI system called Fluent .



And starting from this update, new controls based on this system will start to appear in UWP.

Navigation View

This is out of box control to display the menu.



The menu drops out on the left side. In addition, the menu bar and top bar - Header. You can put some title text or some additional buttons on this bar.
The menu can be used in 3 different variations. The option displayed above is Minimal. In this mode, Header can not be hidden, since it is a button "hamburger". There is a Compact mode in which menu icons are displayed on the right.



In Expanded mode, the menu is displayed open.

By changing the size of your application window, you can change the Navigation View. After all, the system automatically selects the mode based on the size of the application window. You can influence this choice by specifying different pixel values ​​for the OpenPaneLength, CompactModeThresholdWidth, and ExpandedModeThresholdWidth attributes.

Sample navigation bar code:

<NavigationView x:Name="NavView" IsSettingsVisible="True" ItemInvoked="NavView_ItemInvoked"> <NavigationView.MenuItems> <NavigationViewItem Content=" " Tag="home"> <NavigationViewItem.Icon> <FontIcon Glyph=""/> </NavigationViewItem.Icon> </NavigationViewItem> <NavigationViewItemSeparator/> <NavigationViewItemHeader Content=" "/> <NavigationViewItem Icon="AllApps" Content="" Tag=""/> <NavigationViewItem Icon="AllApps" Content="" Tag=""/> <NavigationViewItem Icon="Video" Content="Color picker" Tag="color picker"/> <NavigationViewItem Icon="Audio" Content="Parallax" Tag="parallax"/> <NavigationViewItem Icon="Audio" Content=" " Tag=""/> </NavigationView.MenuItems> <NavigationView.HeaderTemplate> <DataTemplate> <Grid Background="LightGray"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBlock Style="{StaticResource TitleTextBlockStyle}" FontSize="28" VerticalAlignment="Center" Margin="12,0" Text=" Header"/> <CommandBar Grid.Column="1" HorizontalAlignment="Right" DefaultLabelPosition="Right"> <AppBarButton Label=" " Icon="Refresh"/> </CommandBar> </Grid> </DataTemplate> </NavigationView.HeaderTemplate> <NavigationView.PaneFooter> <Image Source="Assets/logo.png" Width="50" Height="50" /> </NavigationView.PaneFooter> <Frame x:Name="ContentFrame"> <Frame.ContentTransitions> <TransitionCollection> <NavigationThemeTransition/> </TransitionCollection> </Frame.ContentTransitions> </Frame> </NavigationView> 

Please note that it is possible to add down any arbitrary controls. In the example, a picture was added there (a cube above the Settings menu item). The Settings menu item itself is turned on and off using the IsSettingsVisible attribute.

In C # code in the NavView_ItemInvoked event, you can check whether the Settings button was pressed.

 if (args.IsSettingsInvoked) { ContentFrame.Navigate(typeof(SettingsPage)); } 

Or you can check the contents of args.InvokedItem, which contains the text of the clicked menu item. For example:

  if (args.InvokedItem==” ”) { ContentFrame.Navigate(typeof(HomePage)); } 

For more information, see the official documentation page .

Person Picture Control

A control that displays the avatar and user name / initials. Pretty simple control.



You can add it to the page using the following tag:

  <PersonPicture DisplayName="John Doe" Foreground="Black" ProfilePicture="Assets\johndoe.jpg" Initials="JD" /> 

It is recommended to use it to display the avatar of the current user or any contact.

Read more about it here .

Rating Control

With this control, too, everything should be clear.



You can add to the page with the following tag:

  <RatingControl x:Name="MyRatings" /> 

Official documentation here .

Color picker

Long-awaited control for color selection.



In the following example, when the color changes in the control, the background color automatically changes (a simple reference is used or, in other words, binding).

  <Grid> <Grid.Background> <SolidColorBrush Color="{x:Bind myColorPicker.Color, Mode=OneWay}"/> </Grid.Background> <ColorPicker x:Name="myColorPicker" /> </Grid> 

Official documentation

Parallax

Uneven movement of objects when scrolling allows you to create a parallax effect.



Suppose you have a Grid inside of which an element is placed, the contents of which does not fit on one page. And some image is added to the Grid background. In order for the parallax effect to appear, you need to wrap the image in the Parallax tag, specifying as a Source a link to very, very long content.

In the following example, a ListView named ForegroundElement does not fit on the screen. The background he set the image and scrolling will have a beautiful effect.

 <Grid> <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> <!--  --> <Image x:Name="BackgroundImage" Source="Assets/background.jpg" Stretch="UniformToFill"/> </ParallaxView> <ListView x:Name="ForegroundElement"> <x:String>Item 1</x:String> <x:String>Item 2</x:String> <x:String>Item 3</x:String> <x:String>Item 4</x:String> <x:String>Item 5</x:String> <x:String>Item 6</x:String> <x:String>Item 7</x:String> <x:String>Item 8</x:String> <x:String>Item 9</x:String> <x:String>Item 10</x:String> <x:String>Item 11</x:String> <x:String>Item 13</x:String> <x:String>Item 14</x:String> <x:String>Item 15</x:String> <x:String>Item 16</x:String> <x:String>Item 17</x:String> <x:String>Item 18</x:String> <x:String>Item 19</x:String> <x:String>Item 20</x:String> <x:String>Item 21</x:String> </ListView> </Grid> 

Read more in the Microsoft documentation .

Swipe

Another interesting control is SwipeControl. It is possible that you have met him before in any applications. It allows you to open a menu item with the help of the gesture of the same name. The gesture is the movement of a finger from left to right or vice versa. Look at the following screenshot and you will understand what you mean.

INFO

Reveal mode means that the hidden menu item will be displayed after the gesture. Alternatively, you can set the Execute mode, which immediately not only displays, but also performs the menu action.

The screenshot shows a ListView, having swept over an element with its finger, you can open a menu.
Let's analyze the code for this example. In order for it to work in the page resources you need to add the following code:

 <Page.Resources> <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete" /> <SwipeItems x:Key="ExecuteDelete" Mode="Reveal"> <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}" Invoked="SwipeDeleteItem_Invoked" /> </SwipeItems> </Page.Resources> 

In it, we create an icon with the recycle symbol and the “DeleteIcon” key. Next, create a Swipe menu item with the key “ExecuteDelete” and the newly created icon. Clicking on this menu item will trigger the SwipeDeleteItem_Invoked event.

Now consider the XAML code list:

  <ListView x:Name="sampleList" Width="400" Height="300"> <ListView.ItemTemplate> <DataTemplate x:DataType="x:String"> <SwipeControl RightItems="{StaticResource ExecuteDelete}"> <StackPanel Orientation="Vertical" Margin="5"> <TextBlock Text="{x:Bind}" FontSize="18"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." FontSize="12"/> </StackPanel> </StackPanel> </SwipeControl> </DataTemplate> </ListView.ItemTemplate> <ListView.Items> <x:String>Demo item 1</x:String> <x:String>Demo item 2</x:String> <x:String>Demo item 3</x:String> </ListView.Items> </ListView> 

As you can see, 3 items have been added to the ListView with the names “Demo item ..”. For simplicity, they are added directly to the list, but you can bind the ListView to any collection using bindings.

The list itself is assigned to a template that uses SwipeControl with the ExecuteDelete resource. The control will be displayed with a gesture from right to left as the RightItems attribute is used.

You can do without a ListView. For example:

  <SwipeControl Width="400" Height="75" RightItems="{StaticResource ExecuteDelete}"> <StackPanel Orientation="Vertical" Margin="5" Background="DarkGray"> <TextBlock Text="- " FontSize="18"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." FontSize="12"/> </StackPanel> </StackPanel> </SwipeControl> 

This way you can add a hidden menu displayed by a gesture to some element of your page.

Official documentation is here .

Acrylic Material

It is not even a control at all. This is a brush that is quite often used in interfaces. The Start Menu in Fall Creators Update is made of acrylic. This is what the standard Calculator application looks like with a background of acrylic material:



The XAML code for this brush might look something like this:

 <AcrylicBrush TintColor="#ED3462ED" TintOpacity="0.8" FallbackColor="#ADAFAFFF"/> 

For more information, visit microsoft.com .

Reveal

Again, it is not a control, but a certain light effect, which allows the user to pay attention to those objects that are in the focus of the cursor.



Some controls support reveal by default. These are ListView, GridView, TreeView, NavigationView, AutosuggestBox, MediaTransportControl, CommandBar, ComboBox.

And on some controls, this effect can be turned on by specifying a particular style. For example, this can be indicated by the button:

  <Button Content="Button Content" Style="{StaticResource ButtonRevealStyle}"/> 

Documentation

Another improvement in the XAML designer

Of course, the designer of Visual Studio allows you to display these controls and is optimized for their display. In the following image, you can see how the AcrylicBrush resource is displayed in the designer (Fall Creators Update again on the left).



You can read about improving the XAML designer in English with a bunch of technical details and clarifications here: A significant update to the XAML Designer .

.NET Standard 2.0

A big step forward is support for .NET Standard 2.0. But for it it is necessary that your project has a minimum version installed with a build version higher than 1627. But now it will be much easier to port the .NET Framework code of applications to UWP.

Autorun application

One of the most interesting features is the ability to run the application when the operating system starts. Previously, Desktop Bridge had such an opportunity, but UWP applications did not have it.

Configure the manifest. An application must use the version 5 namespace contract:

  xmlns:uap5="http://schemas.microsoft.com/appx/manifest/uap/windows10/5" 

And you need to register the windows.startupTask extension.

  <uap5:Extension Category="windows.startupTask" Executable="App1.exe" EntryPoint="App1.App"> <uap5:StartupTask TaskId="SomeIdThatIUseWithThisApp" Enabled="false" DisplayName="Name of Test App" /> </uap5:Extension> 

The manifest hierarchy is as follows: Package Applications Application Extensions <uap5:Extension>

You can register the autorun of the application using the following code:

  //    .     startupTask StartupTask startupTask = await StartupTask.GetAsync("SomeIdThatIUseWithThisApp"); switch (startupTask.State) { case StartupTaskState.Disabled: //          StartupTaskState newState = await startupTask.RequestEnableAsync(); //   newState          break; case StartupTaskState.DisabledByUser: //      .   ,        … break; case StartupTaskState.DisabledByPolicy: //         break; case StartupTaskState.Enabled: //    :) break; } 

This code requires the addition of the following namespace:

  using Windows.ApplicationModel; 

INFO

By default, after installing the application, autorun is disabled.

If your application supports autorun, you can overload the OnActivated method and get some parameters. Something like this:

  protected override void OnActivated(IActivatedEventArgs args) { Frame rootFrame = Window.Current.Content as Frame; if (rootFrame == null) { rootFrame = new Frame(); Window.Current.Content = rootFrame; } if (args.Kind == ActivationKind.StartupTask) { //       var startupArgs = args as StartupTaskActivatedEventArgs; } rootFrame.Navigate(typeof(MainPage)); Window.Current.Activate(); } 

You can read about this functionality in English here: Configure your app to start at log-in

Restart application

Another, as they say, “from the same series” functionality is the ability to restart the application. It is assumed that this may be necessary to restart the game / application after updating the license or installing some additional content.

One line restart is done:

  AppRestartFailureReason result = await CoreApplication.RequestRestartAsync("  - ,      "); 

And adding a namespace:

  using Windows.ApplicationModel.Core; 

The return value of the result variable can be one of the values ​​of APPRestartFailureReason : NotInForeground, RestartPending, Other

WARNING

The restarted application should be visible at the time of the restart.

It is still possible to restart the application in the context of another user using RequestRestartForUserAsync.

An example of a restarting application can be found at the following link Request Restart Sample .

English article here: How to Restart your App Programmatically .

Www

As a result of the fact that I tried everything in practice, I got a simple and fun application that uses the functionality listed in this article. You can view its code at the link: GitHub repository FallCreatorsApp .

In conclusion, I would like to note that not so long ago UWP-shny WinDbg was published.

Regular debuggers allow you to move only forward in code execution time. And this has a functionality called Time Travel Debugging (TTD), with which you can go back through the code execution process. Interestingly, the code can be executed on a specific machine (on the one on which the bug occurs) and the process of code execution can be recorded. A trace file will be created with a .RUN extension. This file can be played many times and analyzed.

Conclusion

I remind you that UWP applications are better than old-school .NET ovsky so that they are safer and can be installed / removed countless times without clogging up the system / registry with various garbage. Although the classical dotnet applications also have their advantages so far. They are almost unlimited rights. Or, for example, can work in the tray. But soon these advantages may appear in UWP.

We remind you that this is the full version of an article from Hacker magazine . Its author is Alexey Sommer .