In the last post I showed how to use Xaml Islands to modernize your .NET app. As you could see, there are a lot of steps and the procedure is a little clumsy. But now it’s getting better, Microsoft has introduced WinUI 3 and, with that, things are getting better: you don’t need special components to add your WinUI code, you can use the WinUI components directly in you app. But there is a pitfall – right now, when I’m writing this article (end of 2020), Win UI 3 is still in preview and you need the preview version of Visual Studio to use it. You can install the preview version side-by-side with the production version, there is no problem with that. You can download the preview version from here. Once you download and install the preview version of Visual Studio, you need to download the WinUI3 templates to create new apps. This is done by installing the VSIX package from here. Now we are ready to modernize our app from the last post with WinUI3. In Visual Studio Preview, create a new app. We’ll create a new blank, packaged desktop app:\

clip_image002

When you create that app, Visual Studio will create a solution with two projects: a WPF app and a package app that will create a MSIX package that will allow your program to run in a sandbox and to send it to Windows Store:

clip_image003

If you run the application right now, the package will install the app, with a button in the center of the window, that will change its text when clicked. We’ll change the app to show our photos. The first step is to add the Newtonsoft.Json NuGet package. The MVVM Light package wasn’t ported to .NET 5.0, so we’ll use the MVVM framework from the Community toolkit (https://github.com/windows-toolkit/MVVM-Samples). In the NuGet package manager, install the Micosoft.Toolkit.MVVM package. Once you installed these packages, you can copy the Converters, Model, Photos and ViewModels paths from the WPFXamlIslands project from my Github. If you build the application, you will see some errors. Some of them are due to the conversion to WinUI3 and other ones are due to the use of the new MVVM Framework. Let’s begin converting the files for the framework. The MVVM Toolkit doesn’t have the ViewModelBase class, but has the similar ObservableObject. In MainViewModel.cs, changed the base class of the viewmodel to ObservableObject:

public class MainViewModel : ObservableObject

Then, we must change the IoC container that is used in MVVM Light to the one used in the MVVM toolkit. For that, you must add this code in App.xaml.cs:

/// <summary> 
/// Gets the current <see cref="App"/> instance in use 
/// </summary> 
public new static App Current => (App)Application.Current; 

/// <summary> 
/// Gets the <see cref="IServiceProvider"/> instance to resolve application services. 
/// </summary> 
public IServiceProvider Services { get; } 

/// <summary> 
/// Configures the services for the application. 
/// </summary> 
private static IServiceProvider ConfigureServices() 
{ 
  var services = new ServiceCollection(); 
  services.AddSingleton<MainViewModel>(); 
return services.BuildServiceProvider(); 
}

This code will configure the service collection, adding the instantiation of MainViewModel as a singleton, when required and will configure the service provider. We should call the ConfigureServices method in the constructor, like this:

public App() 
{
  Services = ConfigureServices();
  this.InitializeComponent();
  this.Suspending += OnSuspending; 
}

Now, we can get a reference to the ViewModel, when we need it, as the DataContext for the view. In MainWindow.xaml.cs, when you try to set the DataContext like this, you get an error, saying that DataContext is not defined:

public MainWindow()
{
    this.InitializeComponent();
    DataContext = App.Current.Services.GetService(typeof(MainViewModel));
}

That’s because the Window in WinUI isn’t a UIElement and thus, doesn’t have a DataContext. There are two workarounds to this issue:

  • Use x:Bind, that doesn’t need a DataContext for data binding
  • Set the DataContext to the main element of the window

So, we’ll choose the second option and initialize the DataContext with this code:

public MainWindow()
{
    this.InitializeComponent();
    MainGrid.DataContext = App.Current.Services.GetService(typeof(MainViewModel));
}

The next step is to remove the ViewModelLocator, as it won’t be needed. One other error is in the converter. The namespaces in the WinUI have changed, and we must change them to use the code. System.Windows.Data has changed to Microsoft.UI.Xaml.Data and System.Windows.Media.Imaging has changed to Microsoft.UI.Xaml.Media.Imaging (as you can see, there was a change from System.Windows to Microsoft.UI.Xaml).

Besides that, in WinUI, the interface IValueConverter is implemented, but the signatures of Convert and ConvertBack are different, so we have to change the signature of the methods (the code remains unchanged):

public object Convert(object value, Type targetType, object parameter, string language)
{
    string imagePath = $"{AppDomain.CurrentDomain.BaseDirectory}Photos\\{value}.jpg";
    BitmapImage bitmapImage = !string.IsNullOrWhiteSpace(value?.ToString()) &&
                              File.Exists(imagePath) ?
        new BitmapImage(new Uri(imagePath)) :
        null;
    return bitmapImage;
}

public object ConvertBack(object value, Type targetType, object parameter, string language)
{
    throw new NotImplementedException();
}

Now we can add the FlipView to the main window. In this case, we don’t need any component nor setup in the code behind – all the code is in MainWindow.xaml:

<Grid x:Name="MainGrid">
 <FlipView ItemsSource="{Binding Photos}">
   <FlipView.ItemTemplate>
     <DataTemplate>
       <Grid Margin="5">
         <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="40" />
         </Grid.RowDefinitions>
         <Image Source="{Binding PhotoUrl}" Grid.Row="0" Margin="5"
             Stretch="Uniform" />
         <TextBlock Text="{Binding UserName}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"/>
       </Grid>
     </DataTemplate>
   </FlipView.ItemTemplate>
 </FlipView>
</Grid>

With that, we can run the program and we get another error:

clip_image005

We get a DirectoryNotFoundException because of the package. When we are using the package, the current directory has changed and it’s not the install folder anymore, so we have to point to the full path. This is done with a code like this:

public MainViewModel()
{
    var fileName = $"{AppDomain.CurrentDomain.BaseDirectory}Photos\\__credits.json";
    Photos = JsonConvert.DeserializeObject&lt;Dictionary&lt;string, PhotoData&gt;&gt;(
        File.ReadAllText(fileName),
        new JsonSerializerSettings
        {
            ContractResolver = new DefaultContractResolver
            {
                NamingStrategy = new SnakeCaseNamingStrategy()
            }
        }).Select(p =&gt; new PhotoData() { PhotoUrl = $".\\Photos\\{p.Key}.jpg", UserName = p.Value.UserName });
}

Now, when you run the app, it should run ok, but I got a C++ exception:

clip_image007

In this case, I just unchecked the “Break when this exception is thrown” box and everything worked fine:

clip_image009

We now have our app modernized with WinUI3 components, there is no need to add a new component to interface, like XamlIslands and everything works as a single program. There were some things to update, like components that weren’t ported to .NET 5, new namespaces and some issues with the path, but the changes were pretty seamless. WinUI3 is still in preview and there will surely be changes before it goes to production, but you can have a glance of what is coming and how you can modernize your apps with WinUI 3.

All the code for this article is at https://github.com/bsonnino/WinUiViewer

You have an app developed a long time ago and it’s showing its age. It’s time to modernize it, but rewrite isn’t an option: it’s too complicated to rewrite it and it’s still working fine, there is no budget for rewriting the app, there are other priorities, and so on.

If the main reason for not rewriting the app is that it’s working fine, and the only thing that is showing its age is the UI, you have no reason to not modernize it. Microsoft sent the developers a clear message that WPF, Winforms and Win32 are alive and well, open sourcing them and porting to .NET Core. And, the best thing is that you can use the newest features in the Operating System and integrate them to your app without the need to rewrite it. You can even use the new UI of UWP apps in your own app, by using the technology named XamlIslands, where you can embed your own controls in your old app.

To show how this is done, we’ll create a WPF app that shows images and modernize it with Xaml Islands. For this app, I’ve dowloaded 30 images from http://unsample.net/ . This service sends me a zip file with a maximum of 30 photos, downloaded from https://unsplash.com, with a Json file with the credits. Our apps will show the photos and the credits.

Initially, go to http://unsample.net/ and download a set of 30 photos. In Visual Studio, create a new WPF app and name it WPFXamlIslands. In the Solution Explorer, create a new folder named Photos in the project and add the photos and the Json file from the zip to it. Select all files in the folder and change the Build Action to None and the Copy to Output Directory to Copy if Newer.

As we will be manipulating Json files, right-click on the References node and select Manage NuGet Packages, then install the Newtonsoft.Json package. After that, install the MVVM Light package, as we will be using MVVM for this project. You will have to remove the Microsoft.Practices.ServiceLocation using clause in the ViewModelLocator class and add the CommonServiceLocator using clause in the same file to make it compile.

Then, in MainWindow.xaml file, add this code:

<Window x:Class="WPFXamlIslands.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:c="clr-namespace:WPFXamlIslands.Converters"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        DataContext="{Binding Source={StaticResource Locator}, Path=Main}">
    <Window.Resources>
        <c:StringToImageConverter x:Key="StringToImageConverter" />
    </Window.Resources>
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Disabled">
            <ItemsControl ItemsSource="{Binding Photos}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Black" Background="Beige"  BorderThickness="1" Margin="5">
                            <StackPanel Margin="5">
                                <Image Source="{Binding Key, Converter={StaticResource StringToImageConverter}}" 
                                       Width="150" Height="150" Stretch="Uniform" />
                                <TextBlock Text="{Binding Value.UserName}" MaxWidth="150" Margin="0,5" />
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>

We’ve added a ItemsControl with a datatemplate to show the images and the name of the author. The items are presented in a WrapGrid, so the items are wrapped and the number of items change depending on the window width. To present the images, I’ve created a converter to convert the name of the image to a bitmap that can be assigned to the image:

public class StringToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string imagePath = $"{AppDomain.CurrentDomain.BaseDirectory}Photos\\{value}.jpg";
        BitmapImage bitmapImage = !string.IsNullOrWhiteSpace(value?.ToString()) &&
            File.Exists(imagePath) ?
            new BitmapImage(new Uri(imagePath)) :
            null;
        return bitmapImage;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

It will take the name of the image and create a BitmapImage with it. That way, we can use the converter in the data binding for the list items. The MainViewModel will be like this:

public class MainViewModel : ViewModelBase
{
    /// <summary>
    /// Initializes a new instance of the MainViewModel class.
    /// </summary>
    public MainViewModel()
    {
        Photos = JsonConvert.DeserializeObject<Dictionary<string, PhotoData>>(
            File.ReadAllText("Photos\\__credits.json"),
            new JsonSerializerSettings
            {
                ContractResolver = new DefaultContractResolver
                {
                    NamingStrategy = new SnakeCaseNamingStrategy()
                }
            });
    }

    public Dictionary<string, PhotoData> Photos { get; private set; }

It will read the files, deserialize the Json file and assign the resulting Dictionary to the property Photos. This dictionary has the name of the file as the key and a class named PhotoData as the value. PhotoData is declared as:

public class PhotoData
{
    public string UserName { get; set; }
    public string UserUrl { get; set; }
    public string PhotoUrl { get; set; }
}

Now, when you run the application, it will show something like this:

The app runs fine, but it can be improved to add the new features and animations given by UWP, using the Xaml Islands.

The easiest way to use a UWP control in a WPF or Winforms app is to use the Windows Community Toolkit. This is a toolkit of components created by the community and Microsoft and can be found on https://github.com/windows-toolkit/WindowsCommunityToolkit.

To use a UWP control, you must use the WindowsXamlHost  control in the window. It can be found in the Microsoft.Toolkit.WPF.UI.XamlHost  NuGet package. Install it and add a WindowsXamlHost control in the main window:

<Grid>
    <xaml:WindowsXamlHost x:Name="UwpButton" 
                          InitialTypeName="Windows.UI.Xaml.Controls.Button"
                          ChildChanged="UwpButton_ChildChanged" />
</Grid>

In the code behind, you must add the code to initialize the button in the event handler for ChildChanged:

private void UwpButton_ChildChanged(object sender, EventArgs e)
{
    WindowsXamlHost windowsXamlHost = (WindowsXamlHost)sender;

    Windows.UI.Xaml.Controls.Button button =
        (Windows.UI.Xaml.Controls.Button)windowsXamlHost.Child;
    if (button == null)
        return;
    button.Width = 100;
    button.Height = 40;
    button.Content = "UWP button";
    button.Click += Button_Click;
}

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    MessageBox.Show("UWP button works");
}

The ChildChanged is called when the child in the XamlHost changes. There you must configure the control added as a child (with the use of the InitialTypeName property).

That should be everything, but when you see the code, you see that the Button is not defined. In the error window, there is a warning saying that that Windows.Foundation.UniversalApiContract is missing. My first try was to find a dll with this name, which couldn’t be found. Then I noticed that what was needed was not the dll, but a winmd file with the Windows Metadata for the controls. In fact, there is a Windows.Foundation.UniversalApiContract.winmd file located in C:\Program Files (x86)\Windows Kits\10\References\10.0.18362.0\Windows.Foundation.UniversalApiContract\8.0.0.0\ (the version in your system might change), and I added this file as a reference and the errors regarding the button disappeared.

Then I ran the project and got a Catatstrophic Failure (this one is nice – I was expecting my computer to melt down, but fortunately, that didn’t occur :-)). After some more research, I came to this article (yes, Microsoft also suffers with Catastrophic Failures :-)), and the answer was pretty simple: add an Application Manifest. In the Solution Explorer, add an Application Manifest and change it like this:

<compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
  <application>
    <!-- A list of the Windows versions that this application has been tested on
         and is designed to work with. Uncomment the appropriate elements
         and Windows will automatically select the most compatible environment. -->

    <!-- Windows Vista -->
    <!--<supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}" />-->

    <!-- Windows 7 -->
    <!--<supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}" />-->

    <!-- Windows 8 -->
    <!--<supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}" />-->

    <!-- Windows 8.1 -->
    <!--<supportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}" />-->

    <!-- Windows 10 -->
    <maxversiontested Id="10.0.18358.0"/>0
    <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />

  </application>
</compatibility>

That will set the MaxVersionTested and the error disappears. When you run the application, you will have something like this:

Now we can see that our program works with the UWP control, then let’s continue to modernize it. We will add a FlipView to show the images. For that, we must change the InitialTypeName of the WindowsXamlHost to show the FlipView:

<xaml:WindowsXamlHost x:Name="XamlHost" 
                      InitialTypeName="Windows.UI.Xaml.Controls.FlipView" 
                      ChildChanged="XamlHost_ChildChanged" />

The code for the ChildChanged event will configure the FlipView and its DataTemplate:

        private void XamlHost_ChildChanged(object sender, EventArgs e)
        {
            WindowsXamlHost windowsXamlHost = (WindowsXamlHost)sender;

            Windows.UI.Xaml.Controls.FlipView flipView =
                (Windows.UI.Xaml.Controls.FlipView)windowsXamlHost.Child;
            if (flipView == null)
                return;
            var dataTemplate = (Windows.UI.Xaml.DataTemplate)XamlReader.Load(@"
<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
  <Grid Margin=""5"">
      <Grid.RowDefinitions>
         <RowDefinition Height=""*"" />
         <RowDefinition Height=""40"" />
      </Grid.RowDefinitions>
      <Image Source=""{Binding PhotoUrl}"" Grid.Row=""0"" Margin=""5""
            Stretch=""Uniform"" />
      <TextBlock Text=""{Binding UserName}"" HorizontalAlignment=""Center""
            VerticalAlignment=""Center"" Grid.Row=""1""/>
  </Grid>
</DataTemplate>");
            
            flipView.ItemTemplate = dataTemplate;
            flipView.ItemsSource = ((MainViewModel)DataContext).Photos;
        }

We create the DataTemplate as a string and load it with XamlReader.Read, then set the ItemsSource to the Photos property of the ViewModel. In order to use it in a UWP control, we modified the obtention of the Photos property:

public class MainViewModel : ViewModelBase
{
    /// <summary>
    /// Initializes a new instance of the MainViewModel class.
    /// </summary>
    public MainViewModel()
    {
        Photos = JsonConvert.DeserializeObject<Dictionary<string, PhotoData>>(
            File.ReadAllText("Photos\\__credits.json"),
            new JsonSerializerSettings
            {
                ContractResolver = new DefaultContractResolver
                {
                    NamingStrategy = new SnakeCaseNamingStrategy()
                }
            }).Select(p => new PhotoData() {PhotoUrl = $".\\Photos\\{p.Key}.jpg", UserName = p.Value.UserName});
    }

    public IEnumerable<PhotoData> Photos { get; private set; }

}

With these changes, you can now run the program and see the photos in a FlipView:

Conclusion

As you can see, you can modernize your desktop application with UWP controls, using Xaml Islands. The WindowsXamlHost eases this work a lot, but the work is still clumsy: you must add the winmd file, add the manifest to the project and manipulate the UWP control in code, using the Windows.UI.Xaml namespace. Adding a DataTemplate to the FlipView requires parsing Xaml code that comes from a string. Not a simple task, but still feasible. Hopefully, things will be easier with Project Reunion and WinUI 3.

All the source code for this article is available at https://github.com/bsonnino/WPFXamlIslands

Once upon a time, in the old days, when WPF was a little new baby and people needed a tool to fiddle around with the new design language, Microsoft released a tool named XAMLPad, and things were all good: you didn’t need Visual Studio to try your designs, you could learn XAML without having to start a new project and you could try as much as you wanted, the UI changed as you changed the XAML code.

Then, time has passed. WPF is old news, many new XAML platforms appeared and XAMLPad faded out and all that remained from it was an old page.

Although it was not there, the need remained: how to do quick tests on your XAML? How to do them for the new platforms, like UWP? Then, a Microsoft Engineer decided to revive this and XAML Studio was born.

XAML Studio is a UWP app that allows you to fiddle with the XAML code in UWP and even debug the bindings! You can get the app from the Windows Store and install it in your machine for free.

Once you install and open it, you will get a window like this:

The app has a tabbed interface and you can create a new page and start typing your code. When you create a new page, a new tab will open, like this one:

You can start changing things immediately and the changes will reflect on the top pane. For example, if you change the color of the first run of text to Navy, the top pane will reflect that. If  you make a typing mistake, a pink box will be shown in the top pane, indicating the compilation error:

The last icon in the navigation bar is the toolbox. When you select it, you will have all available components to insert in your code. You can filter the items you want by typing in the search box at the top:

In this post, I’ve shown how to use the NavigationView in UWP. With XAML Studio, we don’t need to use Visual Studio to test the code, we can just type it in the code window and the UI will be shown in the top pane. If you type something like:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" xmlns:winui="using:Microsoft.UI.Xaml.Controls">
  <winui:NavigationView >
    <winui:NavigationView.MenuItems>
      <winui:NavigationViewItem Content="Main" Icon="Home" />
    </winui:NavigationView.MenuItems>
    <Grid Padding="40">
      <TextBlock>
        <Run FontSize="24" Foreground="Navy">Get Started with XAML Studio</Run><LineBreak/>
        <Run> Modify this text below to see a live preview.</Run>
      </TextBlock>
    </Grid>
  </winui:NavigationView>
</Page>

You will get something like this:

You can even use controls from Telerik or from the Microsoft Community Toolkit. For example, if you want to add a Radial Gauge to your UI, you can use something like this:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" xmlns:winui="using:Microsoft.UI.Xaml.Controls" 
  xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
  <winui:NavigationView >
    <winui:NavigationView.MenuItems>
      <winui:NavigationViewItem Content="Main" Icon="Home" />
    </winui:NavigationView.MenuItems>
    <Grid Padding="40">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <TextBlock>
        <Run FontSize="24" Foreground="Navy">Get Started with XAML Studio</Run><LineBreak/>
        <Run> Modify this text below to see a live preview.</Run>
      </TextBlock>
      <controls:RadialGauge Value="25" Unit="mph" NeedleBrush="Red"
                                  TrailBrush="Green"
                                  Grid.Row="1" Width="200" 
                                  Height="200" Foreground="Green"/>
    </Grid>
  </winui:NavigationView>
</Page>

One thing very interesting that can be done is to use data bindings in your code. You can create a Json Data Source or use a remote data source to bind to your data. For example, if you go to the second icon (Data Source) and add something like this:

{
  'Title' : 'Using XAML Studio',
  'Subtitle' : 'By Bruno Sonnino',
  'GaugeValue' : 35,
  'GaugeUnit' : 'km/h',
  'GaugeNeedle' : 'DarkGreen'
}

You can bind to your code with something like this:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" xmlns:winui="using:Microsoft.UI.Xaml.Controls" 
  xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
  <winui:NavigationView >
    <winui:NavigationView.MenuItems>
      <winui:NavigationViewItem Content="Main" Icon="Home" />
    </winui:NavigationView.MenuItems>
    <Grid Padding="40">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <TextBlock>
        <Run FontSize="24" Foreground="Navy" Text="{Binding Title}"/><LineBreak/>
        <Run Text="{Binding Subtitle}"/>
      </TextBlock>
      <controls:RadialGauge Value="{Binding GaugeValue}" Unit="{Binding GaugeUnit}" 
                                  NeedleBrush="{Binding GaugeNeedle}"
                                  TrailBrush="Green"
                                  Grid.Row="1" Width="200" 
                                  Height="200" Foreground="Green"/>
    </Grid>
  </winui:NavigationView>
</Page>

You can also bind to a remote data source, using an URL to a JSON service. For example, we can bind to the European Currency Exchange service to get the quotes of the currencies against the Euro. Just go to the Data Source option and select the Remote Data Source and enter this URL:

https://api.exchangeratesapi.io/latest

Then you can show the values for the currencies in a DataGrid with this code:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
  <Grid Padding="40">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" Margin="0,10">
      <TextBlock Text="Base" Margin="5,0"/>
      <TextBlock Text="{Binding base}" Margin="5,0"/>
      <TextBlock Text="Date" Margin="5,0"/>
      <TextBlock Text="{Binding date}" Margin="5,0"/>
    </StackPanel>
    <controls:DataGrid ItemsSource="{Binding rates}" Grid.Row="1"/>
  </Grid>
</Page>

One nice feature is that you can debug your bindings. In the code window, you can notice a green background in the bindings. If you hover the mouse in the binding, it will show you the current value:

When you go to the third menu item (Debug Bindings), you can even get more information, like the history for the binding or the values for all bindings at once:

Conclusions

As you can see XAML Studio has a lot of features for who wants to try some XAML code or even learn XAML. You don’t need to fire Visual Studio to test your XAML code and see what happens if you change something. It’s still a work in progress and has a lot of room for improvement, but with no doubt it’s a very nice tool to have in your toolbox.

In the a previous post, I’ve told that you should use controls that are responsive to ease your work of creating an UI that adapts to the screen size. One of the controls that can help you a lot in this task is the Navigation View. In fact, if you do nothing and create something like:

<Grid>
    <NavigationView/>
</Grid>

You will have a full featured UI with a navigation pane, a content pane and a settings button:

And this UI adapts itself to the screen size. If you resize your screen to decrease its height, the navigation pane will collapse and, if you decrease a little more, it will collapse, remaining only the Hamburger and Back buttons:

This is a great bonus for you: you don’t need to worry about adapting to the device – the control does that automatically for you. In this article, I will show you how to use the Navigation View to show your content and navigate between pages.

Adding Navigation Items

To add navigation items, you should use its MenuItems property. There you can add simple items (NavigationItem), separators (NavigationItemSeparator) and headers (MenuItemHeader). For example, when you use this code:

<Grid>
    <NavigationView>
        <NavigationView.MenuItems>
            <NavigationViewItemHeader Content="Main"/>
            <NavigationViewItem Content="Customers"/>
            <NavigationViewItem Content="Orders"/>
            <NavigationViewItemSeparator/>
            <NavigationViewItemHeader Content="Reports"/>
            <NavigationViewItem Content="Customers"/>
            <NavigationViewItem Content="Orders"/>
            <NavigationViewItem Content="Sales"/>
            <NavigationViewItemSeparator/>
            <NavigationViewItemHeader Content="Charts"/>
            <NavigationViewItem Content="Sales by Customer"/>
            <NavigationViewItem Content="Sales by Product"/>
            <NavigationViewItem Content="Sales by Date"/>
        </NavigationView.MenuItems>
    </NavigationView>
</Grid>

You will get this UI:

Although it seems good when the navigation pane is open, when it’s closed, it doesn’t work so well:

You need to add an icon to the items. This is done with the Icon property. You can set it directly using an enumeration for the symbol (see all enumerations here) or you can set the icon from an image. If you want to set a symbol form the Segoe MDL2 Assets font, you can use a FontIcon. This code shows how this is done:

<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItemHeader Content="Main" />
        <NavigationViewItem Content="Customers" Icon="People"/>
        <NavigationViewItem Content="Orders" Icon="Shop"/>
        <NavigationViewItemSeparator/>
        <NavigationViewItemHeader Content="Reports"/>
        <NavigationViewItem Content="Customers" >
            <NavigationViewItem.Icon>
                <FontIcon Glyph="" FontFamily="Segoe UI Symbol"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Orders">
            <NavigationViewItem.Icon>
                <FontIcon Glyph="" FontFamily="Segoe UI Symbol"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Sales">
            <NavigationViewItem.Icon>
                <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" 
                          Data="M 0,0 L20,0 40,70 140,70 140,74 36,74 20,4z 
                          M25,12 L150,12 140,50 37,55z 
                          M70,82 A10,10 360 1 1 70,81.99z 
                          M120,82 A10,10 360 1 1 120,81.99z" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItemSeparator/>
        <NavigationViewItemHeader Content="Charts"/>
        <NavigationViewItem Content="Sales by Customer">
            <NavigationViewItem.Icon>
                <FontIcon Glyph=""/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Sales by Product">
            <NavigationViewItem.Icon>
                <PathIcon Data="M0,0 L1.25,0 1.25,18 18,18 18,19.25 0,19.25z
                          M0,18 L18,0 19.25,0 19.25,1.25z" />
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="Sales by Date" >
            <NavigationViewItem.Icon>
                <FontIcon Glyph=""/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
    </NavigationView.MenuItems>
</NavigationView>

In the code above, there are some different ways to set the icon to the item:

  • The Customers and Orders items use the named icons from the MDL2 Assets
  • The Customers and Orders reports use font glyphs from the Segoe UI Symbol font. The Glyph property is the unicode number of the glyph
  • The Sales report doesn’t have a FontIcon, but a PathIcon, that has a Data property that creates the icon as a geometry
  • The Sales by Customers chart uses a glyph from the MDL2 Assets, but uses the unicode number of the gliph. In this case, you don’t need the FontFamily property

This code shows something like this:

Navigating between pages

When you are using this control, two events are key for the navigation: ItemInvoked  and SelectionChanged. ItemInvoked is called when an item is selected by a user interaction (tap, pointer, mouse), and it can be called even if the item is already selected. SelectionChanged is only called if the current item has effectively changed and can be triggered programatically (in this case, ItemInvoked is not called). In the handler, you have to find out which is the item selected and take the according action, usually changing the content of the control. This code shows how to handle this:

private NavigationViewItem _lastItem;

private void NavigationView_OnItemInvoked(
    Windows.UI.Xaml.Controls.NavigationView sender, 
    NavigationViewItemInvokedEventArgs args)
{
    var item = args.InvokedItemContainer as NavigationViewItem;
    if (item == null)
    {
        NavView.Content = null;
        return;
    }
    if (item == _lastItem)
        return;
    var textSelected = item.Content?.ToString() ?? "";
    NavView.Header = textSelected;
    var grid = new Grid();
    var text = new TextBlock
    {
        Text = textSelected,
        FontFamily = new FontFamily("Arial"),
        FontSize = 24,
        HorizontalAlignment = HorizontalAlignment.Center,
        VerticalAlignment = VerticalAlignment.Center
    };
    grid.Children.Add(text);
    NavView.Content = grid;
    _lastItem = item;
}

We are checking the selected item, if it is a different one, we create a grid with a textblock that shows the text of the selected option and set it as the content for the NavigationView. This works fine, but there is more that can be done here: we can also handle the back button and act if it’s clicked (until now it’s been disabled. If you don’t want to show it, just set the IsBackButtonVisible property to False).

Managing content and navigation

We could manage the content and navigation by ourselves. In this case, we would need a navigation mechanism, that handles the back navigation and replaces the content in the NavigationView. But we can do it by adding a single control: the Frame. It can control the back navigation and even replace the content with a transition. This can be done with something like this:

<NavigationView x:Name="NavView" 
                ItemInvoked="NavigationView_OnItemInvoked"
                BackRequested="NavView_OnBackRequested"
                IsBackEnabled="{Binding ElementName=ContentFrame, Path=CanGoBack}">
....
    <Frame x:Name="ContentFrame" 
           NavigationFailed="ContentFrame_OnNavigationFailed"/>
</NavigationView>

The IsBackEnabled property of the NavigationView is bound to the CanGoBack property of the frame. In the previous version of the code, I’ve used the title of the navigation item, but I think this option is less than optimal, because if we change the title, the code breaks. In this case, I think it’s better to use the Tag property, a property that can store any object. In our case, we will store an unique string that will point to the view, so we can navigate to it. Our code will be something like this:

<NavigationView.MenuItems>
    <NavigationViewItemHeader Content="Main" />
    <NavigationViewItem Content="Customers" Icon="People" Tag="CustView"/>
    <NavigationViewItem Content="Orders" Icon="Shop" Tag="OrderView"/>
    <NavigationViewItemSeparator/>
    <NavigationViewItemHeader Content="Reports"/>
    <NavigationViewItem Content="Customers" Tag="CustRepoView">
        <NavigationViewItem.Icon>
            <FontIcon Glyph="" FontFamily="Segoe UI Symbol"/>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
    <NavigationViewItem Content="Orders" Tag="OrderRepoView">
        <NavigationViewItem.Icon>
            <FontIcon Glyph="" FontFamily="Segoe UI Symbol"/>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
    <NavigationViewItem Content="Sales" Tag="SalesRepoView">
        <NavigationViewItem.Icon>
            <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" 
                      Data="M 0,0 L20,0 40,70 140,70 140,74 36,74 20,4z 
                      M25,12 L150,12 140,50 37,55z 
                      M70,82 A10,10 360 1 1 70,81.99z 
                      M120,82 A10,10 360 1 1 120,81.99z" />
        </NavigationViewItem.Icon>
    </NavigationViewItem>
    <NavigationViewItemSeparator/>
    <NavigationViewItemHeader Content="Charts"/>
    <NavigationViewItem Content="Sales by Customer" Tag="SalesCustChartView">
        <NavigationViewItem.Icon>
            <FontIcon Glyph=""/>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
    <NavigationViewItem Content="Sales by Product" Tag="SalesProdChartView">
        <NavigationViewItem.Icon>
            <PathIcon Data="M0,0 L1.25,0 1.25,18 18,18 18,19.25 0,19.25z
                      M0,18 L18,0 19.25,0 19.25,1.25z" />
        </NavigationViewItem.Icon>
    </NavigationViewItem>
    <NavigationViewItem Content="Sales by Date" Tag="SalesDateChartView">
        <NavigationViewItem.Icon>
            <FontIcon Glyph=""/>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

Now, we must create the views for each item. Create a new folder named Views and, in this folder, create new pages, one for each item: CustView, OrderView, CustRepoView,OrderRepoView, SalesRepoView, SalesCustChartView, SalesProdChartView and SalesDateChartView.

With the views in place, we can create the ItemInvoked handler:

private NavigationViewItem _lastItem;
private void NavigationView_OnItemInvoked(
    Windows.UI.Xaml.Controls.NavigationView sender, 
    NavigationViewItemInvokedEventArgs args)
{
    var item = args.InvokedItemContainer as NavigationViewItem;
    if (item == null || item == _lastItem)
        return;
    var clickedView = item.Tag?.ToString();
    if (!NavigateToView(clickedView)) return;
    _lastItem = item;
}

The NavigateToView method is:

private bool NavigateToView(string clickedView)
{
    var view = Assembly.GetExecutingAssembly()
        .GetType($"NavigationView.Views.{clickedView}");

    if (string.IsNullOrWhiteSpace(clickedView) || view == null)
    {
        return false;
    }

    ContentFrame.Navigate(view, null, new EntranceNavigationTransitionInfo());
    return true;
}

This method uses reflection to get the type corresponding to the view name that’s in the Tag property and navigates to it. If you run the program, you will see something like this when you click an item:

This code has one problem: if you click the Settings item, you will get an error. That’s because the Settings item doesn’t have a valid Tag. So, we must create the SettingsView page in the Views folder and change the ItemInvoked handler:

private void NavigationView_OnItemInvoked(
    Windows.UI.Xaml.Controls.NavigationView sender, 
    NavigationViewItemInvokedEventArgs args)
{
    var item = args.InvokedItemContainer as NavigationViewItem;
    if (item == null || item == _lastItem)
        return;
    var clickedView = item.Tag?.ToString() ?? "SettingsView";
    if (!NavigateToView(clickedView)) return;
    _lastItem = item;
}

If the tag is null, we will navigate to the SettingsView. With this change, the code works fine and you can click on the Settings item. There is only one thing that can be made, here: manage when the back button is clicked. We do this in the BackRequested handler:

private void NavView_OnBackRequested(
    Windows.UI.Xaml.Controls.NavigationView sender, 
    NavigationViewBackRequestedEventArgs args)
{
    if (ContentFrame.CanGoBack)
        ContentFrame.GoBack();
}

With this code, the back button is also handled with very little code.

Conclusions

As you can see, the NavigationView allows you to create easily a responsive UI, with lots of features and many different ways to handle navigation. There are some features that I didn’t mention in the article, like the fact that you can stick to a view and make it not respond to size changes, you can change the stops where the view changes, you can add a header or footer to the page or you can even put the items at the top, just by changing a property – If you set the PaneDisplayMode to Top, you will get this UI:

This is a very powerful control and a nice improvement for your UI.

The full source code for this project is at https://github.com/bsonnino/NavigationView

When I talk about UWP development and how it works for a large number of devices, from the tiny Raspberry Pi to the huge Surface Hub, and including the Hololens and Xbox, one question that often arises is: “is there any kind of responsive design in UWP” and my answer is “Yes, you can make a design that adapts to your device – both in the screen size and in the device unique features”. In this article, I will show how to create responsive design that adapts to your screen size.

This is not a new feature, Microsoft has some documents about the responsive design in UWP and this document shows you some techniques to use to adapt to the screen size. But first, let’s see how UWP will help you to create these designs.

Resizeable controls

Some controls are resized when the window is resized. You don’t need to do anything in this case, just design using these controls in your favor. For example, you can have some code like this:

<Page
    x:Class="_1___ResponsiveControls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Pivot>
            <PivotItem Header="Grid">
                <Grid Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="2*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0"/>
                    <Rectangle Fill="Green" Grid.Row="0" Grid.Column="1"/>
                    <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="0"/>
                    <Rectangle Fill="Navy" Grid.Row="1" Grid.Column="1"/>
                </Grid>
            </PivotItem>
            <PivotItem Header="VariableSizedWrapGrid">
                <VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="150" ItemWidth="150" Margin="5">
                    <Rectangle Fill="Red"/>
                    <Rectangle Fill="Navy" VariableSizedWrapGrid.ColumnSpan="2"/>
                    <Rectangle Fill="Green" VariableSizedWrapGrid.RowSpan="2"/>
                    <Rectangle Fill="Yellow" VariableSizedWrapGrid.ColumnSpan="2"/>
                </VariableSizedWrapGrid>
            </PivotItem>
            <PivotItem Header="StackPanel H">
                <StackPanel Orientation="Horizontal" Margin="5">
                    <Rectangle Fill="Red" Width="100"/>
                    <Rectangle Fill="Navy" Width="100"/>
                    <Rectangle Fill="Green" Width="100"/>
                    <Rectangle Fill="Yellow" Width="100"/>
                </StackPanel>
            </PivotItem>
            <PivotItem Header="StackPanel V">
                <StackPanel Margin="5">
                    <Rectangle Fill="Red" Height="100"/>
                    <Rectangle Fill="Navy" Height="100"/>
                    <Rectangle Fill="Green" Height="100"/>
                    <Rectangle Fill="Yellow" Height="100"/>
                </StackPanel>
            </PivotItem>
            <PivotItem Header="RelativePanel">
                <RelativePanel Margin="5">
                    <Rectangle x:Name="RedRect" Fill="Red" Height="100" Width="100"/>
                    <Rectangle x:Name="BlueRect" Fill="Navy" Height="100" 
                               RelativePanel.RightOf="RedRect" 
                               RelativePanel.AlignRightWithPanel="True"/>
                    <Rectangle x:Name="GreenRect" Fill="Green" 
                               RelativePanel.Below="RedRect" 
                               RelativePanel.AlignLeftWithPanel="True" 
                               RelativePanel.AlignBottomWithPanel="True" 
                               RelativePanel.AlignRightWith="RedRect"/>
                    <Rectangle Fill="Yellow"
                               RelativePanel.Below="BlueRect" 
                               RelativePanel.AlignLeftWith="BlueRect" 
                               RelativePanel.AlignRightWithPanel="True"
                               RelativePanel.AlignBottomWithPanel="True"/>
                </RelativePanel>
            </PivotItem>
            <PivotItem Header="Canvas">
                <Canvas Margin="5">
                    <Rectangle Fill="Red" Height="100" Width="100"/>
                    <Rectangle Fill="Navy" Height="100" Width="100" Canvas.Left="50" Canvas.Top="50"/>
                    <Rectangle Fill="Green" Height="100" Width="100" Canvas.Left="100" Canvas.Top="100"/>
                    <Rectangle Fill="Yellow" Height="100" Width="100" Canvas.Left="150" Canvas.Top="150"/>
                </Canvas>
            </PivotItem>
        </Pivot>
    </Grid>
</Page>

If you run the program with this code, you will see different behaviors for each layout panel:

  • The Grid will resize the rectangles, according to its rows and columns (the first column will always be half the width of the second and the rows will have the same height
  • The VariableSizedWrapGrid will not resize its controls, but will reposition them when the window is resized
  • The StackPanel Horizontal will align its controls horizontally and will resize in the vertical
  • The StackPanel Vertical will align its controls vertically and will resize in the horizontally
  • The RelativePanel will leave the controls aligned relatively one to the other
  • The Canvas won’t resize anything

With this knowledge, you can start tweaking your design and making sure that it doesn’t interfere with your screen size. There is nothing worse than this design for your app:

<Canvas>
    <TextBlock Text="Id" Canvas.Left="10" Canvas.Top="10"/>
    <TextBlock Text="Name" Canvas.Left="10" Canvas.Top="50"/>
    <TextBlock Text="Address" Canvas.Left="10" Canvas.Top="90"/>
    <TextBlock Text="City" Canvas.Left="10" Canvas.Top="130"/>
    <TextBlock Text="Email" Canvas.Left="10" Canvas.Top="170"/>
    <TextBlock Text="Phone" Canvas.Left="10" Canvas.Top="210"/>
    <TextBox Width="300" Canvas.Left="100" Canvas.Top="5"/>
    <TextBox Width="300" Canvas.Left="100" Canvas.Top="45"/>
    <TextBox Width="300" Canvas.Left="100" Canvas.Top="85"/>
    <TextBox Width="300" Canvas.Left="100" Canvas.Top="125"/>
    <TextBox Width="300" Canvas.Left="100" Canvas.Top="165"/>
    <TextBox Width="300" Canvas.Left="100" Canvas.Top="205"/>
    <Button Content="Submit" Width="65" Height="35" 
            Canvas.Top="350" Canvas.Left="350"/>
</Canvas>

As you can see, I’ve used a Canvas to create the layout. This may be the easiest way to put your controls on the screen, but when you resize the window, the controls are not repositioned nor resized, so you can have an almost empty screen or a clipped screen. That won’t get high rates for your app.

So, the first lesson here is: don’t interfere with the layout, leave it flow with the screen size. Use the right control for the layout you want. With this simple lesson you will solve most of your design issues, you won’t have clipped or hidden controls or lots of white space in your screen.

Responsive design

Sometimes, just using the right control isn’t enough. You need more than that to handle the way the device is used: for example, a smartphone is used with one hand while you are on the go, the tablet is used on your lap or with two hands, the desktop has a large display, mouse and keyboard and the Surface Hub can be used collaboratively with more than one person. And you must make use of the screen size – there’s no sense to show the same amount of information in a 80″ screen than in a 5″ screen – you must reposition and hide/show some information, depending on the screen size.

For that, UWP has the AdaptiveTrigger that will allow you to create different designs for the different screens. You have to use this in the VisualStateManager, setting the properties of the components for every screen size you want. The first step is define the “snap points”, where the window will change. From this page, we will choose three breakpoints:

  • Small – less than 640 pixels
  • Medium – between 641 and 1007 pixels
  • Large – More than 1008 pixels

We will be designing a screen with three panes of information, in the Large size: a list with all the available items, a text pane with textual information and a photo of the item. When the screen is in the medium size, the photo will be on top of the textual data and in the small size, only the list will be shown. The following images show that:

The first step is to create the full UI, with some code like this one:

<Page
    x:Class="_2___ResponsiveLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </Page.Resources>
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="640"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ListView Grid.Column="0" Margin="5">
            <ListViewItem>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ListViewItem>
            <ListViewItem>Vivamus faucibus erat at urna fermentum, vitae rutrum metus condimentum.</ListViewItem>
            <ListViewItem>Etiam scelerisque enim eu quam maximus malesuada.</ListViewItem>
            <ListViewItem>Donec et eros sit amet risus scelerisque gravida.</ListViewItem>
            <ListViewItem>Duis lacinia orci sit amet justo sagittis, luctus lacinia quam consectetur.</ListViewItem>
            <ListViewItem>Ut suscipit sem at ultrices venenatis.</ListViewItem>
            <ListViewItem>Maecenas a massa ac sem pulvinar hendrerit.</ListViewItem>
            <ListViewItem>Duis at ligula cursus, euismod massa quis, pretium velit.</ListViewItem>
            <ListViewItem>Vivamus ut nulla sed magna suscipit scelerisque.</ListViewItem>
            <ListViewItem>Proin varius enim quis quam placerat, id tincidunt mauris dignissim.</ListViewItem>
            <ListViewItem>Cras pellentesque dui quis justo suscipit mollis.</ListViewItem>
            <ListViewItem>Cras eget lorem ut velit accumsan efficitur.</ListViewItem>
            <ListViewItem>Sed eget erat bibendum nisl pulvinar facilisis.</ListViewItem>
            <ListViewItem>Mauris feugiat nisi eget enim volutpat, vel bibendum ipsum maximus.</ListViewItem>
            <ListViewItem>Vestibulum sed nisi accumsan, malesuada sapien et, volutpat justo.</ListViewItem>
            <ListViewItem>Mauris volutpat lectus nec velit fermentum egestas.</ListViewItem>
            <ListViewItem>Maecenas accumsan justo sed ultrices lobortis.</ListViewItem>
            <ListViewItem>Cras lacinia mi quis nibh efficitur, ut sodales felis elementum.</ListViewItem>
            <ListViewItem>Donec sit amet turpis in ligula dignissim pulvinar.</ListViewItem>
            <ListViewItem>Nullam vel quam et tortor pellentesque fringilla vel eget justo.</ListViewItem>
            <ListViewItem>Donec mattis leo sit amet diam iaculis convallis ac a nisl.</ListViewItem>
        </ListView>
        <RelativePanel Grid.Column="1" x:Name="DetailsPane" Margin="5">
            <Image Source="Picasso.jpg" x:Name="Img" Width="250" Height="250" Margin="30" 
                   RelativePanel.AlignVerticalCenterWithPanel="True"
                   RelativePanel.RightOf="Details"/>
            <Grid Margin="5,5,5,15" x:Name="Details" 
                  RelativePanel.AlignLeftWithPanel="True" MaxWidth="450">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Details" FontSize="20" HorizontalAlignment="Center" 
                           Grid.Row="0" VerticalAlignment="Center" Foreground="Red"/>
                <ScrollViewer Grid.Row="1">
                    <TextBlock  FontFamily="Comic Sans MS" TextWrapping="Wrap" xml:space="preserve">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisl tellus, vulputate mollis risus nec, placerat fringilla erat. Maecenas ullamcorper malesuada mauris sit amet placerat. Sed elit lorem, sagittis nec scelerisque sed, pharetra ac diam. Mauris et dui quis risus euismod tincidunt. Etiam vel molestie risus. Vivamus sodales pellentesque nibh, id efficitur purus tristique et. Nullam commodo, tellus at ullamcorper tempor, purus felis volutpat enim, vitae placerat lacus nulla a nulla. Praesent eget eros elit. Integer pulvinar sed magna et cursus. Nam tincidunt nibh lacus, in feugiat nisi rutrum sit amet. Morbi eget magna a nibh viverra condimentum eget nec arcu. 
                Praesent luctus ante in sem malesuada egestas. Mauris posuere nunc sit amet augue posuere, eget pulvinar orci sodales. In facilisis metus lectus. Fusce ac eros ac tellus imperdiet pellentesque. Sed aliquet ornare sodales. Nullam euismod lacus sem, sit amet viverra odio porta nec. Nulla facilisi. Proin vestibulum, ante eget lacinia dignissim, nibh turpis consequat dolor, eget hendrerit orci ipsum eget arcu. Pellentesque sagittis ut dolor quis suscipit. Phasellus purus tellus, efficitur ut mattis maximus, mollis vel lorem. Vivamus ultrices luctus velit, vel dignissim eros iaculis vel. Maecenas non sodales quam. Ut eget dolor in nulla sagittis tempor ut sit amet purus. Aliquam id nulla a eros elementum pulvinar et sit amet justo. 
                Nam nec auctor nisl. Suspendisse dignissim sodales risus, sit amet gravida lorem posuere ut. Sed a finibus lectus. Sed tristique erat et dictum tincidunt. Nunc nisi diam, dapibus sed risus sit amet, volutpat commodo mi. Maecenas mauris nisl, commodo at elementum a, euismod id metus. Suspendisse imperdiet, orci nec sollicitudin ultrices, neque dolor facilisis diam, aliquet efficitur nulla ex ut velit. In fringilla malesuada enim eu placerat. Integer lacinia dolor eu dui venenatis, at mollis urna vestibulum. Morbi ornare erat cursus orci hendrerit consequat. Fusce eu tellus sollicitudin, vehicula justo id, feugiat velit. Etiam nec felis ac libero mattis tincidunt eget eu urna. Duis dapibus auctor risus. Suspendisse id nunc lorem. Vestibulum quis libero ligula. 
                Nam a enim vitae odio pellentesque posuere. Suspendisse sed fermentum mi, ornare posuere est. Etiam dignissim lacinia neque, vitae luctus tellus accumsan id. Suspendisse aliquet gravida erat, eget dapibus purus rhoncus quis. Nullam id lectus a ante bibendum molestie. Vestibulum a nunc pellentesque, tincidunt risus sit amet, tincidunt velit. Fusce sit amet ultricies mi. Proin ornare vehicula lobortis. Pellentesque velit ligula, tempus id mollis blandit, rutrum vel sapien. Suspendisse ut bibendum felis. Aliquam vel magna enim. Cras diam sem, facilisis auctor vulputate at, laoreet non tortor. 
                In fringilla vulputate lacus. Praesent posuere leo nibh, non feugiat dui rutrum vel. Aliquam id ligula viverra, blandit sem sit amet, efficitur nulla. Suspendisse hendrerit pretium massa, semper egestas massa mattis in. Suspendisse potenti. Vivamus ut odio vestibulum, venenatis ex vel, cursus lorem. Vestibulum sapien lorem, vestibulum at accumsan et, ornare et est. Pellentesque condimentum vulputate quam et imperdiet.
                Aenean nec magna nec nisl accumsan fermentum. Quisque vel sodales sapien. Nunc laoreet erat lorem, eu facilisis ipsum euismod eget. Nullam quam eros, ultrices ut sapien vel, laoreet lacinia sem. Duis sodales lacinia odio, ut commodo odio vulputate sodales. Nunc mollis feugiat ipsum, in auctor dolor ultricies et. Sed vitae fermentum augue, eu ullamcorper quam.
                    </TextBlock>
                </ScrollViewer>
            </Grid>
        </RelativePanel>
    </Grid>
</Page>

In this code, I’ve just created a mockup to show the concepts. Once you’ve got them, you can add your real data in the screen. If you run the code, you will see something like the first image. Now, we should create our layouts for the other screen sizes. To do that, you must add the VisualStateGroup that will change the layout for the screen sizes. We could use the recommended steps for snap points, but in this case, I’ve opted to do differently: we have three columns, the list (640 pixels with margin=5 – 650 pixels), the text (450 pixels with margin=5 – 460 pixels) and the image (250 pixels with margin=30 – 310 pixels). Then, we can do this: when the screen is large enough to show all data, we will show the default layout. When the screen starts to cover the image (1300 pixels), we will put the image above the text. When the screen size is to small to show the data (900 pixels), we will hide the details and only show the list.

To get this, we must add a VisualStateGroup like this:

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1300"/>
                    </VisualState.StateTriggers>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="900"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DetailsPane.Visibility" Value="Visible"/>
                        <Setter Target="Details.(RelativePanel.Below)" Value="Img"/>
                        <Setter Target="Img.(RelativePanel.RightOf)" Value=""/>
                        <Setter Target="Img.Margin" Value="100,30,30,0"/>
                        <Setter Target="Img.(RelativePanel.AlignVerticalCenterWithPanel)" Value="False"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers >
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DetailsPane.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>

            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

As you can see, we are setting three visual states:

  • The first will be active when the window has more than 1300 pixels and will show the default layout
  • When the window has less than 1300 pixels and more than 900 pixels, the details will be below the image, and the image right margin will be set to 100 pixels
  • When the window has less than 900 pixels, the details pane will be hidden, and just the list will be shown

With this visual state, we have different layouts for the many screen sizes. If you run the program and resize the window, you can see the position of the controls changing accordingly. As you can see it’s very easy to get a responsive design with an UWP application. But this isn’t the only way to adapt to a device: you can even create new pages and load them depending on the device where the app is being used. In App.xaml.cs, we have this code in the OnLaunched override:

if (rootFrame.Content == null)
{
    // When the navigation stack isn't restored navigate to the first page,
    // configuring the new page by passing required information as a navigation
    // parameter
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
}

We can use the AnalyticsInfo.VersionInfo.DeviceForm property to detect the device that is being used and open a different page for each device:

switch (AnalyticsInfo.VersionInfo.DeviceFamily)
{
    case "Windows.Mobile":
        rootFrame.Navigate(typeof(MainPageMobile), e.Arguments);
        break;
    case "Windows.Xbox":
        rootFrame.Navigate(typeof(MainPageXBox), e.Arguments);
        break;
    case "Windows.Holographic":
        rootFrame.Navigate(typeof(MainPageHololens), e.Arguments);
        break;
    case "Windows.Team":
        rootFrame.Navigate(typeof(MainPageSurfaceHub), e.Arguments);
        break;

    case "Windows.IoT":
        rootFrame.Navigate(typeof(MainPageRaspberry), e.Arguments);
        break;
    case "Windows.Desktop":
        rootFrame.Navigate(typeof(MainPageDesktop), e.Arguments);
        break;
}

As you can see, there are many ways to make the layout of your program to adapt to the used device. Although Windows 10 allows you to use the same program in a wide range of devices, that doesn’t mean that you need  to keep a single layout, you can adapt to the device and even make use of the unique characteristics of each one.

The source code for this article is at https://github.com/bsonnino/ResponsiveLayout

One of the features I really like in Visual Studio while I am developing is the Edit and Continue feature. Just add a breakpoint in the code, edit the code and maybe even reposition the run pointer and you can try new features, set some properties or add new code and run, without having to restart the program.

This is really a timesaver, I’ve used it a lot of time and it has saved me hours of development. But, when I was doing some WPF or UWP development, the UI development was slowed down, because every time I needed to make some change to the design, I had to stop the program, make a change and re-run again.

Things were worse because the designer was less than optimal and, for complex designs, with lots of resources, animations and so on, I couldn’t see what was happening at design time. When the live visual tree was introduced, this was made better: I could see the visual tree and interact with it, setting some properties at runtime. The pitfall in this is that I needed to make the notes of what was changed, because the changes would be lost when the program stopped.

Then came XAML Edit and Continue. What a difference! The name of the feature is misleading, because it’s not Edit and Continue (I would suggest XAML Runtime Edititng). You don’t need to stop the program and set a breakpoint anywhere – just edit the code while it’s running and see the changes happen!

This is a great feature, you can start from a blank page and start adding data to it. If you have a ViewModel attached to the View, you can also use data binding to show the ViewModel data. One thing should be noted, here: if you are using x:Bind to make the binding to the data, it won’t work at runtime, because this binding is resolved at compile time and it won’t be available at runtime.

I use this feature when I want to try something in my UI – that can be something new or something that can be improved in my code. For example, if I have this CommandBar in my code (code courtesy of https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.commandbar), I can try to tweak its options directly in the code and see what happens.

<Page.TopAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>

        <CommandBar.Content>
            <TextBlock Text="Now playing..." Margin="12,14"/>
        </CommandBar.Content>
    </CommandBar>
</Page.TopAppBar>

For example, I want to know what happens when the IsCompact  property of an AppBarButton is set to False. I can just add it to the code and see what happens:

Then I removed the tag from the code. Instead of seeing the UI be restored to the default, the IsCompact property remained to False. You should be aware that once you set a property and remove it from the code, the property will still be set to the value until you reset it explicitely or rerun the program. Be aware of that or you will have some hard time to see why things aren’t the way you expect :-).

If you are using a resource dictionary, you can also change the styles there and the UI will change accordingly. For example, I have a Resource Dictionary like this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="CommandBar">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Gray"/>
    </Style>
</ResourceDictionary>

I add it to the app resources with something like this:

<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
        <ResourceDictionary Source="ResourceDict.xaml"/>
    </Application.Resources>
</Application>

When I take a look at the UI, I see something like this:

As you can see, the content is white, while the buttons are black, and surely that’s not what I want. I can add a new style like this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="CommandBar">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Gray"/>
    </Style>
   <Style TargetType="SymbolIcon">
       <Setter Property="Foreground" Value="White"/>
   </Style>
</ResourceDictionary>

And the UI reflects the new style for the icons:

One other area that you can tweak is when you are designing a responsive view. You will have something like this:

 <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!-- Widest possible layout moves some elements around to optimize for more available width 
                        and keeps SplitView pane always showing inline -->
                        <Setter Target="MySplitView.DisplayMode" Value="Inline" />
                        <Setter Target="MySplitView.IsPaneOpen" Value="True" />
                        <Setter Target="BackgroundCombo.(RelativePanel.RightOf)" Value="BackgroundImage" />
                        <Setter Target="BackgroundCombo.(RelativePanel.AlignTopWith)" Value="BackgroundImage" />
                        <Setter Target="BackgroundCombo.(RelativePanel.AlignLeftWith)" Value="FitCombo" />
                        <Setter Target="PictureLabel.(RelativePanel.Below)" Value="BackgroundImage" />
                        <Setter Target="FitCombo.(RelativePanel.RightOf)" Value="PicturesPanel" />
                        <Setter Target="FitCombo.(RelativePanel.AlignTopWith)" Value="PictureLabel" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <!-- VisualState to be triggered when window width is >=548 and <720 effective pixels -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!-- For intermediate window widths as well as most phones on landscape orientation, 
                        this state keeps primary layout narrow while showing the splitview pane to take advantage of more available width than narrow layout -->
                        <Setter Target="MySplitView.DisplayMode" Value="Inline" />
                        <Setter Target="MySplitView.IsPaneOpen" Value="True" />
                        <Setter Target="BackgroundCombo.(RelativePanel.Below)" Value="BackgroundImage" />
                        <Setter Target="PictureLabel.(RelativePanel.Below)" Value="BackgroundCombo" />
                        <Setter Target="FitCombo.(RelativePanel.Below)" Value="BrowseButton" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <!-- VisualState to be triggered when window width is >=0 and <548 effective pixels -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!-- For the most narrow windows and phones in portrait orientation, this state collapses the SplitView pane into overlay mode
                        and adds dynamic RelativePanel constraints that puts all elements stacked below each other -->
                        <Setter Target="MySplitView.DisplayMode" Value="Overlay" />
                        <Setter Target="MySplitView.IsPaneOpen" Value="False" />
                        <Setter Target="BackgroundCombo.(RelativePanel.Below)" Value="BackgroundImage" />
                        <Setter Target="PictureLabel.(RelativePanel.Below)" Value="BackgroundCombo" />
                        <Setter Target="FitCombo.(RelativePanel.Below)" Value="BrowseButton" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

You can change the triggers for the states, changing the windows sizes or the display for the many states. That is something that will save you a lot of time when developing responsive designs!

One thing in which this feature really shines is in testing animations – if you are using Visual Studio to create XAML animations, you are out of luck to test them, there is no way to test them in design time – you must use Blend for that. With this feature, you can create, tweak and test your animations without having to restart your program. For example, if you have this UI:

<Page.Resources>
    <Storyboard x:Name="myStoryboard">
        <DoubleAnimation
            Storyboard.TargetName="MyAnimatedRectangle"
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:2"
            AutoReverse="True" />
    </Storyboard>
</Page.Resources>
<Grid>
    <Rectangle x:Name="MyAnimatedRectangle" 
               Width="300" Height="200" Fill="Blue"/>
</Grid>

And your animation is started by a button click like this one:

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}

