One advantage of the new .NET Core (now .NET) apps is that they are cross platform. Once you create an app, the same code will run on Windows, Mac or Linux with no change. But there are some exceptions to this: WPF or WinForms apps are only for Windows. You cannot create a WPF app and run it on Linux, for example.

If you want to create a cross platform app, you will have to use another technology, like Blazor or MAUI. Blazor UI is based on Razor components and it’s not compatible with XAML, so it may be very difficult to convert. MAUI, on the other side, uses XAML and can be used to port your app to Mac, iOS or Android. But MAUI apps don’t run on Linux. If you want a Linux app, this is not the way. You can use Uno Platform (see my article here), it can run on the Web (as a WebAssembly), Linux, Mac or Windows, or you also have the option of using Avalonia UI.

In this article we will show how to convert an existing WPF app to Avalonia UI. We will use the project described in my MVVM Community toolkit 8.0 article. This project has some interesting features to explore:

  • It uses a .NET Standard library for the repository
  • It has a Datagrid to display the data
  • It uses the MVVM pattern and the MVVM Community toolkit NuGet package

Avalonia UI is an open source cross platform framework for .NET to develop cross platform apps using XAML. To use it, you need to install the Avalonia project templates with:

dotnet new install Avalonia.Templates

Once you do it, you can create a new basic project with:

dotnet new avalonia.app -o BasicApp
cd BasicApp
dotnet run

When you run it, you will see a basic app:

The generated code has these differences:

  • The extension for the view files is axaml instead of xaml (and the code behind extension is axaml.cs)
  • The default namespace for the view files is https://github.com/avaloniaui instead of http://schemas.microsoft.com/winfx/2006/xaml/presentation
  • The project includes the Avalonia, Avalonia.Desktop, Avalonia.Diagnostics and XamlNameReferenceGenerator NuGet packages
  • The project targets net6.0 (or net7.0), instead of net6.0-windows
  • There is no need to include the UseWPF clause in the project file
  • The Program.cs file and Main method are explicit
  • There is some initialization code in App.axaml.cs

Apart from that, designing the UI and the C# code aren’t much different from the standard WPF app.

For this app, we will use Visual Studio 2022 and the Avalonia Extension. This extension will provide all templates and a designer for the views. If you don’t want to use Visual Studio, you can use VS Code, but you won’t have the visual designer. In Visual Studio, go to Extensions/Manage Extensions and install the Avalonia for Visual Studio 2022 extension:

Let’s start converting our app. We have two approaches, here: convert our app in place, making changes in the files as needed, or create a new basic Avalonia project and add the features incrementally. I prefer to use the second approach, in this case all the basic infrastructure is already set and we can make sure that things are running while we are adding the features. In the in place conversion, it’s an all-or-nothing, and at the end we may not have any clue of what we’ve missed, in case it doesn’t run.

The first step is to clone our app from https://github.com/bsonnino/MVVMToolkit8.git. Then, we will create our app in Visual Studio:

That will create a new basic app. If you open MainWindow.axaml, you will see the code and the visual designer:

Let’s start converting our app. The first step is to add the two NuGet packages, CommunityToolkit.Mvvm and Microsoft.Extensions.DependencyInjection.

Then, copy the CustomerLib folder with all files to the folder of the Avalonia solution. We will use this project as is, as it’s a .NET Standard project and it can be used by Avalonia unchanged. In the solution explorer, add an existing project and select the CustomerLib.csproj file. That will add the lib to our solution. In the main project, add a project reference and add the CustomerLib project:

Then, copy the ViewModel folder to the project folder, it will appear in the solution explorer. Open MainViewModel.cs, you will see an error in ColletionViewSource:

That’s because the CollectionViewSource class doesn’t exist in Avalonia and we need to replace it with this code:

private readonly ICustomerRepository _customerRepository;
private Func<Customer, bool> _filter = c => true;
public IEnumerable<Customer> Customers => _customerRepository.Customers.Where(_filter);

[RelayCommand]
private void Search(string textToSearch)
{
    if (!string.IsNullOrWhiteSpace(textToSearch))
        _filter = c => ((Customer)c).Country.ToLower().Contains(textToSearch.ToLower());
    else
        _filter = c => true;
    OnPropertyChanged(nameof(Customers));
}

Instead of using the WPF CollectionViewSource class, we are creating our filter and using it before displaying the data. Just to check, we can copy the Test project to the solution folder, add it to the current solution and run the tests to check. For that, we must do the following changes:

  • Change the Target Framework in the csproj file to .net6.0
  • Change the reference for the main project to MvvmAvalonia

Once we do that, we can compile the project, but we get the errors for the CollectionViewSource. For that, we must change the tests to:

[TestMethod]
public void SearchCommand_WithText_ShouldSetFilter()
{
    var customers = new List<Customer>
    {
        new Customer { Country = "a"},
        new Customer { Country = "text"},
        new Customer { Country = "b"},
        new Customer { Country = "texta"},
        new Customer { Country = "a"},
        new Customer { Country = "b"},
    };
    var repository = A.Fake<ICustomerRepository>();
    A.CallTo(() => repository.Customers).Returns(customers);
    var vm = new MainViewModel(repository);
    vm.SearchCommand.Execute("text");
    vm.Customers.Count().Should().Be(2);
}

[TestMethod]
public void SearchCommand_WithoutText_ShouldSetFilter()
{
    var customers = new List<Customer>
    {
        new Customer { Country = "a"},
        new Customer { Country = "text"},
        new Customer { Country = "b"},
        new Customer { Country = "texta"},
        new Customer { Country = "a"},
        new Customer { Country = "b"},
    };
    var repository = A.Fake<ICustomerRepository>();
    A.CallTo(() => repository.Customers).Returns(customers);
    var vm = new MainViewModel(repository);
    vm.SearchCommand.Execute("");
    vm.Customers.Count().Should().Be(6);
}

Now, when we run the tests, they all pass and we can continue. We will start adding the UI to the main window:

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="40" />
		<RowDefinition Height="*" />
		<RowDefinition Height="2*" />
		<RowDefinition Height="50" />
	</Grid.RowDefinitions>
	<StackPanel Orientation="Horizontal">
		<TextBlock Text="Country" VerticalAlignment="Center" Margin="5"/>
		<TextBox x:Name="searchText" VerticalAlignment="Center" Margin="5,3" Width="250" Height="25" VerticalContentAlignment="Center"/>
		<Button x:Name="PesqBtn" Content="Find" Width="75" Height="25" Margin="10,5" VerticalAlignment="Center"
                Command="{Binding SearchCommand}" CommandParameter="{Binding ElementName=searchText,Path=Text}"/>
	</StackPanel>
	<DataGrid AutoGenerateColumns="False" x:Name="master" CanUserAddRows="False" CanUserDeleteRows="True" Grid.Row="1"
              ItemsSource="{Binding Customers}" SelectedItem="{Binding SelectedCustomer, Mode=TwoWay}">
		<DataGrid.Columns>
			<DataGridTextColumn x:Name="customerIDColumn" Binding="{Binding Path=CustomerId}" Header="Customer ID" Width="60" />
			<DataGridTextColumn x:Name="companyNameColumn" Binding="{Binding Path=CompanyName}" Header="Company Name" Width="160" />
			<DataGridTextColumn x:Name="contactNameColumn" Binding="{Binding Path=ContactName}" Header="Contact Name" Width="160" />
			<DataGridTextColumn x:Name="contactTitleColumn" Binding="{Binding Path=ContactTitle}" Header="Contact Title" Width="60" />
			<DataGridTextColumn x:Name="addressColumn" Binding="{Binding Path=Address}" Header="Address" Width="130" />
			<DataGridTextColumn x:Name="cityColumn" Binding="{Binding Path=City}" Header="City" Width="60" />
			<DataGridTextColumn x:Name="regionColumn" Binding="{Binding Path=Region}" Header="Region" Width="40" />
			<DataGridTextColumn x:Name="postalCodeColumn" Binding="{Binding Path=PostalCode}" Header="Postal Code" Width="50" />
			<DataGridTextColumn x:Name="countryColumn" Binding="{Binding Path=Country}" Header="Country" Width="80" />
			<DataGridTextColumn x:Name="faxColumn" Binding="{Binding Path=Fax}" Header="Fax" Width="100" />
			<DataGridTextColumn x:Name="phoneColumn" Binding="{Binding Path=Phone}" Header="Phone" Width="100" />
		</DataGrid.Columns>
	</DataGrid>
	<customerApp:Detail Grid.Row="2" DataContext="{Binding SelectedCustomer}" Margin="5" x:Name="detail"/>
	<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="5" Grid.Row="3">
		<Button Width="75" Height="25" Margin="5" Content="Add" Command="{Binding AddCommand}" />
		<Button Width="75" Height="25" Margin="5" Content="Remove" Command="{Binding RemoveCommand}" />
		<Button Width="75" Height="25" Margin="5" Content="Save" Command="{Binding SaveCommand}" />
	</StackPanel>
</Grid>

There is an error with the DataGrid. That’s because we need to add the package Avalonia.Controls.Datagrid. Once we add that, we can see some other errors:

  • The ItemsSource property has been changed to Items
  • The columns don’t have the Name field and should be removed
  • The CanUserAddRows and CanUserDeleteRows do not exist and should be removed
  • We should add the themes for the DataGrid in App.axaml:
<Application.Styles>
    <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
    <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
    <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>
</Application.Styles>

We can also see that this code is missing the Detail control. Add to the project a new item of type UserControl (Avalonia) and add the content from the original project:

<Grid>
    <Grid Name="grid1" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Label Content="Customer Id:" Grid.Column="0" Grid.Row="0"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="0"   Margin="3" Name="customerIdTextBox" Text="{Binding Path=CustomerId, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Company Name:" Grid.Column="0" Grid.Row="1"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="1"   Margin="3" Name="companyNameTextBox" Text="{Binding Path=CompanyName, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Contact Name:" Grid.Column="0" Grid.Row="2"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="2"   Margin="3" Name="contactNameTextBox" Text="{Binding Path=ContactName, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Contact Title:" Grid.Column="0" Grid.Row="3"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="3"   Margin="3" Name="contactTitleTextBox" Text="{Binding Path=ContactTitle, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Address:" Grid.Column="0" Grid.Row="4" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="4" Margin="3" Name="addressTextBox" Text="{Binding Path=Address, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" />
        <Label Content="City:" Grid.Column="0" Grid.Row="5"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="5"   Margin="3" Name="cityTextBox" Text="{Binding Path=City, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Postal Code:" Grid.Column="0" Grid.Row="6"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="6"   Margin="3" Name="postalCodeTextBox" Text="{Binding Path=PostalCode, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Region:" Grid.Column="0" Grid.Row="7"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="7"   Margin="3" Name="regionTextBox" Text="{Binding Path=Region, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Country:" Grid.Column="0" Grid.Row="8"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="8"   Margin="3" Name="countryTextBox" Text="{Binding Path=Country, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Phone:" Grid.Column="0" Grid.Row="9"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="9"   Margin="3" Name="phoneTextBox" Text="{Binding Path=Phone, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
        <Label Content="Fax:" Grid.Column="0" Grid.Row="10"  Margin="3" VerticalAlignment="Center" />
        <TextBox Grid.Column="1" Grid.Row="10"   Margin="3" Name="faxTextBox" Text="{Binding Path=Fax, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  />
    </Grid>
</Grid>

We must remove the , ValidatesOnExceptions=true, NotifyOnValidationError=true from the code, as it’s not available in Avalonia. Then, we should add the correct using clause in the main xaml:

