SVG support and CompactOverlay mode in UWP applications

I want to demonstrate a few simple but interesting innovations that brought the Creators Update update for developers.

At the moment, in order to download and install the Creators Update SDK you need to be a Windows insider. The SDK of the assembly is now available at number 15063. You can find it on the developers page of the Windows Insider site.

In addition to the updated 10 and Creators Update SDK, you will also need Visual Studio 2017.

SVG support

SVG files can now be embedded into pages just like raster images.
An example of the introduction of the Windows icon:
')

<Image Source="ms-appx:///winsign.svg" Width="50" Height="50"></Image> 

In order to try, you can create a file with the SVG extension and the following content in a text editor by yourself:

 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Win_1" x="0px" y="0px" viewBox="0 0 299.35 299.35" style="enable-background:new 0 0 299.35 299.35;" xml:space="preserve" width="512px" height="512px"> <g> <path d="M125.707,28.43c-1.176-0.949-2.715-1.317-4.193-0.999L38.62,45.247c-2.304,0.495-3.949,2.532-3.949,4.888v83.487 c0,2.761,2.238,5,5,5h82.894c2.762,0,5-2.239,5-5V32.32C127.564,30.809,126.882,29.38,125.707,28.43z" fill="#006DF0"/> <path d="M259.679,160.728h-105c-2.762,0-5,2.239-5,5v106.055c0,2.357,1.646,4.393,3.949,4.888l105,22.567 c0.349,0.075,0.7,0.112,1.051,0.112c1.133,0,2.244-0.385,3.143-1.111c1.175-0.949,1.857-2.379,1.857-3.889V165.728 C264.679,162.967,262.441,160.728,259.679,160.728z" fill="#006DF0"/> <path d="M262.822,1.111c-1.176-0.949-2.714-1.317-4.193-0.999l-105,22.567c-2.304,0.495-3.949,2.532-3.949,4.888v106.055 c0,2.761,2.238,5,5,5h105c2.762,0,5-2.239,5-5V5C264.679,3.49,263.997,2.06,262.822,1.111z" fill="#006DF0"/> <path d="M122.564,160.728H39.671c-2.762,0-5,2.239-5,5v83.487c0,2.356,1.646,4.393,3.949,4.888l82.894,17.816 c0.348,0.075,0.7,0.112,1.051,0.112c1.133,0,2.244-0.385,3.143-1.111c1.175-0.949,1.857-2.378,1.857-3.889V165.728 C127.564,162.967,125.326,160.728,122.564,160.728z" fill="#006DF0"/> </g> </svg> 

The file must be added to the root folder of the project. SVG is a vector graphic and is scaled without loss of quality, which means that you can specify at least 50 or at least 500 in size.

CompactOverlay mode

This mode is very similar to the TV Picture-in-Picture. I do not know about you, but I often watch the video, but at the same time I am doing some other work at the same time. In Windows 8.1, there was a snap mode. In the first versions of Windows 10, many changes appeared, but there was no mode in which the window would always be on top of the others. In fact, CompactOverlay mode is the topmost mode for the application. In this mode, the application has restrictions on the size of the window. In particular, this mode was requested by the developers / users themselves on the User Voice page: UWP Windows Always On Top .

To try in action you can add a button

 <Button x:Name="btnCompactMode" Click="btnCompactMode_Click" Margin="0,10,0,0">Compact mode</Button> 

and the following processing code:

 private async void btnCompactMode_Click(object sender, RoutedEventArgs e) { if (ApplicationView.GetForCurrentView().ViewMode == ApplicationViewMode.Default) { await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.CompactOverlay); btnCompactMode.Content = "Default mode"; } else { await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.Default); btnCompactMode.Content = "Compact mode"; } } 

As a result, you can do some business at the same time and watch your application, which can be displayed, for example, a graph of the ratio of USD to EURO.



The window can be made as slightly less, and a little more, but you cannot stretch it on the floor of the screen.
You can set a specific size from the code using ViewModePreferences:

 ViewModePreferences compactOptions = ViewModePreferences.CreateDefault(ApplicationViewMode.CompactOverlay); compactOptions.CustomSize = new Windows.Foundation.Size(300, 200); bool modeSwitched = await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.Default, compactOptions); 

You can create a new application window and make it CompactOverlay:

 int compactViewId = 0; await CoreApplication.CreateNewView().Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { var frame = new Frame(); compactViewId = ApplicationView.GetForCurrentView().Id; frame.Navigate(typeof(CompactOverlayPage)); Window.Current.Content = frame; Window.Current.Activate(); ApplicationView.GetForCurrentView().Title = " CompactOverlay"; }); await ApplicationViewSwitcher.TryShowAsViewModeAsync(compactViewId, ApplicationViewMode.CompactOverlay); 

However, it was possible to create a new window before, but only in the usual mode:

 await ApplicationViewSwitcher.TryShowAsStandaloneAsync(compactViewId); 

Another couple of simple features

In addition to support for SVG and CompactOverlay, there is another unpretentious, but necessary opportunity to underline and cross out the text. It turns out that before it was impossible.

 <TextBlock TextDecorations="Strikethrough">bla-bla-bla</TextBlock> 

Also, you can now use Access Keys. These are shortcuts - shortcut keys that are used to speed up access to buttons.

Creating shortcut keys for quick access to window elements is fairly simple. Consider the example of buttons. Create two buttons. Assign one button access key A, and the second B.

 <Button AccessKey="A" Click="ButtonA_Click"> A</Button> <Button AccessKey="B" Click="ButtonB_Click"> B</Button> <TextBox Width="200" AccessKey="T" /> 

Now, after pressing Alt + A, the ButtonA_Click event will be triggered, and after pressing B, ButtonB_Click will be activated accordingly. By pressing Alt + T, the focus will be set to the input field.
Read more here: Access keys

This is not all the features that appeared with the release of the latest update. We are waiting for the final release of the SDK.

About other features you can try to read here: Windows Developer Day - Creators Update

A full list of new features is available here: What's New in Windows 10 for developers

Another interesting article about VS: Visual Studio 2017 Update Preview and Windows 10 Creators Update SDK