You can run your program and change the animation parameters at runtime. Every time you click the button, the new animation will be run and you will be able to see its effects. Nice, no?

Conclusions

This feature is one of the nicest ones when it comes to XAML development. If you are a beginner learning XAML, you can use it to learn and see what happens when you change things, thus speeding up your learning curve, and if you are an experienced XAML designer, you can design your views interactively, using all the features you want. You just need to create a blank app and start designing!

The source code for this article is at https://github.com/bsonnino/XamlEditAndContinue

I was developing an app in UWP where I needed to do some cleanup when the window was closed, and the only way that I had found until now was to used the Application event OnSuspending, but it was somewhat cumbersome. I wanted something that was fired when the user clicked the “X” button in the window.

With WinForms or WPF you have some events that fire when the window was closed, but in UWP, there weren’t such events.  Then I found the Restricted Capabilities. These are not normal capabilities, that you can edit using the Package.AppXManifest editor in Visual Studio. To edit them, you must open the XML file directly and add them. One other problem with them is that you will need special approval when submitting the app to the store, but that’s better than the alternative.

To use this capability, you must edit the package.appxmanifest manually. Right click on it in the Solution Explorer and select View Code. Then, in the xml, add the Restricted Capabilities namespace to the Package tag:

<Package ... 
         xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
         IgnorableNamespaces="uap mp uap6 rescap">