xmlns:customerApp="using:MvvmAvalonia"

Once we do that and we run, we can see the UI (but not the data):

For the data, we must add the configuration for the services, in App.axaml.cs:

public partial class App : Application
{
    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);
        Services = ConfigureServices();
    }

    public override void OnFrameworkInitializationCompleted()
    {
        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
            desktop.MainWindow = new MainWindow();
        }

        base.OnFrameworkInitializationCompleted();
    }

    public new static App Current => (App)Application.Current;

    public IServiceProvider Services { get; private set; }

    private static IServiceProvider ConfigureServices()
    {
        var services = new ServiceCollection();

        services.AddSingleton<ICustomerRepository, CustomerRepository>();
        services.AddSingleton<MainViewModel>();

        return services.BuildServiceProvider();
    }

    public MainViewModel MainVM => Services.GetService<MainViewModel>();
}

Then, we must set the DataContext on MainWindow.axaml.cs:

public MainWindow()
{
    InitializeComponent();
    DataContext = App.Current.MainVM;
}

Now, when we run the code, we can see it runs fine:

We’ve ported our WPF project to Avalonia, now it’s ready to be run on Linux. We’ll use WSLg (Windows Subsystem for Linux GUI) to run the app. Just open a Linux tab on terminal and cd to the project directory (the drive is mounted on /mnt/drive, like /mnt/c) and run the app with dotnet run. You should have something like this:

As you can see, porting a WPF app to Avalonia requires some changes, but most of the code is completely portable. If you want to ease the process, you can move the non-UI code to .NET Standard libraries and use them as-is. We’ve used the DataGrid and the MVVM Community Toolkit with no problems.

All the source code for the project is at https://github.com/bsonnino/MvvmAvalonia

Sometimes, we need to get our display disposition to position windows on them in specific places. The usual way to do it in .NET is to use the Screen class, with a code like this one:

internal record Rect(int X, int Y, int Width, int Height);
internal record Display(string DeviceName, Rect Bounds, Rect WorkingArea, double ScalingFactor);

private void InitializeDisplayCanvas()
{
    
    var minX = 0;
    var minY = 0;
    var maxX = 0;
    var maxY = 0;
    foreach(var screen in Screen.AllScreens)
    {
        if (minX > screen.WorkingArea.X)
            minX = screen.WorkingArea.X;
        if (minY > screen.WorkingArea.Y)
            minY = screen.WorkingArea.Y;
        if (maxX < screen.WorkingArea.X+screen.WorkingArea.Width)
            maxX = screen.WorkingArea.X+screen.WorkingArea.Width;
        if (maxY < screen.WorkingArea.Y+screen.WorkingArea.Height)
            maxY = screen.WorkingArea.Y+screen.WorkingArea.Height;

        _displays.Add(new Display(screen.DeviceName, screen.Bounds, screen.WorkingArea, 1.0));
    }
    DisplayCanvas.Width = maxX - minX;
    DisplayCanvas.Height = maxY - minY;
    DisplayCanvas.RenderTransform = new TranslateTransform(-minX, -minY);
    var background = new System.Windows.Shapes.Rectangle
    {
        Width = DisplayCanvas.Width,
        Height = DisplayCanvas.Height,
        Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(1,242,242,242)),
    };
    Canvas.SetLeft(background, minX);
    Canvas.SetTop(background, minY);
    DisplayCanvas.Children.Add(background);
    var numDisplay = 0;
    foreach (var display in _displays)
    {
        numDisplay++;
        var border = new Border
        {
            Width = display.WorkingArea.Width,
            Height = display.WorkingArea.Height,
            Background = System.Windows.Media.Brushes.DarkGray,
            CornerRadius = new CornerRadius(30)
        };
        var text = new TextBlock
        {
            Text = numDisplay.ToString(),
            FontSize = 200,
            FontWeight = FontWeights.Bold,  
            HorizontalAlignment = System.Windows.HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center,
        };
        border.Child = text;
        Canvas.SetLeft(border, display.WorkingArea.Left);
        Canvas.SetTop(border, display.WorkingArea.Top);
        DisplayCanvas.Children.Add(border);
    }

}

If you run the code, you will see something like this:

The monitors aren’t contiguous, as you would expect. But, the worst is that it doesn’t work well. If you try to position a window in the center of the middle monitor, with a code like this:

private void Button_Click(object sender, RoutedEventArgs e)
{
    var display = _displays[0];
    var window = new NewWindow
    {
        Top = display.WorkingArea.Top + (display.WorkingArea.Height - 200) / 2,
        Left = display.WorkingArea.Left + (display.WorkingArea.Width - 200) / 2,
    };
    window.Show();
}

You will get something like this:

As you can see, the window is far from centered. And why is that? The reason for these problems are the usage of high DPI. When you set the displays in you system, you set the resolution and the scaling factor:

In my setup, I have three monitors:

  • 1920×1080 125%
  • 3840×2160 150%
  • 1920×1080 100%

This scale factor is not taken in account when you are enumerating the displays and, when I am enumerating them, I have no way of getting this value. That way, everything is positioned in the wrong place. It would work fine if all monitors had a scaling factor of 100%, but most of the time that’s not true.

Researching for High DPI WPF, I came to this page, which shows the use of the appmanifest, so I gave it a try. I added a new item, Application Manifest and uncommented these lines:

<application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
      <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware>
      <longPathAware xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">true</longPathAware>
    </windowsSettings>
  </application>

And nothing happened. Then I added this line:

<windowsSettings>
  <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitor</dpiAwareness>
  <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware>
  <longPathAware xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">true</longPathAware>
</windowsSettings>

Running the project, I got the correct display settings:

But the secondary screen is positioned in the wrong place. If I change the dpiAwareness clause to Unaware, I get the wrong display disposition, but the window is positioned at the center!

We need to get the scale factor for each monitor, to get the correct values in both cases.

Before going further we must notice that this code has also another problem: it’s a WPF app that is using a Winforms class: Screen is declared in System.Windows.Forms and there is no equivalent in WPF. To use, it you must add UseWindowsForms in the csproj:

<Project Sdk="Microsoft.NET.Sdk">
	<PropertyGroup>
		<OutputType>WinExe</OutputType>
		<TargetFramework>net6.0-windows</TargetFramework>
		<Nullable>enable</Nullable>
		<UseWPF>true</UseWPF>
		<UseWindowsForms>true</UseWindowsForms>
	</PropertyGroup>
</Project>

That is something I really don’t like to do: use Winforms in a WPF project. If you want to check the project, the branch I’ve used is here.

So, I tried to find a way to enumerate the displays in WPF and have the right scaling factor, and I found two ways: query the registry or use Win32 API. Yes, the API that is available since the beginning of Windows, and it’s still there.

We could go to http://pinvoke.net/ to get the signatures we need for our project. This is a great site and a nice resource when you want to use Win32 APIs in C#, but we’ll use another resource: CsWin32, a nice source generator that generates the P/Invokes for us. I have already written an article about it, if you didn’t see it, you should check it out.

For that, we should install the NuGet package Microsoft.Windows.CsWin32 (be sure to check the pre-release box). Once installed, you must create a text file and name it NativeMethods.txt. There, we will add the names of all the methods and structures we need.

The first function we need is EnumDisplayMonitors, which we add there. With that, we can use it in our method:

private unsafe void InitializeDisplayCanvas()
{
    Windows.Win32.PInvoke.EnumDisplayMonitors(null, null, enumProc, IntPtr.Zero);
}

We are passing all parameters as null, except for the third one, which is the callback function. As I don’t know the parameters of this function, I will let Visual Studio create it for me. Just press Ctrl+. and Generate method enumProc and Visual Studio will generate the method for us:

private unsafe BOOL enumProc(HMONITOR param0, HDC param1, RECT* param2, LPARAM param3)
{
    throw new NotImplementedException();
}

We can change the names of the parameters and add the return value true to continue the enumeration. This function will be called for each monitor in the system and will pass in the first parameter the handle of the monitor. With that handle we can determine its properties with GetMonitorInfo (which we add in NativeMethods.txt) and use it to get the monitor information. This function uses a MONITORINFO struct as a parameter, and we must declare it before calling the function:

private unsafe BOOL enumProc(HMONITOR monitor, HDC hdc, RECT* clipRect, LPARAM data)
{
    var mi = new MONITORINFO
    {
        cbSize = (uint)Marshal.SizeOf(typeof(MONITORINFO))
    };
    if (Windows.Win32.PInvoke.GetMonitorInfo(monitor, ref mi))
    {

    }
    return true;
}

You have noticed that we’ve set the size of the structure before passing it to the function. This is common to many WinApi functions and forgetting to set this member or setting it with a wrong value is a common source of bugs.

MONITORINFO is declared in Windows.Win32.Graphics.Gdi, which is included in the usings for the file. Now, mi has the data for the monitor:

internal partial struct MONITORINFO
{
	internal uint cbSize;
	internal winmdroot.Foundation.RECT rcMonitor;
	internal winmdroot.Foundation.RECT rcWork;
	internal uint dwFlags;
}

But it doesn’t have the name of the monitor. This was solved by using the structure MONITORINFOEX, which has the name of the monitor. There is a catch, here: although GetMonitorInfo has an overload that uses the MONITORINFOEX structure, it’s not declared in CsWin32, so we must do a trick, here:

private unsafe BOOL enumProc(HMONITOR monitor, HDC hdc, RECT* clipRect, LPARAM data)
{
    var mi = new MONITORINFOEXW();
    mi.monitorInfo.cbSize = (uint)Marshal.SizeOf(typeof(MONITORINFOEXW));
    
    if (Windows.Win32.PInvoke.GetMonitorInfo(monitor, (MONITORINFO*) &mi))
    {

    }
    return true;
}

MONITORINFOEX is not declared automatically, you must use the explicit wide version, MONITORINFOEXW and add the impport to NativeMethods.txt. To use it, you must create the structure, initialize it and then cast the pointer to a pointer of MONITORINFO. It’s not the most beautiful code, but it works. Now we have the code to enumerate the displays:

public class DisplayList
{
    private List<Display> _displays = new List<Display>();

    public DisplayList()
    {
        QueryDisplayDevices();
    }

    public List<Display> Displays => _displays;

    private unsafe void QueryDisplayDevices()
    {
        PInvoke.EnumDisplayMonitors(null, null, enumProc, IntPtr.Zero);
    }

    private unsafe BOOL enumProc(HMONITOR monitor, HDC hdc, RECT* clipRect, LPARAM data)
    {
        var mi = new MONITORINFOEXW();
        mi.monitorInfo.cbSize = (uint)Marshal.SizeOf(typeof(MONITORINFOEXW));

        if (PInvoke.GetMonitorInfo(monitor, (MONITORINFO*)&mi))
        {
            var display = new Display(mi.szDevice.ToString(),
                new Rect(mi.monitorInfo.rcMonitor.left, mi.monitorInfo.rcMonitor.top, 
                    mi.monitorInfo.rcMonitor.Width, mi.monitorInfo.rcMonitor.Height),
                new Rect(mi.monitorInfo.rcWork.left, mi.monitorInfo.rcWork.top, 
                    mi.monitorInfo.rcWork.Width, mi.monitorInfo.rcWork.Height),
                1);
            _displays.Add(display);
        }
        return true;
    }
}

private void InitializeDisplayCanvas()
{
    var displayList = new DisplayList();
    _displays = displayList.Displays;
    InitializeCanvasWithDisplays();
}