Then, add the confirmAppClose capability to the Capabilities node:

<Capabilities>
  <Capability Name="internetClient" />
  <uap6:Capability Name="graphicsCapture" />
  <rescap:Capability Name="confirmAppClose"/>
</Capabilities>

With that, you can use the SystemNavigationManagerPreview.GetForCurrentView().CloseRequested
event to check when the window is being closed, like this:

public MainPage()
{
    this.InitializeComponent();
    SystemNavigationManagerPreview.GetForCurrentView().CloseRequested+= (s, e) =>
    {
        // Code run when the window is closing
    };
}

Nice, no?

One thing that went unnoticed in the last post is that the console app is multi-instance: if you click in the live tile or in the start menu, instead of bringing the same app to the front, you are opening a new window and running a new instance of it. This is something new for UWP apps: until now, you could only have one instance of the app running in your machine. While this works for many apps, when you are developing an LOB app, for example, you may need to open more than one instance and that can be limiting. The SDK released in the Aril 2018 update allow you to create multi instanced apps.

Single instance apps

The default UWP apps have a single instance. When you activate it for the first time, it opens the main window and runs the app. After the second call, the same app is activated and you can handle the activation in the OnLaunched method, like this:

private int _activationNo;
/// <summary>
/// Invoked when the application is launched normally by the end user.  Other entry points
/// will be used such as when the application is launched to open a specific file.
/// </summary>
/// <param name="e">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }

        if (rootFrame.Content is MainPage page)
            page.MainText = 
                $"Activation# {++_activationNo}";
        // Ensure the current window is active
        Window.Current.Activate();
    }
}

This way, you will see the activation number in the main page for the app. The app continues to have a single page, but you can control the number of times it’s activated. One other way to handle this is to open multiple windows, one for each activation. It is done like this:

private int _activationNo;
/// <summary>
/// Invoked when the application is launched normally by the end user.  Other entry points
/// will be used such as when the application is launched to open a specific file.
/// </summary>
/// <param name="e">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);


            if (rootFrame.Content is MainPage page)
                page.MainText =
                    $"Activation# {++_activationNo}";
            // Ensure the current window is active
            Window.Current.Activate();
        }
        else
        {
            CreateNewView();
        }
    }
}

private async void CreateNewView()
{
    CoreApplicationView newView = CoreApplication.CreateNewView();
    int newViewId = 0;
    await newView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
    {
        Frame frame = new Frame();
        frame.Navigate(typeof(MainPage), null);
        Window.Current.Content = frame;
        if (frame.Content is MainPage page)
            page.MainText =
                $"Activation# {++_activationNo}";
        // You have to activate the window in order to show it later.
        Window.Current.Activate();

        newViewId = ApplicationView.GetForCurrentView().Id;
    });
    await ApplicationViewSwitcher.TryShowAsStandaloneAsync(newViewId);
}

The process is similar to the previous ones, but there is a difference: for the first activation, it fills the main window, and if not, it creates a new window with the CreateNewView method, then fills its content in the same way it did for the main window. After the window and the view are created and activated, we call ApplicationViewSwitcher.TryShowAsStandaloneAsync to show it. This will show the new window for the app.