private void InitializeCanvasWithDisplays()
{
    var minX = 0;
    var minY = 0;
    var maxX = 0;
    var maxY = 0;
    foreach (var display in _displays)
    {
        if (minX > display.WorkingArea.X)
            minX = display.WorkingArea.X;
        if (minY > display.WorkingArea.Y)
            minY = display.WorkingArea.Y;
        if (maxX < display.WorkingArea.X + display.WorkingArea.Width)
            maxX = display.WorkingArea.X + display.WorkingArea.Width;
        if (maxY < display.WorkingArea.Y + display.WorkingArea.Height)
            maxY = display.WorkingArea.Y + display.WorkingArea.Height;
    }
    DisplayCanvas.Width = maxX - minX;
    DisplayCanvas.Height = maxY - minY;
    DisplayCanvas.RenderTransform = new TranslateTransform(-minX, -minY);
    var background = new System.Windows.Shapes.Rectangle
    {
        Width = DisplayCanvas.Width,
        Height = DisplayCanvas.Height,
        Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(1, 242, 242, 242)),
    };
    Canvas.SetLeft(background, minX);
    Canvas.SetTop(background, minY);
    DisplayCanvas.Children.Add(background);
    var numDisplay = 0;
    foreach (var display in _displays)
    {
        numDisplay++;
        var border = new Border
        {
            Width = display.WorkingArea.Width,
            Height = display.WorkingArea.Height,
            Background = System.Windows.Media.Brushes.DarkGray,
            CornerRadius = new CornerRadius(30)
        };
        var text = new TextBlock
        {
            Text = numDisplay.ToString(),
            FontSize = 200,
            FontWeight = FontWeights.Bold,
            HorizontalAlignment = System.Windows.HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center,
        };
        border.Child = text;
        Canvas.SetLeft(border, display.WorkingArea.X);
        Canvas.SetTop(border, display.WorkingArea.Y);
        DisplayCanvas.Children.Add(border);
    }
}
private void Button_Click(object sender, RoutedEventArgs e)
{
    var display = _displays[0];
    var window = new NewWindow
    {
        Top = display.Bounds.Y + (display.Bounds.Height - 200) / display.ScalingFactor / 2,
        Left = display.Bounds.X + (display.Bounds.Width - 200) / display.ScalingFactor / 2,
    };
    window.Show();
}

If you run this code, you’ll get the same result we’ve got with the previous version, but at least we don’t have to include WinForms here. But we can go a step further and get the scale for the monitors. For that, we must use the EnumDisplaySettings function, like this:

if (PInvoke.GetMonitorInfo(monitor, (MONITORINFO*)&mi))
{
    var dm = new DEVMODEW
    {
        dmSize = (ushort)Marshal.SizeOf(typeof(DEVMODEW))
    };
    PInvoke.EnumDisplaySettings(mi.szDevice.ToString(), ENUM_DISPLAY_SETTINGS_MODE.ENUM_CURRENT_SETTINGS, ref dm);

    var scalingFactor = Math.Round((double)dm.dmPelsWidth / mi.monitorInfo.rcMonitor.Width, 2);
    var display = new Display(mi.szDevice.ToString(),
        new Rect(mi.monitorInfo.rcMonitor.left, mi.monitorInfo.rcMonitor.top, 
            (int)(mi.monitorInfo.rcMonitor.Width * scalingFactor), (int)(mi.monitorInfo.rcMonitor.Height * scalingFactor)),
        new Rect(mi.monitorInfo.rcWork.left, mi.monitorInfo.rcWork.top, 
            (int)(mi.monitorInfo.rcWork.Width * scalingFactor), (int)(mi.monitorInfo.rcWork.Height * scalingFactor)),
        scalingFactor);
    _displays.Add(display);
}

Now, if you run the code, you’ll see that it runs fine and positions the window in the center of the display.

We now have a WPF application that can detect all installed displays and position a window correctly in any display. The key to that is, besides using the Win32 API to get the display information, to use the App Manifest dpiAwareness setting to Unaware. If you change to any other setting, you will get the wrong positions, because the scaling factors will only be correct when the Unaware setting is used.

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

When you are using the MVVM pattern, at some time, you have to send data between ViewModels. For example, a detail ViewModel must tell the collection ViewModel that the current item should be deleted, or when you have a main view that opens details views and keeps track of them and must be acknowledged of any of them closing.
This is a very common pattern and usually is solved by coupling the two ViewModels.
That’s a solution, but not the best one, because coupling makes difficult maintenance and testing. For example, we’ll use the WPF project at https://github.com/bsonnino/MessengerToolkit/tree/Original.

This is a WPF project with a main window that shows a grid with all the customers:

When you click the button at the right, it opens a secondary window with the details:

This project is composed by two ViewModels, MainViewModel and CustomerViewModel. MainViewModel serves the main view and performs all actions for the buttons: Filter the data, Add a new customer and Save the data:

public partial class MainViewModel : ObservableObject
{
    private readonly ICustomerRepository _customerRepository;
    private readonly INavigationService _navigationService;
    
    public MainViewModel(ICustomerRepository customerRepository, INavigationService navigationService)
    {
        _customerRepository = customerRepository ?? 
                              throw new ArgumentNullException("customerRepository");
        Customers = new ObservableCollection<CustomerViewModel>(
            _customerRepository.Customers.Select(c => new CustomerViewModel(c)));
        _navigationService = navigationService;
    }

    [ObservableProperty]
    private ObservableCollection<CustomerViewModel> _customers;

    [ObservableProperty]
    private int _windowCount;

    [RelayCommand]
    private void Add()
    {
        var customer = new Customer();
        _customerRepository.Add(customer);
        var vm = new CustomerViewModel(customer);
        Customers.Add(vm);
        _navigationService.Navigate(vm);
    }

    [RelayCommand]
    private void Save()
    {
        _customerRepository.Commit();
    }

    [RelayCommand]
    private void Search(string textToSearch)
    {
        var coll = CollectionViewSource.GetDefaultView(Customers);
        if (!string.IsNullOrWhiteSpace(textToSearch))
            coll.Filter = c => ((CustomerViewModel)c).Country?.ToLower().Contains(textToSearch.ToLower()) == true;
        else
            coll.Filter = null;
    }

    [RelayCommand]
    private void ShowDetails(CustomerViewModel vm)
    {
        _navigationService.Navigate(vm);
        WindowCount++;
    }
}

It uses the features available in version 8 of the MVVM toolkit. In this code, we can see two things:

  • The ViewModel maintains the open windows count. When you click on the button to show the details, it will increase the window count. The problem here is to decrease the count once the window is closed. Right now, the count only increases 😃
  • To open the detail window, we could use something like:
private void ShowDetails(CustomerViewModel vm)
{
    var detailWindow = new Detail { DataContext = vm };
    detailWindow.Show();
    WindowCount++;
}

This approach has two flaws:

  • We are coupling the ViewModel to the Detail view
  • We are calling View details in the ViewModel

This makes this code to be completely untestable and defeats all purpose of the MVVM pattern. So, we must find another solution. What I devised is a NavigationService, that will open a Window, depending on the type of the ViewModel that is passed to the Navigate method. This service is very simple, and has only one method,Navigate:

public interface INavigationService
{
    void Navigate(object arg);
}

public class NavigationService : INavigationService
{
    private readonly Dictionary<Type, Type> viewMapping = new()
    {
        [typeof(MainViewModel)] = typeof(MainWindow),
        [typeof(CustomerViewModel)] = typeof(Detail),
    };

    public void Navigate(object arg)
    {
        Type vmType = arg.GetType();
        if (viewMapping.ContainsKey(vmType))
        {
            var windowType = viewMapping[vmType];
            var window = (System.Windows.Window)Activator.CreateInstance(windowType);
            window.DataContext = arg;
            window.Show();
        }
    }
}

We’ve defined an interface, INavigationService, and created a class that implements it, NavigationService. This class has a dictionary with all the ViewModel types that have a corresponding window type, with their corresponding window type as the value of the item.

When we call Navigate and pass the instance of the ViewModel, the method will check its type, verify if it exists in the dictionary and instantiate the window, setting the VM as its DataContext and opening the Window. That way, we decouple the ViewModel from the views. The navigation service is injected in the constructor of MainViewModel by the use of dependency injection.

In App.xaml.cs we are registering the services and the VM. That way, we get the right data injected to the main VM:

public IServiceProvider Services { get; }

private static IServiceProvider ConfigureServices()
{
    var services = new ServiceCollection();

    services.AddSingleton<INavigationService, NavigationService>();
    services.AddSingleton<ICustomerRepository, CustomerRepository>();
    services.AddSingleton<MainViewModel>();

    return services.BuildServiceProvider();
}

One note is ShowDetails, which in fact is a command that should be sent to the CustomerViewModel, because it’s tied to every CustomerViewModel in the grid. What we did is to tie it to the ViewModel of the main view with:

<DataGridTemplateColumn>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button Command="{Binding DataContext.ShowDetailsCommand, 
                RelativeSource={RelativeSource AncestorType=Window}}" 
                    CommandParameter="{Binding}" ToolTip="Details">
                <TextBlock Text="" FontFamily="Segoe UI Symbol" />
            </Button>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

We set the command to ShowDetailsCommand in the datacontext of the parent window, and pass the current CustomerViewModel as a parameter. That suffices to do the trick.

Now, onto our problems:

  • The Window Closing event is just that – an event, not a command and there is no direct way to handle it in the ViewModel
  • Even if we can handle it in the ViewModel, there is no direct way to warn the main viewmodel about the change
  • When we click the Remove button in the Detail view, we cannot remove the item from the list, because the list is on the Main ViewModel, which is not accessible from the Customer ViewModel

For the first problem, we could handle the Closing event in the code behind of the Detail view:

private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
    var vm = DataContext as CustomerViewModel;
    vm.ClosingCommand.Execute(null);
}

or, better, send the closing signal directly to the main viewmodel:

private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
    var vm = App.Current.MainVM;
    vm.ClosingCommand.Execute(null);
}

This would work fine, but purists would say that it’s a code smell. So, let’s do it in the MVVM way. For that, we must install the Microsoft.Xaml.Behaviors.WPF NuGet package, that has some behaviors we will need in the detail window:

<Window x:Class="CustomerApp.Detail"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
        mc:Ignorable="d"
        Height="440"
        Width="520"
        Background="AliceBlue">
    <b:Interaction.Triggers>
        <b:EventTrigger EventName="Closing">
            <b:InvokeCommandAction Command="{Binding ClosingCommand}" />
        </b:EventTrigger>
    </b:Interaction.Triggers>

There, we have Interaction.Triggers, to add the triggers we want. We want to use the EventTrigger, that is triggered whe an event is fired. In our case, it’s the Closing event. When it’s fired, it will invoke the command ClosingCommand in the detail window. Problem solved. No more code behind.

To solve the second and third problem, we would have to couple our Detail ViewModel to the Main ViewModel and have a variable that stores its instance. One way would be to pass the VM as parameter:

private readonly MainViewModel _mainvm;

public CustomerViewModel(Customer customer, MainViewModel mainvm)
{
    _customer = customer;
    _mainvm = mainvm;
    CustomerId = _customer.CustomerId;
    CompanyName = _customer.CompanyName;
    ContactName = _customer.ContactName;
    ContactTitle = _customer.ContactTitle;
    Address = _customer.Address;
    City = _customer.City;
    Region = _customer.Region;
    PostalCode = _customer.PostalCode;
    Country = _customer.Country;
    Phone = _customer.Phone;
    Fax = _customer.Fax;
}