MultiWnd

This arrangement works fine, but there is a problem, here: all windows are in the same process and, if you have a problem in one of them, all will crash.  This may not be what you want, and it’s changed in the April 2018 update – you can have multi-instance UWP apps.

Multi-Instance apps

The main difference is the SupportsMultipleInstances attribute in the package.appxmanifest file, in the Application node:

<Application 
  Id="App"
  Executable="$targetnametoken$.exe"
  EntryPoint="MultiInstance.Program"
  desktop4:SupportsMultipleInstances="true" 
  iot2:SupportsMultipleInstances="true">

The desktop4 and iot2 namespaces are defined in the Package node:

<Package
  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
  xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"
  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
  xmlns:uap5="http://schemas.microsoft.com/appx/manifest/uap/windows10/5" 
  xmlns:desktop4="http://schemas.microsoft.com/appx/manifest/desktop/windows10/4" 
  xmlns:iot2="http://schemas.microsoft.com/appx/manifest/iot/windows10/2" 
  IgnorableNamespaces="uap mp uap5 iot2 desktop4">

Once you put these in your package.appxmanifest, your application will be multi-instanced:

 

MultiInstance

If you don’t want to add this data manually, you can install the Multi-Instance templates, created by Microsoft. In Visual Studio, go to Tools/Extensions and Updates and install the Multi-Instance template:

MultiInstanceTemplate

Once you do that, you will get two new UWP templates, the Multi-Instance UWP App and Multi-Instance UWP Redirection App:

NewUwpTemplates

The Multi-Instance UWP App template does what we did before: creates a blank app with the new attribute. The Multi-Instance Redirection UWP App is a bit more complex. Sometimes you want to handle how multi instancing works and call a specific instance. In this case, the template generates a Program.cs file with a Main method, where you can handle the redirection.

public static class Program
{
    // This project includes DISABLE_XAML_GENERATED_MAIN in the build properties,
    // which prevents the build system from generating the default Main method:
    //static void Main(string[] args)
    //{
    //    global::Windows.UI.Xaml.Application.Start((p) => new App());
    //}

    // This example code shows how you could implement the required Main method to
    // support multi-instance redirection. The minimum requirement is to call
    // Application.Start with a new App object. Beyond that, you may delete the
    // rest of the example code and replace it with your custom code if you wish.

    static void Main(string[] args)
    {
        // First, we'll get our activation event args, which are typically richer
        // than the incoming command-line args. We can use these in our app-defined
        // logic for generating the key for this instance.
        IActivatedEventArgs activatedArgs = AppInstance.GetActivatedEventArgs();

        // In some scenarios, the platform might indicate a recommended instance.
        // If so, we can redirect this activation to that instance instead, if we wish.
        if (AppInstance.RecommendedInstance != null)
        {
            AppInstance.RecommendedInstance.RedirectActivationTo();
        }
        else
        {
            // Define a key for this instance, based on some app-specific logic.
            // If the key is always unique, then the app will never redirect.
            // If the key is always non-unique, then the app will always redirect
            // to the first instance. In practice, the app should produce a key
            // that is sometimes unique and sometimes not, depending on its own needs.
            uint number = CryptographicBuffer.GenerateRandomNumber();
            string key = (number % 2 == 0) ? "even" : "odd";
            var instance = AppInstance.FindOrRegisterInstanceForKey(key);
            if (instance.IsCurrentInstance)
            {
                // If we successfully registered this instance, we can now just
                // go ahead and do normal XAML initialization.
                global::Windows.UI.Xaml.Application.Start((p) => new App());
            }
            else
            {
                // Some other instance has registered for this key, so we'll 
                // redirect this activation to that instance instead.
                instance.RedirectActivationTo();
            }
        }
    }
}

From the comments in the file, you can see that you can get the default behavior just by using this code in the Main method:

static void Main(string[] args)
{
    global::Windows.UI.Xaml.Application.Start((p) => new App());
}

The key will be linked to the instance you want. For example, if you generate only different keys, new instances will be opened, and if you generate only one key, the first instance will be called. You can control how many instances you want and which ones you want to activate by using the keys you generate. For example, this code will allow you to have three instances open and will call them in a round-robin scheme:

static void Main(string[] args)
{
    // First, we'll get our activation event args, which are typically richer
    // than the incoming command-line args. We can use these in our app-defined
    // logic for generating the key for this instance.
    IActivatedEventArgs activatedArgs = AppInstance.GetActivatedEventArgs();

    // In some scenarios, the platform might indicate a recommended instance.
    // If so, we can redirect this activation to that instance instead, if we wish.
    if (AppInstance.RecommendedInstance != null)
    {
        AppInstance.RecommendedInstance.RedirectActivationTo();
    }
    else
    {
        // Define a key for this instance, based on some app-specific logic.
        // If the key is always unique, then the app will never redirect.
        // If the key is always non-unique, then the app will always redirect
        // to the first instance. In practice, the app should produce a key
        // that is sometimes unique and sometimes not, depending on its own needs.
        var instanceNo = GetInstanceNo();
        string key = instanceNo.ToString();
        var instance = AppInstance.FindOrRegisterInstanceForKey(key);
        if (instance.IsCurrentInstance)
        {
            // If we successfully registered this instance, we can now just
            // go ahead and do normal XAML initialization.
            global::Windows.UI.Xaml.Application.Start(p => new App());
        }
        else
        {
            // Some other instance has registered for this key, so we'll 
            // redirect this activation to that instance instead.
            instance.RedirectActivationTo();
        }
    }
}

private static int GetInstanceNo()
{
    ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;
    var instanceNo = 0;
    object data = localSettings.Values["instanceNo"];
    if (data != null)
    {
        instanceNo = ((int)localSettings.Values["instanceNo"] + 1) % 3;
    }

    localSettings.Values["instanceNo"] = instanceNo;
    return instanceNo;
}

In this case, we are keeping it simple, but we can make something more complex here. For example, we can activate some instance depending on the parameters passed to the application:

static void Main(string[] args)
{
    // First, we'll get our activation event args, which are typically richer
    // than the incoming command-line args. We can use these in our app-defined
    // logic for generating the key for this instance.
    IActivatedEventArgs activatedArgs = AppInstance.GetActivatedEventArgs();
    // In some scenarios, the platform might indicate a recommended instance.
    // If so, we can redirect this activation to that instance instead, if we wish.
    if (AppInstance.RecommendedInstance != null)
    {
        AppInstance.RecommendedInstance.RedirectActivationTo();
    }
    else
    {
        // Define a key for this instance, based on some app-specific logic.
        // If the key is always unique, then the app will never redirect.
        // If the key is always non-unique, then the app will always redirect
        // to the first instance. In practice, the app should produce a key
        // that is sometimes unique and sometimes not, depending on its own needs.
        string key = "MainInstance";
        if (args.Length > 0)
            key = args[0];
        var instance = AppInstance.FindOrRegisterInstanceForKey(key);
        if (instance.IsCurrentInstance)
        {
            // If we successfully registered this instance, we can now just
            // go ahead and do normal XAML initialization.
            global::Windows.UI.Xaml.Application.Start(p => new App());
        }
        else
        {
            // Some other instance has registered for this key, so we'll 
            // redirect this activation to that instance instead.
            instance.RedirectActivationTo();
        }
    }
}

The key for the instance depends on the first parameter passed to the app. If we change our package.appxmanifest to add an ExecutionAlias, we can open a console window and call the app with a parameter:

<Package
  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
  xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"
  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
  xmlns:uap5="http://schemas.microsoft.com/appx/manifest/uap/windows10/5"
  xmlns:desktop4="http://schemas.microsoft.com/appx/manifest/desktop/windows10/4" 
  xmlns:iot2="http://schemas.microsoft.com/appx/manifest/iot/windows10/2" 
  IgnorableNamespaces="uap mp desktop4 iot2 uap5">

    ....

   <Extensions>
     <uap5:Extension
       Category="windows.appExecutionAlias"
       Executable="MultiInstance.exe"
       EntryPoint="MultiInstance.App">
       <uap5:AppExecutionAlias>
         <uap5:ExecutionAlias Alias="MultiInstance.exe" />
       </uap5:AppExecutionAlias>
     </uap5:Extension>
   </Extensions>
 </Application>

Now, we can handle different instances of our app. If we want to process the arguments (for example, to open a different file depending on the passed parameter), we can do it in the App.xaml.cs. Please note that the OnLaunched method is not called when the app is activated from the command line. In this case, you must override the OnActivated  method and process the arguments from there:

protected override void OnActivated(IActivatedEventArgs args)
{
    var arguments = (args as CommandLineActivatedEventArgs)?.Operation.Arguments;
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame == null)
    {
        rootFrame = new Frame();
        Window.Current.Content = rootFrame;
    }

    if (rootFrame.Content == null)
    {
        rootFrame.Navigate(typeof(MainPage), 
            $"Activated Kind {args.Kind}\nArguments: {arguments}");
    }
    Window.Current.Activate();
}

The processing of the arguments in the main page are done in the OnNavigatedTo method in MainPage.xaml.cs:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var param = e?.Parameter;
    MainTxt.Text = param?.ToString() ?? "";
    base.OnNavigatedTo(e);
}

Now, if we open a command line window and type something like MultiInstance “this is a test”, the program will open a new instance with the arguments:

MultiInstanceArgs

Conclusions

As you can see, this new feature brings a lot of flexibility to your app. You already had the possibility to create many windows and now you can even create new instances and redirect the app to the right instance, depending on how the app is launched.

The full source code is available in http://github.com/bsonnino/MultiInstanceUWP

One new feature introduced in the April 2018 Windows 10 update is the possibility of writing console apps using UWP. You could ask “why build an UWP console app if we have console apps that work fine now?”.

There are many advantages in using a UWP console app:

  • You can add them to the store and get all the benefits of them: easy discovery and deploy, virus verifying and monetizing possibilities
  • You have fast install and uninstall
  • You can use the new OS features with no hacks
  • You have a global access in the machine without having to add them to the path, like normal console apps

Writing the app

To start writing the app, you should have the April 2018 update and its SDK installed. Once you have that set up, you can open Visual Studio and, in Tools/Extensions and Updates install the Console Project template:

ConsoleTemplate

When the template is installed, you can create a new project and select the console app under the Universal tab:

NewConsoleApp

When you select it, you should set the minimum and target version to 1803, so it can run ok. Then, Visual Studio creates a console app similar to the ones you are used to, but with some twists:

  • There is an Assets folder with the assets for the tiles
  • There is a package.appxmanifest file, like any other UWP program

When you run it, it will open a console and write the data to it:

ConsoleApp

Until now, there’s nothing special. Things start to happen when you open the Start menu and see the icon for the app and you can add the tile to the start menu by right clicking the icon and selecting Pin to Start:

StartMenu

The other change you can see is that you can open a Command Prompt window and type ToastConsole param1 param2 (the name I have given to the app is ToastConsole) and the app will run, no matter in which folder you are. Pretty cool, no?

This app is an UWP app and it can be uninstalled like any other app. Once you uninstall it, it will be completely removed from your machine.

Adding OS features to the app

The cool feature for UWP Console apps is the possibility to add OS features to it and use them as we would do in a normal UWP app. We will add a toast notification to the app, it will take the parameters typed to the app and send a toast notification with the first parameter as the title and the second parameter as the content.

To create a toast notification, you should create the content as XML and use it to send the toast, but there are better ways to do it: you can install the Windows UWP Toolkit Notifications package and use its helper functions to create the toast content. Right click in the References node in the Solution Explorer and select Manage NuGet packages and install the Microsoft.Toolkit.Uwp.Notifications.

With it installed, you can create the ShowToast method:

static void ShowToast(string title, string content)
{
    ToastVisual visual = new ToastVisual
    {
        BindingGeneric = new ToastBindingGeneric
        {
            Children =
            {
                new AdaptiveText
                {
                    Text = title
                },

                new AdaptiveText
                {
                    Text = content
                }
            }
        }
    };
    ToastContent toastContent = new ToastContent
    {
        Visual = visual,
    };

    var toast = new ToastNotification(toastContent.GetXml());
    ToastNotificationManager.CreateToastNotifier().Show(toast);
}

You create a ToastVisual, then a ToastContent and a ToastNotification with the ToastContent as XML, then show the toast. The main program is similar to this:

static void Main(string[] args)
{
    var title = "Hello UWP Console";
    var content = "Sample toast launched from UWP Console app";
    if (args.Length >= 2)
    {
        title = args[0];
        content = args[1];
    }
    else if (args.Length == 1)
    {
        content = args[0];
    }
    ShowToast(title,content);
    Console.WriteLine("Press a key to continue: ");
    Console.ReadLine();
}

This code will take the two parameters passed to the command line and will create a new toast with them and will show the toast. Simple, no?

Toast

Until now, we’ve accessed the program with the name of the app, but we can change this. Just right click the package.appxmanifest file in the Solution Explorer and select View Code. There, you can edit the execution alias and change the Alias attribute:

<Extensions>
  <uap5:Extension 
    Category="windows.appExecutionAlias" 
    Executable="ToastConsole.exe" 
    EntryPoint="ToastConsole.Program">
    <uap5:AppExecutionAlias desktop4:Subsystem="console" iot2:Subsystem="console">
      <uap5:ExecutionAlias Alias="ToastSender.exe" />
    </uap5:AppExecutionAlias>
  </uap5:Extension>
</Extensions>

With this change, you will access the program with the ToastSender alias and ToastConsole won’t be acessible anymore.

This new resource opens a new kind of applications, now you have this option to create apps that interact with the OS with no need of an UI.

The source code for the application is in https://github.com/bsonnino/ToastConsole

On last post, I’ve shown how to publish a .NET app to the store. This is quite easy with Visual Studio, but the app must be a .NET app and it must be ported to .NET 4.6.1 or later. Many times, this is not possible – you have a .NET app that targets an older version of the framework and cannot be updated or you have a Win32 app (have I heard VB6 or Delphi?) that you want to publish to the store. Sometimes, even the source code is lost and all you have is the installer or executable. Even with this case there is no problem: you can still publish it to the store, the only thing is that you won’t be able to use Visual Studio.

To demonstrate it, I will use an old Delphi game sample, Swat!, which source code is in the Delphi samples since the earlier versions of Delphi (I think it’s there since Delphi 1, in 1994).

In this game, you must kill the ants with a hammer, this is an old game and I used it as an example of what you can convert to the Store.

The first step is to download the Desktop app converter from the store

Once you have it installed, you should run it with admin rights: in the start menu, right click in its icon and select “More/Run as administrator”. That will open a console window where you will run the converter app.

This window shows some examples of command line for packaging your app, but the first example must always be run once to setup the environment. You must download a base image for your system and run the setup. The base image can be downloaded from here, it must be compatible with your system version. You can check the system version by pressing Win+R and running winver:

My Windows version is 16299. so I have to donwload the base image for that version. It will be downloaded in my downloads folder, with the name “Windows_InsiderPreview_DAC_16299.wim”. So, the first step is to run the command line:

DesktopAppConverter.exe -Setup -BaseImage "E:\Downloads\Windows_InsiderPreview_DAC_16299.wim"

You may have an error after running this command line. This is because the Containers feature must be enabled in your system. Note: you must have Windows 10 Pro or Enterprise to enable this feature – if you have Windows 10 Home, you won’t be able to use the packager:

The converter will add this feature, but you must restart your machine. When you restart it, the Desktop App Converter will reopen and re-run the setup. You are then ready to package your app. The program we are running doesn’t have an installer, it is a single file. If you have an installer, you can point DesktopAppConverter to it, but in this case, we just need to create a folder and put all the files we need there (in this case, just the executable) and another folder for the output. Note: don’t create an output folder as a subfolder from the install folder – I did that and got an error “Path too long” – this is because the output folder is added as an install folder and this is recursive – newbie mistake. Then we must run this command line:

DesktopAppConverter.exe -Installer D:\Temp\Swat\ -AppExecutable Swat.exe -Destination D:\Temp\SwatUWP -PackageName "SwatUWP" -Publisher "CN=RevolutionSoft" -Version 0.0.0.1 -MakeAppx -Sign -Verbose -Verify

This will add all the files in D:\Temp\Swat and create the output file in D:\Temp\SwatUWP, creating and signing an appx file. You can go to the output folder and double click the Appx file. It will open the installer for the app:

If it’s the first time you are installing the app, you will get an error, because the certificate is not installed. You can install it by going to the output folder and double clicking the cer file. That will open the install certificate window:

You must click on the Install Certificate button and select Local Machine as the store location. Then click on Next and then in Place all certificates in the following store, clicking on Browse and selecting Trusted People. The certificate will be installed and you can click again in the Appx file to install it. Now you have your app running as a UWP app.

If you have an installer (it can be an MSI or an EXE installer) that can be run unattended, you can use it to convert your app. In this case, all the files in the installer will be added to the package.

Now it’s time to customize the package, but this is something for another post.