One other way would be to get the App property:

private readonly MainViewModel _mainvm = App.Current.MainVM;

or to use the Service Locator to get the instance:

private readonly MainViewModel _mainvm = (MainViewModel)App.Current.Services.GetService(typeof(MainViewModel));

No matter with way we are using it, we are coupling the two viewmodels and that will make testing difficult. Passing the VM as a parameter for the constructor will be the more testable way, the other two would get us in trouble: we should have an App created for the second option and have an App created and a Service Locator in place to get our instance. But wouldn’t it be better if we could get rid of the instance of Main ViewModel and do not have them coupled?

In fact there is: Messages. Messaging is a mechanism that decouples the sender and receiver of a message, there is not even need to have a receiver for the message, or there may be many receivers from it – the sender doesn’t care.

The messenger is based on the Mediator pattern, where the Messenger class acts as the mediator for the messages. The potential receivers subscribe for receiving some kind of messages and, when some sender sends a message, the messenger will send it to the subscribers that are willing to receive that kind of message.

In the MVVM Toolkit, you can define messengers that implement the IMessenger interface, but the class WeakReferenceMessenger exposes a Default property, which offers a thread safe implementation for this interface, which makes it easier to implement. This class has a Register method, which will register the client for some message type and will pass the callback function that will be called when a message of the desired type is received. If you wat toknow more about that, you can take a look at https://docs.microsoft.com/en-us/windows/communitytoolkit/mvvm/messenger.

For our needs, we have to define two types of different messages: a message for when a customer should be deleted and the other one, when the window is closed:

public class WindowClosedMessage: ValueChangedMessage<CustomerViewModel>
{
    public WindowClosedMessage(CustomerViewModel vm) : base(vm)
    {

    }
}

public class ViewModelDeletedMessage : ValueChangedMessage<CustomerViewModel>
{
    public ViewModelDeletedMessage(CustomerViewModel vm) : base(vm)
    {

    }
}

The messages inherit from ValueChangedMessage. This kind of messages are sent to the recipients and the execution goes on. If, on the other way, the Sender needs an answer from the receiver, it will send a message of the RequestMessage type. In this case, the sender will wait the response that the receiver will send using the Reply method of the message. In our case, both messages don’t need a reply, so we use the ValueChangedMessage type. We must create two different types of message, because we want different processing for each one.

Now, we must send the messages in CustomerViewModel, in the Closing and Delete commands:

[RelayCommand]
private void Delete()
{
    WeakReferenceMessenger.Default.Send(new ViewModelDeletedMessage(this));
}

[RelayCommand]
private void Closing()
{
    WeakReferenceMessenger.Default.Send(new WindowClosedMessage(this));
}

The processing for these messages is done in the MainViewModel class:

public MainViewModel(ICustomerRepository customerRepository, INavigationService navigationService)
{
    _customerRepository = customerRepository ?? 
                          throw new ArgumentNullException("customerRepository");
    Customers = new ObservableCollection<CustomerViewModel>(
        _customerRepository.Customers.Select(c => new CustomerViewModel(c)));
    _navigationService = navigationService;
    WeakReferenceMessenger.Default.Register<WindowClosedMessage>(this, (r, m) =>
    {
        WindowCount--;
    });
    WeakReferenceMessenger.Default.Register<ViewModelDeletedMessage>(this, (r, m) =>
    {
        DeleteCustomer(m.Value);
    });
}

private void DeleteCustomer(CustomerViewModel vm)
{
    Customers.Remove(vm);
    var deletedCustomer = _customerRepository.Customers.FirstOrDefault(c => c.CustomerId == vm.CustomerId);
    if (deletedCustomer != null)
    {
        _customerRepository.Remove(deletedCustomer);
    }
}

Now, when you run the app, you will see that when you close the detail window, the window count decreases. We could even keep a list of open windows, with some code like this:

[ObservableProperty]
private ObservableCollection<CustomerViewModel> _openWindows = new ObservableCollection<CustomerViewModel>();

public MainViewModel(ICustomerRepository customerRepository, INavigationService navigationService)
{
    _customerRepository = customerRepository ?? 
                          throw new ArgumentNullException("customerRepository");
    Customers = new ObservableCollection<CustomerViewModel>(
        _customerRepository.Customers.Select(c => new CustomerViewModel(c)));
    _navigationService = navigationService;
    WeakReferenceMessenger.Default.Register<WindowClosedMessage>(this, (r, m) =>
    {
        WindowCount--;
        _openWindows.Remove(m.Value);
    });
    WeakReferenceMessenger.Default.Register<ViewModelDeletedMessage>(this, (r, m) =>
    {
        DeleteCustomer(m.Value);
    });
}

....

[RelayCommand]
private void ShowDetails(CustomerViewModel vm)
{
    _navigationService.Navigate(vm);
    WindowCount++;
    _openWindows.Add(vm);
}

When you click the Delete button in the detail window, the corresponding item is deleted in the main list, but the window remains open, and it should not ne there anymore, as the corresponding customer does not exist anymore. We could use some code behind to close the window, but I’d prefer another approach: change the navigation service to allow closing the windows. For that, we should keep the lists of open windows and have another method, Close, to close the selected window:

public interface INavigationService
{
    void Navigate(object arg);
    void Close(object arg);
}

public class NavigationService : INavigationService
{
    private readonly Dictionary<Type, Type> viewMapping = new()
    {
        [typeof(MainViewModel)] = typeof(MainWindow),
        [typeof(CustomerViewModel)] = typeof(Detail),
    };

    private readonly Dictionary<object, List<System.Windows.Window>> _openWindows = new();

    public void Navigate(object arg)
    {
        Type vmType = arg.GetType();
        if (viewMapping.ContainsKey(vmType))
        {
            var windowType = viewMapping[vmType];
            var window = (System.Windows.Window)Activator.CreateInstance(windowType);
            window.DataContext = arg;
            if (!_openWindows.ContainsKey(arg))
            {
                _openWindows.Add(arg, new List<System.Windows.Window>());
            }
            _openWindows[arg].Add(window);
            window.Show();
        }
    }

    public void Close(object arg)
    {
        if (_openWindows.ContainsKey(arg))
        {
            foreach(var window in _openWindows[arg])
            {
                window.Close();
            }
        }
    }
}

In this case, we keep a list of windows open for each customer. If we try to open another window for the same customer, the corresponding window will be added to the corresponding list. When the close method is called, all windows for that customer will be closed at once. The DeleteCustomer in MainViewModel becomes

private void DeleteCustomer(CustomerViewModel vm)
{
    Customers.Remove(vm);
    var deletedCustomer = _customerRepository.Customers.FirstOrDefault(c => c.CustomerId == vm.CustomerId);
    if (deletedCustomer != null)
    {
        _customerRepository.Remove(deletedCustomer);
    }
    _navigationService.Close(vm);
}

And now everything works fine.

But, what about testing? We did all this to ease testing, let’s test the VMs. In the Test project, let’s create a class CustomerViewModelTests.cs and add some tests:

[TestClass]
public class CustomerViewModelTests
{
    [TestMethod]
    public void Constructor_NullCustomer_ShouldThrow()
    {
        Action act = () => new CustomerViewModel(null);

        act.Should().Throw<ArgumentNullException>()
            .Where(e => e.Message.Contains("customer"));
    }
}

If we run this test, we’ll see it doesn’t pass. We haven’t made a check for null customers, so we have to change that in the code:

public CustomerViewModel(Customer customer)
{
    if (customer == null)
        throw new ArgumentNullException("customer");
    _customer = customer;
    CustomerId = _customer.CustomerId;
    CompanyName = _customer.CompanyName;
    ContactName = _customer.ContactName;
    ContactTitle = _customer.ContactTitle;
    Address = _customer.Address;
    City = _customer.City;
    Region = _customer.Region;
    PostalCode = _customer.PostalCode;
    Country = _customer.Country;
    Phone = _customer.Phone;
    Fax = _customer.Fax;
}

The test now passes and we can continue. For the next test, I’d like to have a customer filled with data, and FakeItEasy (which we are using for our test mocks) fills the data with nulls and that’s not what we want. In this article I show how to use Bogus to create fake data. We can use AutoBogus.FakeItEasy to integrate it with FakeItEasy. Install the package AutoBogus.FakeItEasy and let’s create the second test

[TestMethod]
public void Constructor_ShouldSetFields()
{
    var customer = AutoFaker.Generate<Customer>();
    var customerVM = new CustomerViewModel(customer);
    customerVM.CustomerId.Should().Be(customer.CustomerId);
    customerVM.CompanyName.Should().Be(customer.CompanyName);
    customerVM.ContactName.Should().Be(customer.ContactName);
    customerVM.ContactTitle.Should().Be(customer.ContactTitle);
    customerVM.Address.Should().Be(customer.Address);
    customerVM.City.Should().Be(customer.City);
    customerVM.Region.Should().Be(customer.Region);
    customerVM.PostalCode.Should().Be(customer.PostalCode);
    customerVM.Country.Should().Be(customer.Country);
    customerVM.Phone.Should().Be(customer.Phone);
    customerVM.Fax.Should().Be(customer.Fax);
}

For the third test, we will be testing the Delete command, and we want to check if if sends the correct message. For that, we must install the _Community.Toolkit.MVVM in the test project. Then, we can create the tests for the two commands:

[TestMethod]
public void DeleteCommand_ShouldSendMessageWithVM()
{
    var customer = AutoFaker.Generate<Customer>();
    var customerVM = new CustomerViewModel(customer);
    object callbackResponse = null;
    var waitEvent = new AutoResetEvent(false);
    WeakReferenceMessenger.Default.Register<ViewModelDeletedMessage>(this, (r, m) =>
    {
        callbackResponse = customerVM;
        waitEvent.Set();
    });
    customerVM.DeleteCommand.Execute(null);
    waitEvent.WaitOne(100);
    callbackResponse.Should().Be(customerVM);
}

[TestMethod]
public void CloseCommand_ShouldSendMessageWithVM()
{
    var customer = AutoFaker.Generate<Customer>();
    var customerVM = new CustomerViewModel(customer);
    object callbackResponse = null;
    var waitEvent = new AutoResetEvent(false);
    WeakReferenceMessenger.Default.Register<WindowClosedMessage>(this, (r, m) =>
    {
        callbackResponse = customerVM;
        waitEvent.Set();
    });
    customerVM.ClosingCommand.Execute(null);
    waitEvent.WaitOne(100);
    callbackResponse.Should().Be(customerVM);
}

These two tests have a particularity: the result is set in the callback, so we may not have it immediately, so we can have a flaky test if we don’t wait some time before testing the value – sometimes it may pass and sometimes not. For this issue, I’ve used an AutoResetEvent to be set when the callback is called and wait 100ms to see if it’s called. That makes the trick.

For the MainViewModel tests, we can do this:

[TestClass]
public class MainViewModelTests
{
    [TestMethod]
    public void Constructor_NullRepository_ShouldThrow()
    {
        Action act = () => new MainViewModel(null, null);

        act.Should().Throw<ArgumentNullException>()
            .Where(e => e.Message.Contains("customerRepository"));
    }

    [TestMethod]
    public void Constructor_Customers_ShouldHaveValue()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);

        vm.Customers.Count.Should().Be(customers.Count);
    }

    [TestMethod]
    public void AddCommand_ShouldAddInRepository()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        vm.AddCommand.Execute(null);
        A.CallTo(() => repository.Add(A<Customer>._)).MustHaveHappened();
    }

    [TestMethod]
    public void AddCommand_ShouldAddInCollection()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        vm.AddCommand.Execute(null);
        vm.Customers.Count.Should().Be(11);
    }

    [TestMethod]
    public void AddCommand_ShouldCallNavigate()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        vm.AddCommand.Execute(null);
        A.CallTo(() => navigationService.Navigate(A<CustomerViewModel>.Ignored)).MustHaveHappened();
    }

    [TestMethod]
    public void SaveCommand_ShouldCommitInRepository()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var vm = new MainViewModel(repository, navigationService);
        vm.SaveCommand.Execute(null);
        A.CallTo(() => repository.Commit()).MustHaveHappened();
    }

    [TestMethod]
    public void SearchCommand_WithText_ShouldSetFilter()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        vm.SearchCommand.Execute("text");
        var coll = CollectionViewSource.GetDefaultView(vm.Customers);
        coll.Filter.Should().NotBeNull();
    }

    [TestMethod]
    public void SearchCommand_WithoutText_ShouldSetFilter()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        vm.SearchCommand.Execute("");
        var coll = CollectionViewSource.GetDefaultView(vm.Customers);
        coll.Filter.Should().BeNull();
    }

    [TestMethod]
    public void ShowDetailsCommand_ShouldCallNavigate()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        A.CallTo(() => navigationService.Navigate(customerVM)).MustHaveHappened();
    }

    [TestMethod]
    public void ShowDetailsCommand_ShouldIncrementWindowCount()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        vm.WindowCount.Should().Be(1);
    }

    [TestMethod]
    public void ShowDetailsCommand_ShouldAddToOpenWindows()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        vm.OpenWindows.Count.Should().Be(1);
        vm.OpenWindows[0].Should().Be(customerVM);
    }

    [TestMethod]
    public void CustomerCloseCommand_ShouldDecreaseWindowCount()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        customerVM.ClosingCommand.Execute(null);
        vm.WindowCount.Should().Be(0);
    }

    [TestMethod]
    public void CustomerCloseCommand_ShouldRemoveFromOpenWindows()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        customerVM.ClosingCommand.Execute(null);
        vm.OpenWindows.Count.Should().Be(0);
    }

    [TestMethod]
    public void CustomerDeleteCommand_ShouldCallNavigationClose()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        customerVM.DeleteCommand.Execute(null);
        A.CallTo(() => navigationService.Close(customerVM)).MustHaveHappened();
    }

    [TestMethod]
    public void CustomerDeleteCommand_ShouldRemoveCustomer()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        customerVM.DeleteCommand.Execute(null);
        vm.Customers.Count.Should().Be(9);
        vm.Customers.Should().NotContain(customerVM);
    }

    [TestMethod]
    public void CustomerDeleteCommand_ShouldCallRemoveFromRepository()
    {
        var repository = A.Fake<ICustomerRepository>();
        var navigationService = A.Fake<INavigationService>();
        var customers = A.CollectionOfFake<Customer>(10);
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm = new MainViewModel(repository, navigationService);
        CustomerViewModel customerVM = vm.Customers[1];
        vm.ShowDetailsCommand.Execute(customerVM);
        customerVM.DeleteCommand.Execute(null);
        A.CallTo(() => repository.Remove(A<Customer>.Ignored)).MustHaveHappened();
    }
}

If you run the tests, all will pass.

As you can see, we have decoupled the two ViewModels with the Messenger implemented in the MVVM Toolkit, our code is completely testable and it runs fine. You can check this code here.

We can still go one step further (yes, we can always do that 😃): inject the IMessenger in the constructor of the ViewModels.

In App.xaml.cs we add the registration for IMessenger:

private static IServiceProvider ConfigureServices()
{
    var services = new ServiceCollection();

    services.AddSingleton<INavigationService, NavigationService>();
    services.AddSingleton<ICustomerRepository, CustomerRepository>();
    services.AddSingleton<IMessenger>(WeakReferenceMessenger.Default);
    services.AddSingleton<MainViewModel>();

    return services.BuildServiceProvider();
}

And inject it in the constructor of MainViewModel and CustomerViewModel:

public MainViewModel(ICustomerRepository customerRepository, 
    INavigationService navigationService,
    IMessenger messenger)
{
    _customerRepository = customerRepository ?? 
                          throw new ArgumentNullException("customerRepository");
    _navigationService = navigationService ?? 
        throw new ArgumentNullException("navigationService"); 
    _messenger = messenger ??
        throw new ArgumentNullException("messenger");
    Customers = new ObservableCollection<CustomerViewModel>(
        _customerRepository.Customers.Select(c => new CustomerViewModel(c, messenger)));
    messenger.Register<WindowClosedMessage>(this, (r, m) =>
    {
        WindowCount--;
        _openWindows.Remove(m.Value);
    });
    messenger.Register<ViewModelDeletedMessage>(this, (r, m) =>
    {
        DeleteCustomer(m.Value);
    });
}
private readonly IMessenger _messenger;

public CustomerViewModel(Customer customer, IMessenger messenger)
{
    if (customer == null)
        throw new ArgumentNullException("customer");
    if (messenger == null)
        throw new ArgumentNullException("messenger");
    _messenger = messenger;
    _customer = customer;
    CustomerId = _customer.CustomerId;
    CompanyName = _customer.CompanyName;
    ContactName = _customer.ContactName;
    ContactTitle = _customer.ContactTitle;
    Address = _customer.Address;
    City = _customer.City;
    Region = _customer.Region;
    PostalCode = _customer.PostalCode;
    Country = _customer.Country;
    Phone = _customer.Phone;
    Fax = _customer.Fax;
}

We have decoupled the ViewModels from the default messenger. There are some changes to do in the code and in the tests, but you can check them in the final project, here. The code now is decoupled, testable and works fine 😃

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

Sometime ago, I’ve written this article introducing the MVVM Community Toolkit and developing a CRUD application to show how to use the MVVM pattern with the Community toolkit.

The time has passed and version 8.0 of the MVVM Community toolkit has been released and, with it, a rewrite using incremental generators. This may seem a minor update, but it’s a huge move, as the MVVM pattern is full of boilerplate: implementing the INotifyPropertyChanged interface for the viewmodels, binding commands that implement the ICommand interface, using the RelayCommand class and implementing observable properties that raise the PropertyChanged event when changed. All that make the code cumbersome and repetitive, but that’s what we had to do to implement the MVVM pattern in our apps. Until now.

With the use of source generators, the toolkit removes a lot of the boilerplate and makes the code easier to create and read. In this article, we’ll take the project that we developed in the previous article and will change it to use the new toolkit.

You can clone the code in https://github.com/bsonnino/MvvmApp and open the CustomerApp – Mvvm app in Visual Studio 2022. As the original project is targeted to .NET 5.0, we’ll upgrade it to .NET 6.0. This is an easy task: just open CustomerApp.csproj and change the TargetFramework to .net6.0-windows:

<PropertyGroup>
	<OutputType>WinExe</OutputType>
	<TargetFramework>net6.0-windows</TargetFramework>
	<UseWPF>true</UseWPF>
	<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
</PropertyGroup>

Do the same with CustomerApp.Tests.csproj. There is no need to do it on the CustomerLib project, as it’s a Net Standard project.

The next step is to update the NuGet packages. The package Microsoft.Extensions.DependencyInjection must be upgraded to version 6.0.0. If you try to upgrade the Microsoft.Toolkit.Mvvm package, you’ll see that there is no upgrade to version 8.0. That’s because the package name has changed and you must uninstall this one and install the CommunityToolkit.Mvvm package.

Now, the project is ready to build and, when you do that, you’ll see that it doesn’t work 😦. This is because the namespaces have changed and we need to update the using clauses in MainViewModel.cs. We have to remove the old using clauses and replace with the new ones:

using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

Once you do that and recompile the project, you’ll see that it compiles fine and runs in the same way the original project did. Not bad for a project upgraded from .NET 5 to .NET 6, with a new version of the MVVM framework.

But did I say that with the new toolkit you can remove the boilerplate? We can start doing that now. The first thing is to remove the properties and their getters and setters. We decorate the _selectedCustomer field with the [ObservableProperty] attribute:

[ObservableProperty]
private Customer _selectedCustomer;

When you do that, you’ll see that the class name has a red underline:

That’s because when we add the attribute, the toolkit generates a partial class, and we need to add the partial keyword to the class:

public partial class MainViewModel : ObservableObject

When we add that, SelectedCustomer is underlined:

That’s because we have declared the property in our code and the toolkit has also declared the same property in the generated code. We can now remove the property declaration from our code:

public Customer SelectedCustomer
{
    get => _selectedCustomer;
    set
    {
        SetProperty(ref _selectedCustomer, value);
        RemoveCommand.NotifyCanExecuteChanged();
    }
}

As you can see from the code we are removing, the setter notifies the RemoveCommand. To have the same effect, we add the NotifyCanExecuteChangedFor attribute to the field:

[ObservableProperty]
[NotifyCanExecuteChangedFor(nameof(RemoveCommand))]
private Customer _selectedCustomer;

If you compile the code, you will see that it runs the same way it did before, and we are still using the property name (SelectedCommand) in the commands, even if it’s not explicitly defined in the code. That’s because the toolkit is generating the property in its partial part of the class.

The next steps are to remove the boilerplate from the commands in the code. For that, we must remove all declarations and leave only the command methods, changing their name to the command name (without Command at the end) and adding the [RelayCommand] attribute for the method. For the Add command, we have to change this code:

public IRelayCommand AddCommand { get; }

private void DoAdd()
{
    var customer = new Customer();
    _customerRepository.Add(customer);
    SelectedCustomer = customer;
    OnPropertyChanged("Customers");
}

To this code:

[RelayCommand]
private void Add()
{
    var customer = new Customer();
    _customerRepository.Add(customer);
    SelectedCustomer = customer;
    OnPropertyChanged("Customers");
}

We also have to remove the initialization code:

AddCommand = new RelayCommand(DoAdd);
RemoveCommand = new RelayCommand(DoRemove, () => SelectedCustomer != null);
SaveCommand = new RelayCommand(DoSave);
SearchCommand = new RelayCommand<string>(DoSearch);

If you notice the removed code, you’ll see that the RemoveCommand has a CanExecute method. To solve that, we have to have to add a parameter to RelayCommand:

[RelayCommand(CanExecute = "HasSelectedCustomer")]
private void Remove()
{

The parameter points to HasSelectedCustomer, a method that should be defined in the code:

private bool HasSelectedCustomer() => SelectedCustomer != null;

With that, we have completed our code and now the project runs in the same way it did before. The code is simpler and with no boilerplate:

public partial class MainViewModel : ObservableObject
{
    private readonly ICustomerRepository _customerRepository;

    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(RemoveCommand))]
    private Customer _selectedCustomer;

    public MainViewModel(ICustomerRepository customerRepository)
    {
        _customerRepository = customerRepository ??
                              throw new ArgumentNullException("customerRepository");
    }

    public IEnumerable<Customer> Customers => _customerRepository.Customers;

    [RelayCommand]
    private void Add()
    {
        var customer = new Customer();
        _customerRepository.Add(customer);
        SelectedCustomer = customer;
        OnPropertyChanged("Customers");
    }

    [RelayCommand(CanExecute = "HasSelectedCustomer")]
    private void Remove()
    {
        if (SelectedCustomer != null)
        {
            _customerRepository.Remove(SelectedCustomer);
            SelectedCustomer = null;
            OnPropertyChanged("Customers");
        }
    }

    private bool HasSelectedCustomer() => SelectedCustomer != null;

    [RelayCommand]
    private void Save()
    {
        _customerRepository.Commit();
    }

    [RelayCommand]
    private void Search(string textToSearch)
    {
        var coll = CollectionViewSource.GetDefaultView(Customers);
        if (!string.IsNullOrWhiteSpace(textToSearch))
            coll.Filter = c => ((Customer)c).Country.ToLower().Contains(textToSearch.ToLower());
        else
            coll.Filter = null;
    }
}

As you can see, this new version brought a huge improvement. We can use the MVVM pattern with no issues, there is no extra code related to the pattern (except for the attributes) and the code is easier to read and follow. And all tests still run, with no change at all.

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

There are some times when we want to check all installed fonts in the system and test a phrase to check how does it show in the display at some size.

There are many utilities for that, but it’s always better (and most satisfying) to build your own. And, even better, you can do it in WPF with no need of writing code, just use the builtin data binding features in the markup.

To do it, just open a terminal window, and type

dotnet new wpf -o FontsList

That will create a new WPF application in the FontsList folder. Now, you can change to the FontsList folder and type code . to open VS Code in the current folder.

Once you do that, you can edit the MainWindow.xaml file and add this code:

<Window x:Class="FontsList.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:local="clr-namespace:FontsList" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Slider Minimum="5" Maximum="100" TickPlacement="BottomRight" x:Name="FontSlider" Value="48" />
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5*"/>
                <ColumnDefinition Width="0.5*"/>
            </Grid.ColumnDefinitions>
            <ListBox HorizontalAlignment="Stretch" x:Name="Listbox" Margin="0,0,5,0" 
                VerticalAlignment="Stretch" ItemsSource="{Binding Source={x:Static Fonts.SystemFontFamilies}}" 
                IsSynchronizedWithCurrentItem="True"/>
            <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="5"/>
            <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                FontFamily="{Binding Path=SelectedItem, ElementName=Listbox, Mode=Default}" 
                FontSize="{Binding Path=Value, ElementName=FontSlider}" Grid.Column="1" 
                Text="The quick brown fox jumps over the lazy dog" TextWrapping="Wrap"/>
        </Grid>
    </Grid>
</Window>

We are adding a grid with two rows. In the first row, we add the font size slider, that will be used to change the font size of the preview. In the second row, we will add another grid, with two columns: the font list and the preview.

The font list gets its items from the Windows class Fonts.SystemFontFamilies. The preview is a textbox there you can type the text you want to preview, with the FontFamily bound to the selected item of the listbox (the font you’ve selected) and the FontSize bound to the size slider.

Now we’re ready to run. No extra code is needed. Just type

dotnet run

In the terminal window and you will see the font list with a preview in the selected size:

Nice, no? Now you have your own fonts list in WPF with no code. It even has a splitter in the fonts grid, if you want to change the size of the font list and preview.

All the source code for this project is at https://github.com/bsonnino/FontsList

You have an old .NET app and would like to upgrade to .NET 6, to be up-to date with the latest features and go forward with the app.

Every time you think about it, you notice that you have no time to do it and there are more important things to do. And you see that you’re stuck with an old .NET version. But, in this case, Microsoft has helped you to be able to accomplish your New Year’s resolutions. Now, you have the .NET upgrade assistant to help you to migrate to the latest .NET version: the >NET upgrade assistant.

With it, you can migrate your old .NET app to .NET 6 with very simple steps. It may not be a full migration, but it’s a starting point, which eases a lot the migration.

The first step is have dotnet installed in your machine. If you haven’t done so, you can install it from https://dotnet.microsoft.com/en-us/download/dotnet/6.0. Once installed, you can check the installed version by opening a terminal window and  typing the dotnet --versioncommand.

Then, you should install the upgrade assistant with

dotnet tool install -g upgrade-assistant

Once installed, you can use it with

upgrade-assistant

To demonstrate the procedure, I will use the project DiskAnalisys, from https://github.com/bsonnino/DiskAnalysis. This is a .NET 4.5 project and has many features that need to be upgraded: the FolderPicker, Charts, etc. The first step is to clone the project and run the solution in Visual Studio.

When you click the start button, you will be asked for a folder to analyze and, then, a list of files will be shown, ordered by size. On the other tabs, you can see a chart for the extensions and another for the contribution of each file for the total size:

You can check the .NET version in the properties for the project:

Now we can upgrade the project. Open a terminal window, change to the solution’s directory and type

upgrade-assistant analyze diskanalysis.sln

This will show a report for the upgrade of the project:

If you want the detailed output, you can use the -v option to the command line. In the project’s folder, you can see two files, AnalysisReport.sarif, a json file with the report and upgrade-assistant.clef, a copy of what was output to the screen.

The report shows that the project can be updated, so we will update it with

upgrade-assistant upgrade diskanalysis.sln

That will show the steps that will be followed in the upgrade:

You will move from one step to the other by pressing 1. The steps are:

1. Back up project

Backup the project, so it can be used, if the upgrade fails. The program asks for the path for the backup then copies the project

2. Convert project file to SDK style

Converts the csproj file from the old style to the new style. The new file is changed to something like this:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net452</TargetFramework>
    <OutputType>WinExe</OutputType>
    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
    <UseWPF>true</UseWPF>
    <ImportWindowsDesktopTargets>true</ImportWindowsDesktopTargets>
  </PropertyGroup>
  <ItemGroup>
    <AppDesigner Include="Properties\" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="DotNetProjects.Wpf.Toolkit" Version="5.0.31" />
    <PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
    <PackageReference Include="System.Data.DataSetExtensions" Version="4.5.0" />
    <PackageReference Include="WPFFolderBrowser" Version="1.0.2" />
  </ItemGroup>
</Project>

3. Clean up NuGet package references

This task will clean up the NuGet package references and add the reference to Microsoft.DotNet.UpgradeAssistant.Extensions.Default.Analyzers

4. Update TFM

This task will change the target framework in the csproj to net6.0-windows

5. Update NuGet Packages

This step will check if there are updates in the NuGet packages, update them and add a reference to Microsoft.Windows.Compatibility in the csproj

When you press 1 to go to the next step, the following steps are skipped

6. Add template files
7. Upgrade app config files
a. Convert Application Settings
b. Convert Connection Strings
c. Disable unsupported configuration sections
8. Update source code

a. Apply fix for UA0002: Types should be upgraded
b. Apply fix for UA0012: ‘UnsafeDeserialize()’ does not exist

And the conversion is finished. You must only press 1 to go to the last step:

9. Move to next project

There were no changes in the source code, just in the csproj. If you have your project still opened in Visual Studio, it will ask you to reload it. If you reload it, you will see that it changed to .NET 6 (if you are using VS 2019 you won’t see that, because VS 2019 doesn’t support .NET 6). If you go to the Solution Explorer, you will see that there are two warnings in the dependency packages:

The WPF Toolkit and the WPF Folder Browser packages don’t have the versions for .NET 6, but we’ll run the project to see if it runs fine. Once you run it, you can see that it woks fine, the same way as it did originally. But this time, you get a .NET 6 app running.

We can fix the issues and have a full .NET 6 app running with some extra effort. The WPF Toolkit has been updated and you can use the new packages from https://github.com/dotnetprojects/WpfToolkit. You just have to remove the old package and add the package DotNetProjects.WPF.Toolkit.DataVisualization. For the WPF Folder Browser, you don’t have an updated package, but you can use the source code from https://github.com/McNeight/WpfFolderBrowser.

Clone the repository, run the Upgrade Assistant in the project, to convert it to .NET 6 the same way you did with the main project and add it to the solution. Remove the WPFFolderBrowser package form the project and add a reference for the modified project. When you rebuild the solution, you will get an error Error CA0052 : No targets were selected.

You must edit the project file and remove this property group:

<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
   <RunCodeAnalysis>true</RunCodeAnalysis>
   <CodeAnalysisRules>
   </CodeAnalysisRules>
   <CheckForOverflowUnderflow>true</CheckForOverflowUnderflow>
   <CodeAnalysisRuleSet>AllRules.ruleset</CodeAnalysisRuleSet>
 </PropertyGroup>

Once you do that, the project compiles fine, but when you try to run it, you get an error saying that WPFFolderBrowserDialog was not found. The only change here is to change the namespace in MainWindow.xaml.cs to WpfFolderBrowser.

Now you can run the project, it runs fine and there are no more compatibility issues.

As you can see, the upgrade assistant eases the migration to .NET 6 a lot. Sometimes, you will need an extra effort to have your app running, but it’s surely easier than doing it by hand. This is a nice step to evolve your apps and port them to the latest version of .NET.

The full code for this article is at https://github.com/bsonnino/UpgradeAssistant

Times have changed and Microsoft is not the same: Edge, the new Microsoft browser has been remodeled and now it’s using the Chromium engine, an open source browser engine developed by Google.

With that, it has also changed the way you can develop browser apps – you will be able to use the same browser engine Microsoft uses in its browser to develop your browser apps. In order to do that, you will have to use the new WebView control. The new WebView control is not tied to a specific Windows version or development platform: You can use it in any Windows version, from 7 to 10 or use it in a Win32, .NET (core or full framework) or UWP app.

This article will show how to use it and interact with it in a WPF app. We will develop a program that will search in the Microsoft docs site, so you will be able to easily search there for information.

Introduction

Using the new WebView2 control in a .NET app is very simple, it’s just a matter of adding a NuGet package and you’re already setup. In Visual Studio, create a new WPF app. Right click the dependencies node in the Solution Explorer and select “Manage NuGet Packages” , the select the Microsoft.Web.WebView2 package. Then, in MainWindow.xaml, add the main UI:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Search Text" Margin="5" VerticalAlignment="Center"/>
        <TextBox Text="" x:Name="SearchText" Margin="5" VerticalAlignment="Center"
                 Width="400" Height="30" VerticalContentAlignment="Center"/>
        <Button Content="Find" Width="65" Height="30" Margin="5" Click="ButtonBase_OnClick"/>
    </StackPanel>
    <wpf:WebView2 x:Name="WebView" Grid.Row="1" Source="" />
</Grid>

You will have to add the wpf  namespace to the xaml:

xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

As you can see, we are adding a textbox for the text to search and a button to activate the search. In the WebView control, we left the Source property blank, as we don’t want to go to a specific site. If we wanted to start with some page, we would have to fill this property. For example, if you fill the Source property with  https://docs.microsoft.com you would have something like this:

 

Navigating with the WebView

As you can see, it’s very easy to add a browser to your app, but we want to add more than a simple browsing experience. We want to make our app a custom way of browsing. To do that, we will use the following button click event handler:

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
    if (string.IsNullOrWhiteSpace(SearchText.Text))
        return;
    var searchAddress =
        $"https://docs.microsoft.com/en-us/search/?terms={HttpUtility.UrlEncode(SearchText.Text)}";
    WebView?.CoreWebView2?.Navigate(searchAddress);
}

We’ll take the text the user will want to search, create an URL for searching in the Microsoft docs website and then navigate to it. Once we do that, we can search the docs, just by typing the wanted text and clicking the button:

We can also add back and forward navigation by adding these two buttons:

<StackPanel Orientation="Horizontal" Grid.Row="0" HorizontalAlignment="Right" TextElement.FontFamily="Segoe MDL2 Assets">
    <Button Content="&amp;#xE0A6;" Width="30" Height="30" Margin="5" ToolTip="Back" Click="GoBackClick"/>
    <Button Content="&amp;#xE0AB;" Width="30" Height="30" Margin="5" ToolTip="Forward" Click="GoForwardClick"/>
</StackPanel>

The click event handler that will allow the browser to navigate to the previous or next page in history is:

private void GoBackClick(object sender, RoutedEventArgs e)
{
    if (WebView.CanGoBack)
        WebView.GoBack();
}

private void GoForwardClick(object sender, RoutedEventArgs e)
{
    if (WebView.CanGoForward)
        WebView.GoForward();
}

Once you have this code in place, you are able to use the two buttons to navigate in the browser history.

Customizing the page

One thing that bothers me in this app is the fact that we have several items in the page that don’t belong to our search: the top bar, the footer bar, the search box, and so on. Wouldn’t it be nice to clean these items from the page when we are showing it? Well, there is a way to do that, but we’ll have to resort to JavaScript to do that: when the page is loaded, we’ll inject a JavaScript script in the page that will remove the parts we don’t want. For that, we must create this code:

        async void InitializeAsync()
        {
            await WebView.EnsureCoreWebView2Async(null);
            WebView.CoreWebView2.DOMContentLoaded += CoreWebView2_DOMContentLoaded;
        }

        private async void CoreWebView2_DOMContentLoaded(object sender, CoreWebView2DOMContentLoadedEventArgs e)
        {

            await WebView.ExecuteScriptAsync(
                @"
window.onload = () => {
  var rss = document.querySelector('[data-bi-name=""search-rss-link""]');
  console.log(rss);
  if (rss)
    rss.style.display = 'none'; 
  var form = document.getElementById('facet-search-form');
  console.log(form);
  if (form)
    form.style.display = 'none';  
  var container = document.getElementById('left-container');
  console.log(container);
  if (container)
    container.style.display = 'none';  
  var hiddenClasses = ['header-holder', 'footerContainer'];
  var divs = document.getElementsByTagName('div');
  for( var i = 0; i < divs.length; i++) {
    if (hiddenClasses.some(r=> divs[i].classList.contains(r))){
      divs[i].style.display = 'none';
    }
  }
}");
        }

We have two parts in this code: initially, we ensure that the CoreWebView2 component is created and then we set a DomContentLoaded event handler, that will be called when the HTML content is loaded in the browser. In the event handler, we will inject the script and execute it with ExecuteScriptAsync. That is enough to remove the parts we don’t want from the page. The JavaScript code will retrieve the parts we want to hide and set their display style to none. This code is called from the constructor of the main window:

public MainWindow()
{
    InitializeComponent();
    InitializeAsync();
}

 

You can also see the console.log commands in the code. You can debug the JavaScript code when browsing by using the F12 key. The developer window will open in a separate window:

As you can see from the image, the top bar was removed, we now have a cleaner page. You can use the same technique to remove the context menu or add other functionality to the browser. Now we will get some extra info from the page.

Communicating between the app and the browser

When we are browsing the results page, we can get something from it. We can copy the results to the clipboard, so we can use them later. To do that we must use the communication between the app and the WebView. This is done by a messaging process. The app can send a message to the WebView, using something like

WebView?.CoreWebView2?.PostWebMessageAsString("message");

The WebView will receive the message and can process it by adding an event listener like in

window.chrome.webview.addEventListener('message', event => {
  if (event.data === 'message') {
    // process message
  }
});

When we want to send messages in the other direction, from the WebView to the app, we can send it from JavaScript, using

window.chrome.webview.postMessage(message);

It will be received by the app with an event handler like

WebView.CoreWebView2.WebMessageReceived += (s, args) =>
{
  data = args.WebMessageAsJson;
  // Process data
}

That way, we can have full communication between the app and the WebView and we can add the functionality we want: copy the results from the results page to the clipboard. The first step is to add the button to copy the results in MainWindow.xaml:

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Search Text" Margin="5" VerticalAlignment="Center"/>
    <TextBox Text="" x:Name="SearchText" Margin="5" VerticalAlignment="Center"
             Width="400" Height="30" VerticalContentAlignment="Center"/>
    <Button Content="Find" Width="65" Height="30" Margin="5" Click="ButtonBase_OnClick"/>
    <Button Content="Copy" Width="65" Height="30" Margin="5" Click="CopyClick"/>
</StackPanel>

The click event handler will send a message to the WebView:

private void CopyClick(object sender, RoutedEventArgs e)
{
    WebView?.CoreWebView2?.PostWebMessageAsString("copy");
}

We must inject some code in the web page to receive and process the message, this is done by using the AddScriptToExecuteOnDocumentCreatedAsync method to inject the code when the page is loaded, in the InitializeAsync method:

        async void InitializeAsync()
        {

            await WebView.EnsureCoreWebView2Async(null);
            WebView.CoreWebView2.DOMContentLoaded += CoreWebView2_DOMContentLoaded;
            await WebView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(@"
window.chrome.webview.addEventListener('message', event => {
  if (event.data === 'copy') {
    var results = [...document.querySelectorAll('[data-bi-name=""result""]')].map(a => {
            let aElement = a.querySelector('a');
            return {
                title: aElement.innerText,
                link: aElement.getAttribute('href')
            };
        });
    if (results.length >= 1){
      window.chrome.webview.postMessage(results);
    }
    else {
      alert('There are no results in the page');
    }
  }
});");
            WebView.CoreWebView2.WebMessageReceived += DataReceived;
        }

The JavaScript code will add the event listener, that will get all results in the page using the querySelectorAll  method, and then it will map it to an array of objects that have the title and link of the result, then will send this array to the app with postMessage. In the case that there are no results in the page, an alert message is shown. The code also sets the event handler for the WebMessageReceived event:

void DataReceived(object sender, CoreWebView2WebMessageReceivedEventArgs args)
{
    var data = args.WebMessageAsJson;
    Clipboard.SetText(data);
    MessageBox.Show("Results copied to the clipboard");
}

The handler will get the sent data with the args.WebMessageAsJson, then it will send it to the clipboard as text, where it can be copied to any program. Now, when you run the program, do a search and click the Copy  button, you will have something like this in the clipboard:

[
    {
        "title": "Getting started with WebView2 for WinForms apps - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/winforms"
    },
    {
        "title": "Microsoft Edge WebView2 Control - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/"
    },
    {
        "title": "Getting started with WebView2 for WinUI apps - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/winui"
    },
    {
        "title": "Getting started with WebView2 for WPF apps - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf"
    },
    {
        "title": "Versioning of Microsoft Edge WebView2 - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/versioning"
    },
    {
        "title": "Distribution of Microsoft Edge WebView2 apps - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution"
    },
    {
        "title": "Getting started with WebView2 for Win32 apps - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/win32"
    },
    {
        "title": "Release Notes for Microsoft Edge WebView2 for Win32, WPF, and WinForms - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/releasenotes"
    },
    {
        "title": "Use JavaScript in WebView2 apps - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/howto/js"
    },
    {
        "title": "Microsoft Edge WebView2 API Reference - Microsoft Edge Development",
        "link": "https://docs.microsoft.com/en-us/microsoft-edge/webview2/webview2-api-reference"
    }
]

Now we have an app that can browse to a page and interact with it.

Conclusion

There are many uses to this feature and the new Chromium WebView is a welcome addition to our toolbox, we can interact with the web page, retrieving and sending data to it.

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

Introduction

You have an old, legacy app (with no tests), and its age is starting to show – it’s using an old version of the .NET Framework, it’s difficult to maintain and every new feature introduced brings a lot of bugs. Developers are afraid to change it, but the users ask for new features. You are at a crossroad: throw the code and rewrite everything or refactor the code. Does this sound familiar to you ?

I’m almost sure that you’re leaning to throw the code and rewrite everything. Start fresh, use new technologies and create the wonderful app you’ve always dreamed of. But this comes with a cost: the old app is still there, functional, and must be maintained while you are developing the new one. There are no resources to develop both apps in parallel and the new app will take a long time before its finished.

So, the only way to go is to refactor the old app. It’s not what you wanted, but it can still be fun – you will be able to use the new technologies, introduce good programming practices, and at the end, have the app you have dreamed. No, I’m not saying it will be an easy way, but it will be the most viable one.

This article will show how to port a .NET 4 WPF app and port it to .NET 5, introduce the MVVM pattern and add tests to it. After that, you will be able to change its UI, using WinUI3, like we did in this article.

The original app

The original app is a Customer CRUD, developed in .NET 4, with two projects – the UI project, CustomerApp, and a library CustomerLib, that access client’s data in an XML file (I did that just for the sake of simplicity, but this could be changed easily for another data source, like a database). You can get the app from here, and when you run it, you get something like this:

The first step will be converting it to .NET 5. Before that, we will see how portable is our app, using the .NET Portability analyzer. It’s a Visual studio extension that you can download from here. Once you download and install it, ou can run it in Visual Studio with Analyze/Portability Analyzer Settings:

You must select the platforms you want and click OK. Then, you must select Analyze/Analyze Assembly Portability, select the executables for the app and click OK. That will generate an Excel file with the report:

As you can see, our app can be ported safely to .NET 5. If there are any problems, you can check them in the Details tab. There, you will have a list of all APIs that you won’t be able to port, where you should find a workaround. Now, we’ll start converting the app.

Converting the app to .NET 5

To convert the app, we’ll start converting the lib to .NET Standard 2.0. To do that, right-click in the Lib project in the Solution Explorer and  select Unload Project, then edit the project file and change it to:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFrameworks>netstandard2.0</TargetFrameworks>
  </PropertyGroup>
  <ItemGroup>
    <Content Include="Customers.xml">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
  </ItemGroup>
</Project>

The project file is very simple, just set the taget framework to netstandard2.0 and copy the item group relative to the xml file, so it’s included in the final project. Then, you must reload the project and remove the AssemblyInfo  file from the Properties folder, as it isn’t needed anymore (if you leave it, it will generate an error, as it’s included automatically by the new project file).

Then, right click the app project in the Solution Explorer and select Unload Project, to edit the project file:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows</TargetFramework>
    <UseWPF>true</UseWPF>
    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
  </PropertyGroup>
  <ItemGroup>
    <ProjectReference Include="..\CustomerLib\CustomerLib.csproj">
      <Name>CustomerLib</Name>
    </ProjectReference>
  </ItemGroup>
</Project>

We are setting the output type to WinExe, setting the target framework to net5.0-windows, telling that we will use the .net 5 features, plus the ones specific to Windows. If we don’t do that, we wouldn’t be able to use the WPF features, that are specific to Windows and set UseWPF to true. Then, we copy the lib’s ItemGroup to the project. When we reload the project, we must delete the Properties folder and we can build our app, converted to .NET 5. It should work exactly the way it did before. We are in the good path, porting the app to the newest .NET version, but we still have a long way to go. Now it’s time to add good practices to our app, using the MVVM Pattern.

The MVVM Pattern

The MVVM (Model-View-ViewModel) pattern was created on 2005 by John Gossman, a Microsoft Architect on Blend team, and it makes extensive use of the DataBinding feature existent in WPF and other XAML platforms (like UWP or Xamarin). It provides separation between data (Model) and its visualization (View), using a binding layer, the ViewModel.

The  ViewModel  is a class that implements the INotifyPropertyChanged interface:

public interface INotifyPropertyChanged 
{ 
  event PropertyChangedEventHandler PropertyChanged; 
}

It has just one event, PropertyChanged that is activated when there is a change in a property. The Data binding mechanism present in WPF (and in other XAML platforms) subscribes this event and updates the view with no program intervention. So, all we need to do is to create a class that implements INotifyPropertyChanged and call this event when there is a change in a property to WPF update the view.

The greatest advantage is that the ViewModel is a normal class and doesn’t have any dependency on the view layer. That way, we don’t need to initialize a window when we test the ViewModel. This image shows the basic structure of this pattern:

The model communicates with the ViewModel by its properties and methods. The ViewModel communicates with the View mainly using Data Binding, it receives Commands from the View and can send messages to it. When there are many ViewModels that must communicate , they usually send messages, to maintain a decoupled architecture. That way, the Model (usually a POCO class – Plain Old CSharp Object) doesn’t know about the ViewModel, the ViewModel isn’t coupled with the View or other ViewModels, and the View isn’t tied to a ViewModel directly (the only tie is the View’s DataContext property, that will bind the View and the ViewModel. The rest will be done by Data Binding).

We could implement all this infrastructure by ourselves, it’s not a difficult task, but it’s better to use a Framework for that. There are many MVVM frameworks out there, each one chooses a different approach to implement the infrastructure and select one of them is just a matter of preference. I’ve used MVVM Light toolkit for years, it’s very lightweight and easy to use, but it isn’t maintained anymore, so I decided to search another framework. Fortunately, the Windows Community Toolkit has provided a new framework, inspired on MVVM Light, the MVVM Community Toolkit.

Implementing the MVVM Pattern

In our project, the Model is already separated from the rest: it’s in the Lib project and we’ll leave that untouched, as we don’t have to change anything in the model. In order to use the MVVM Toolkit, we must add the Microsoft.Toolkit.Mvvm NuGet package.

Then, we must create the ViewModels to interact between the View and the Model. Create a new folder and name it ViewModel. In it, add a new class and name it MainViewModel.cs.  This class will inherit from ObservableObject, from the toolkit, as it already implements the interface. Then we will copy and adapt the code that is found in the code behind of MainWindow.xaml.cs:

 

public class MainViewModel : ObservableObject
{
    private readonly ICustomerRepository _customerRepository;
    private Customer _selectedCustomer;

    public MainViewModel()
    {
        _customerRepository =  new CustomerRepository();
        AddCommand = new RelayCommand(DoAdd);
        RemoveCommand = new RelayCommand(DoRemove, () => SelectedCustomer != null);
        SaveCommand = new RelayCommand(DoSave);
        SearchCommand = new RelayCommand<string>(DoSearch);
    }

    public IEnumerable<Customer> Customers => _customerRepository.Customers;

    public Customer SelectedCustomer
    {
        get => _selectedCustomer;
        set 
        { 
            SetProperty(ref _selectedCustomer, value); 
            RemoveCommand.NotifyCanExecuteChanged(); 
        } 
    }

    public IRelayCommand AddCommand { get; }
    public IRelayCommand RemoveCommand { get; }
    public IRelayCommand SaveCommand { get; }
    public IRelayCommand<string> SearchCommand { get; }
    private void DoAdd()
    {
        var customer = new Customer();
        _customerRepository.Add(customer);
        SelectedCustomer = customer;
        OnPropertyChanged("Customers");
    }

    private void DoRemove()
    {
        if (SelectedCustomer != null)
        {
            _customerRepository.Remove(SelectedCustomer);
            SelectedCustomer = null;
            OnPropertyChanged("Customers");
        }
    }

    private void DoSave()
    {
        _customerRepository.Commit();
    }

    private void DoSearch(string textToSearch)
    {
        var coll = CollectionViewSource.GetDefaultView(Customers);
        if (!string.IsNullOrWhiteSpace(textToSearch))
            coll.Filter = c => ((Customer)c).Country.ToLower().Contains(textToSearch.ToLower());
        else
            coll.Filter = null;
    }
}

We have two properties, Customers and SelectedCustomerCustomers  will contain the list of customers shown in the DataGrid. SelectedCustomer will be the selected customer in the DataGrid, that will be shown in the detail pane. There are four commands, and we will use the IRelayCommand interface, declared in the toolkit. Each command will be initialized with the method that will be executed when the command is invoked. The RemoveCommand uses an overload for the constructor, that uses a predicate as the second parameter. This predicate will only enable the button when there is a customer selected in the DataGrid. As this command is dependent on the selected customer, when we change this property, we call the NotifyCanExecuteChanged method to notify all the elements that are bound to this command.

Now we can remove all the code from MainWindow.xaml.cs and leave only this:

public MainWindow()
{
    InitializeComponent();
    DataContext = new MainViewModel();
}

We can run the program and see that it runs the same way it did before, but we made a large refactoring to the code and now we can start implementing unit tests in the code.

Implementing tests

Now that we’ve separated the code from the view, we can test the ViewModel without the need to initialize a Window. That is really great, because we can have testable code and be assured that we are not breaking anything when we are implementing new features. For that, add a new test project and name it CustomerApp.Tests. In the Visual Studio version I’m using, there is no template for the .net 5.0 test project available, so I added a .Net Core test project, then I edited the project file and changed the TargetFramework to net5.0-windows. Then, you can add a reference to the CustomerApp project and rename UnitTest1 to MainViewModelTests.

Taking a look at the Main ViewModel, we see that there is a coupling between it and the Customer Repository. In this case, there is no much trouble, because we are reading the customers from a XML file located in the output directory, but if we decide to replace it with some kind of database, it can be tricky to test the ViewModel, because we would have to do a lot of setup to test it.

We’ll remove the dependency using Dependency Injection. Instead of using another framework for the the dependency injection, we’ll use the integrated one, based on Microsoft.Extensions.DependencyInjection. You should add this NuGet package in the App project to use the dependency injection. Then, in App.xaml.cs, we’ll add code to initialize the location of the services:

public partial class App
{
    public App()
    {
        Services = ConfigureServices();
    }

    public new static App Current => (App) Application.Current;

    public IServiceProvider Services { get; }

    private static IServiceProvider ConfigureServices()
    {
        var services = new ServiceCollection();

        services.AddSingleton<ICustomerRepository, CustomerRepository>();
        services.AddSingleton<MainViewModel>();

        return services.BuildServiceProvider();
    }

    public MainViewModel MainVM => Services.GetService<MainViewModel>();
}

We declare a static property Current to ease using the App  object and declare a IServiceProvider, to provide our services. They are configured in the ConfigureServices method, that creates a ServiceCollection and add the CustomerRepository and the main ViewModel to the collection. ConfigureServices  is called in the constructor of the application. Finally we declare the property MainVM, which will get the ViewModel from the Service Collection.

Now, we can change MainWindow.xaml.cs to use the property instead of instantiate directly the ViewModel:

public MainWindow()
{
    InitializeComponent();
    DataContext = App.Current.MainVM;
}

The last change is to remove the coupling between the ViewModel and the repository using Dependency Injection, in MainViewModel.cs:

public MainViewModel(ICustomerRepository customerRepository)
{
    _customerRepository = customerRepository ??  
                          throw new ArgumentNullException("customerRepository");
    _customerRepository = customerRepository;
    AddCommand = new RelayCommand(DoAdd);
    RemoveCommand = new RelayCommand(DoRemove, () => SelectedCustomer != null);
    SaveCommand = new RelayCommand(DoSave);
    SearchCommand = new RelayCommand<string>(DoSearch);
}

With that, we’ve gone one step further and removed the coupling between the ViewModel and the repository, so we can start our tests.

For the tests, we will use two libraries, FluentAssertions, for better assertions and FakeItEasy, to generate fakes. You should install both NuGet packages to your test project. Now, we can start creating our tests:

public class MainViewModelTests
{
    [TestMethod]
    public void Constructor_NullRepository_ShouldThrow()
    {
        Action act = () => new MainViewModel(null);

        act.Should().Throw<ArgumentNullException>()
            .Where(e => e.Message.Contains("customerRepository"));
    }

    [TestMethod]
    public void Constructor_Customers_ShouldHaveValue()
    {
        var repository = A.Fake<ICustomerRepository>();
        var customers = new List<Customer>();
        A.CallTo(() => repository.Customers).Returns(customers);
        var vm =  new MainViewModel(repository);

        vm.Customers.Should().BeEquivalentTo(customers);
    }

    [TestMethod]
    public void Constructor_SelectedCustomer_ShouldBeNull()
    {
        var repository = A.Fake<ICustomerRepository>();
        var vm = new MainViewModel(repository);

        vm.SelectedCustomer.Should().BeNull();
    }
}

Here we created three tests for the constructor, testing the values of the properties after the constructor. We can continue, testing the commands in the ViewModel:

[TestMethod]
public void AddCommand_ShouldAddInRepository()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);

    vm.AddCommand.Execute(null);
    A.CallTo(() => repository.Add(A<Customer>._)).MustHaveHappened();
}

[TestMethod]
public void AddCommand_SelectedCustomer_ShouldNotBeNull()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.AddCommand.Execute(null);
    vm.SelectedCustomer.Should().NotBeNull();
}

[TestMethod]
public void AddCommand_ShouldNotifyCustomers()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    var wasNotified = false;
    vm.PropertyChanged += (s, e) =>
    {
        if (e.PropertyName == "Customers")
            wasNotified = true;
    };
    vm.AddCommand.Execute(null);
    wasNotified.Should().BeTrue();
}

[TestMethod]
public void RemoveCommand_SelectedCustomerNull_ShouldNotRemoveInRepository()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.RemoveCommand.Execute(null);
    A.CallTo(() => repository.Remove(A<Customer>._)).MustNotHaveHappened();
}

[TestMethod]
public void RemoveCommand_SelectedCustomerNotNull_ShouldRemoveInRepository()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.SelectedCustomer = new Customer();
    vm.RemoveCommand.Execute(null);
    A.CallTo(() => repository.Remove(A<Customer>._)).MustHaveHappened();
}

[TestMethod]
public void RemoveCommand_SelectedCustomer_ShouldBeNull()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.SelectedCustomer = new Customer();
    vm.RemoveCommand.Execute(null);
    vm.SelectedCustomer.Should().BeNull();
}

[TestMethod]
public void RemoveCommand_ShouldNotifyCustomers()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.SelectedCustomer = new Customer(); 
    var wasNotified = false;
    vm.PropertyChanged += (s, e) =>
    {
        if (e.PropertyName == "Customers")
            wasNotified = true;
    };
    vm.RemoveCommand.Execute(null);
    wasNotified.Should().BeTrue();
}

[TestMethod]
public void SaveCommand_ShouldCommitInRepository()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.SaveCommand.Execute(null);
    A.CallTo(() => repository.Commit()).MustHaveHappened();
}

[TestMethod]
public void SearchCommand_WithText_ShouldSetFilter()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.SearchCommand.Execute("text");
    var coll = CollectionViewSource.GetDefaultView(vm.Customers);
    coll.Filter.Should().NotBeNull();
}

[TestMethod]
public void SearchCommand_WithoutText_ShouldSetFilter()
{
    var repository = A.Fake<ICustomerRepository>();
    var vm = new MainViewModel(repository);
    vm.SearchCommand.Execute("");
    var coll = CollectionViewSource.GetDefaultView(vm.Customers);
    coll.Filter.Should().BeNull();
}

Now we have all the tests for the ViewModel and have our project ready for the future. We went step by step and finished with a .NET 5.0 project that uses the MVVM pattern and have unit tests. This project is ready to be updated to WinUI3, or even to be ported to UWP or Xamarin. The separation between the code and the UI makes it easy to port it to other platforms, the ViewModel became testable and you can test all logic in it, without bothering with the UI. Nice, no ?

The full source code for the project is at https://github.com/bsonnino/MvvmApp

 

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