<?xml version="1.0" encoding="utf-16"?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"> <channel> <atom:link rel="self" type="application/rss+xml" href="https://www.reflectionit.nl/blog/rss" /> <title>Reflection IT Blog</title> <link>https://www.reflectionit.nl/blog/rss</link> <description>Time to reflect</description> <copyright>2026 Reflection IT</copyright> <language>en</language> <item> <title>C# 13 Params Collections</title> <link>https://www.reflectionit.nl/blog/2024/csharp-13-params-collections</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>CSharp</category> <guid>https://www.reflectionit.nl/blog/2024/csharp-13-params-collections</guid> <pubDate>Tue, 16 Apr 2024 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>With the version 17.10.0 Preview 3.0 of <a href="https://visualstudio.microsoft.com/vs/preview/">Visual Studio Preview</a> you can test some new C# 13 features. In this blog I will explain the <strong>params Collection</strong> feature as documented in this <a href="https://github.com/dotnet/csharplang/blob/main/proposals/params-collections.md">proposal</a>. To use this feature you have to set the <strong>LangVersion</strong> in your csproj file to <strong>preview</strong>.</p> <pre class="brush: html">&lt;Project Sdk=&quot;Microsoft.NET.Sdk&quot;&gt; &lt;PropertyGroup&gt; &lt;OutputType&gt;Exe&lt;/OutputType&gt; &lt;TargetFramework&gt;net8.0&lt;/TargetFramework&gt; &lt;ImplicitUsings&gt;enable&lt;/ImplicitUsings&gt; &lt;Nullable&gt;enable&lt;/Nullable&gt; &lt;LangVersion&gt;preview&lt;/LangVersion&gt; &lt;/PropertyGroup&gt; &lt;/Project&gt; </pre> <p>In C#, the `params` keyword allows a method to accept a variable number of arguments, providing flexibility in how many parameters you pass without needing to define multiple method overloads. This can make your code more concise and easier to maintain. For instance, it&apos;s particularly useful when the exact number of inputs is not known in advance or can vary. Moreover, it simplifies the calling code, as you can pass an array or a comma-separated list of arguments that the method will interpret as an array.</p> <p>From C# 1.0 till 12.0 params parameter must be an array type. However, it might be beneficial for a developer to be able to have the same convenience when calling APIs that take other collection types. For example, an ImmutableArray&lt;T&gt;, ReadOnlySpan&lt;T&gt;, or plain IEnumerable. Especially in cases where compiler is able to avoid an implicit array allocation for the purpose of creating the collection (ImmutableArray&lt;T&gt;, ReadOnlySpan&lt;T&gt;, etc). This saves Heap memory allocation which improves the performance. The Garbage collector doesn&apos;t have to free this memory.</p> <h2>C# 1.0 params array</h2> <p>Lets start with an example of an old-school params array parameter in a Sum method.&#160;</p> <pre class="brush: csharp">internal class Program { static void Main(string[] args) { Console.WriteLine(Sum(1, 2, 3, args.Length)); } private static Sum(params int[] values) { int sum = 0; foreach (var item in values) { sum += item; } return sum; } } </pre> <p>When you decompile this code using a tool like <a href="https://github.com/icsharpcode/ILSpy">ILSpy</a> or the <a href="https://sharplab.io/#v2:EYLgZgpghgLgrgJwgZwLQAUoKgW2QYQHsAbYiAYxgEtCA7ZAGgBMQBqAHwAEAmARgFgAUEKq0YEBLSjEABDzm8A7DIDeQoTM0KAbHIAsMgLJRRACk68ADAG0AujKwBzZAEpVGrZ4sBOUwGU4HFNeBhluUIBmUKdkADoAGQhaRxgACxcXAG4PTQBfdUFPAAcEKgA3WAgdGVEYGQCgoqxcZBqxOxkK4jgUNzVCzy1amWRAmQBeGUtsgcGZMEIkKHJUmVMKhBrxHDbO6R7Xd1m5rVGd1kmqbZmTmXzjr2Uzm617+6A=">SharpLab.io</a> website you see that an array of int[4] is created in the Main() method (line 5). This is heap allocation which is something you can/should avoid.</p> <pre class="brush: csharp">internal class Program { private static void Main(string[] args) { int[] array = new int[4]; RuntimeHelpers.InitializeArray(array, (RuntimeFieldHandle)/*OpCode not supported: LdMemberToken*/); array[3] = args.Length; Console.WriteLine(Sum(array)); } private static int Sum(params int[] values) { int num = 0; int num2 = 0; while (num2 &lt; values.Length) { int num3 = values[num2]; num += num3; num2++; } return num; } } </pre> <h2>C# 13 params Collections</h2> <p>In the next example the Sum() method is using a <strong>params ReadOnlySpan&lt;int&gt;</strong> parameter in line 7. Nothing else is changed.&#160;</p> <pre class="brush: csharp">internal class Program { static void Main(string[] args) { Console.WriteLine(Sum(1, 2, 3, args.Length)); } private static int Sum(params ReadOnlySpan&lt;int&gt; values) { int sum = 0; foreach (var item in values) { sum += item; } return sum; } } </pre> <p>When you <a href="https://sharplab.io/#v2:EYLgZgpghgLgrgJwgZwLQAUoKgW2QYQHsAbYiAYxgEtCA7ZAGgBMQBqAHwAEAmARgFgAUFVowICWlGIACHrN4B2aQG8hQ6RvkA2WQBZpAWSgiAFJ14AGANoBdaVgDmyAJQr1mj+YCcJgMpwcE14GaW4QgGYQx2QAOgAZCFoHGAALZ2cAbncNAF81QQ8ABwQqADdYCG1pERhpf0DCrFxkaQAlaCYAeVpiAE9fRtoAHhqAPmly4jgUV1UCj00a6WQA6QBeaQss+YXpMEIkKHIU6RNyhGqxHGraCalplzcd3c0V69YNqivtl+k8588SjeP00/xyQA==">decompile</a> this code you see a&#160; &lt;&gt;y__InlineArray4&lt;int&gt; value is used in the Main() method (line 6). This is a struct which is created by the compiler. It uses the <a href="https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/proposals/csharp-12.0/inline-arrays">Inline Arrays</a> feature of C# 12. Structs are allocated on the Stack so this code doesn&apos;t allocate any heap memory.</p> <pre class="brush: csharp">internal class Program { [NullableContext(1)] private static void Main(string[] args) { &lt;&gt;y__InlineArray4&lt;int&gt; buffer = default(&lt;&gt;y__InlineArray4&lt;int&gt;); &lt;PrivateImplementationDetails&gt;.InlineArrayElementRef&lt;&lt;&gt;y__InlineArray4&lt;int&gt;, int&gt;(ref buffer, 0) = 1; &lt;PrivateImplementationDetails&gt;.InlineArrayElementRef&lt;&lt;&gt;y__InlineArray4&lt;int&gt;, int&gt;(ref buffer, 1) = 2; &lt;PrivateImplementationDetails&gt;.InlineArrayElementRef&lt;&lt;&gt;y__InlineArray4&lt;int&gt;, int&gt;(ref buffer, 2) = 3; &lt;PrivateImplementationDetails&gt;.InlineArrayElementRef&lt;&lt;&gt;y__InlineArray4&lt;int&gt;, int&gt;(ref buffer, 3) = args.Length; Console.WriteLine(Sum(&lt;PrivateImplementationDetails&gt;.InlineArrayAsReadOnlySpan&lt;&lt;&gt;y__InlineArray4&lt;int&gt;, int&gt;(ref buffer, 4))); } private static int Sum([ParamCollection] ReadOnlySpan&lt;int&gt; values) { int num = 0; ReadOnlySpan&lt;int&gt; readOnlySpan = values; int num2 = 0; while (num2 &lt; readOnlySpan.Length) { int num3 = readOnlySpan[num2]; num += num3; num2++; } return num; } } } [StructLayout(LayoutKind.Auto)] [InlineArray(4)] internal struct &lt;&gt;y__InlineArray4&lt;T&gt; { [CompilerGenerated] private T _element0; } </pre> <h2>Benchmark</h2> <p>To compare the performance between the two I have created this Benchmark using <a href="https://github.com/dotnet/BenchmarkDotNet">BenchmarkDotNet</a>. It compares the Sum of 5 decimals using old-school <strong>params arrays </strong>and <strong>params ReadOnlyCollection&lt;decimal&gt;</strong>.</p> <pre class="brush: csharp">using BenchmarkDotNet.Attributes; using BenchmarkDotNet.Running; BenchmarkRunner.Run&lt;BM&gt;(); [MemoryDiagnoser(false)] [HideColumns(&quot;RatioSD&quot;, &quot;Alloc Ratio&quot;)] //[ShortRunJob] public class BM { private decimal _value = 500m; [Benchmark] public decimal CallSumArray() =&gt; SumArray(1m, 100m, 200m, 300m, 400m, _value); [Benchmark(Baseline = true)] public decimal CallSumSpan() =&gt; SumSpan(1m, 100m, 200m, 300m, 400m, _value); private static decimal SumArray(params decimal[] values) { decimal sum = 0; foreach (var item in values) { sum += item; } return sum; } private static decimal SumSpan(params ReadOnlySpan&lt;decimal&gt; values) { decimal sum = 0; foreach (var item in values) { sum += item; } return sum; } } </pre> <p>The CallSumSpan method is 28% faster and doesn&apos;t allocate any heap memory. The CallSumArray method allocated 120 bytes.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/CSharp/Params/ParamsBM.png" alt="Benchmark summary" /></p> <h2>Don&apos;t want to wait for C# 13</h2> <p>If you don&apos;t want to wait for C# 13 you can already use a solution with simular results in C# 12. You can use <a href="https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/operators/collection-expressions">Collection Expression</a> with a normal ReadOnlySpan&lt;T&gt; parameter. A collection expression contains a sequence of elements between <strong>[</strong> and <strong>]</strong> brackets, see line 4.&#160;</p> <pre class="brush: csharp">internal class Program { static void Main(string[] args) { Console.WriteLine(Sum([1, 2, 3, args.Length])); } private static int Sum(ReadOnlySpan&lt;int&gt; values) { int sum = 0; foreach (var item in values) { sum += item; } return sum; } } </pre> <p>When you&#160;<a href="https://sharplab.io/#v2:EYLgZgpghgLgrgJwgZwLQAUoKgW2QYQHsAbYiAYxgEtCA7ZAGgBMQBqAHwAEAmARgFgAUEKq0YEBLSjEABDzm8A7DIDeQoTM0KAbHIAsMgLJRRACk68ADAG0AujKwBzZAEpVGrZ4sBOUwGU4HFNrXgYZbjCAZjCnZAA6ABkIWkcYAAtbFxcAbg9NAF91QU8ABwQqADdYCB0ZURgZAKCAJWgmAHlaYgBPPxKoWgAeeoA+GSriOBQ3NWLPLXqZZECZAF4ZS1y5+ZkwQiQocjSZUyqEOvEcOtpx6SnXd22drWWr1nWqS63nmUKnr2Ur2+Wj+fyAA===">decompile</a> this code you see the same code you saw when you used the <strong>params ReadOnlyCollection&lt;decimal&gt;</strong>.</p> <h3>Closure</h3> <p>In this blog post I showed you the new &apos;params Collection&apos; feature in C# 13, available in Visual Studio Preview 17.10.0 Preview 3.0. It explains how to enable the feature by setting &apos;LangVersion&apos; to preview in the project file and delves into the benefits of using &apos;params&apos; with collection types other than arrays, like &apos;ReadOnlySpan&lt;T&gt;&apos;. This enhancement aims to improve performance by reducing heap memory allocations, thus easing the workload on the garbage collector. The post includes an example of the traditional &apos;params array&apos; in a `Sum` method to illustrate the concept.</p> <p>Hopefully Microsoft will add in .NET 9 (and later) more overloads with &apos;params ReadOnlySpan&lt;T&gt;&apos; to the methods which are using &apos;params arrays&apos;. For example the <a href="https://learn.microsoft.com/en-us/dotnet/api/system.string.split?view=net-8.0#system-string-split(system-char())">String.Split</a> method.</p> <p>&#160;</p></body></html>]]></content:encoded> </item> <item> <title>Using MVVM Design Pattern in Windows Forms</title> <link>https://www.reflectionit.nl/blog/2023/using-mvvm-design-pattern-in-windows-forms</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>MVVM</category> <category>WPF</category> <category>XAML</category> <category>WinForms</category> <guid>https://www.reflectionit.nl/blog/2023/using-mvvm-design-pattern-in-windows-forms</guid> <pubDate>Sat, 30 Dec 2023 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>The MVVM Design Pattern is mainly used in XAML enviroments like WPF, UWP, WinUI, Xamarin Forms and MAUI, because they support databinding between Controls and&#160; Models but also between Buttons and Commands.</p> <p>In .NET 8 it is possible to implement the MVVM Design Pattern in Windows Forms apps. It uses a new data binding engine which was in preview with <a href="https://learn.microsoft.com/en-us/dotnet/desktop/winforms/whats-new/net70?view=netdesktop-6.0#data-binding-improvements-preview">.NET 7</a>, and is now fully enabled in <a href="https://learn.microsoft.com/en-us/dotnet/desktop/winforms/whats-new/net80?view=netdesktop-6.0#data-binding-improvements">.NET 8</a>. This new engine is modeled after WPF, which makes it easier to implement MVVM design principles. Time to write a blog post about it.</p> <p>For this post I have written a simple demo Solution containing 3 projects. The ModelsLibrary project contains a ViewModel and is referenced by a Windows Forms and WPF project. I have published this solution in this <a href="https://github.com/sonnemaf/MvvmApps">GitHub repository</a>.&#160;</p> <p>The UI of the Windows Forms and WPF apps are very simple. It shows the value of a Counter and has an Increment button to increment the value by 1. Simular to the Counter sample page of a Blazor app.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/WinForms/Mvvm/MvvmUI.png" alt="Example apps" /></p> <h2>ModelsLibrary</h2> <p>This project is a .NET Stardard 2.0 project with the LangVersion set to 10.0. I use .NET Standard to allow it to be referenced from a UWP project. I use C# 10 because I use <a href="https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/generators/overview">C# Source Generators</a> from the <a href="https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/">CommunityToolkit.Mvvm</a> NuGet package. The CommunityToolkit.Mvvm package (aka MVVM Toolkit, formerly named Microsoft.Toolkit.Mvvm) is a modern, fast, and modular MVVM library. I use it in all my MVVM projects.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/WinForms/Mvvm/ModelsLibraryProject.png" /></p> <p>In this project there is only one model class named MainViewModel. It is a partial class to support C# source generation. It inherits from <a href="https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/observableobject">ObservableObject</a> to allow data binding (by implementing the INotifyPropertyChanged interface).</p> <p>The private field <em>_counter </em>is annotated with the <a href="https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/generators/observableproperty">ObservableProperty</a> attribute. This attribute generates observable properties from annotated fields. Its purpose is to greatly reduce the amount of boilerplate that is needed to define observable properties.</p> <p>The Increment method is annotated with the <a href="https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/generators/relaycommand">RelayCommand</a> attribute. The method will increase the Counter property by 1. This attribute generates relay command properties for annotated methods. Its purpose is to completely eliminate the boilerplate that is needed to define commands wrapping private methods in a viewmodel. It is often useful to be able to disable commands, and to then later on invalidate their state and have them check again whether they can be executed or not. In order to support this, the RelayCommand attribute exposes the CanExecute property, which can be used to indicate a target property or method to use to evaluate whether a command can be executed. In this demo the Increment is only valid if the Counter value is less than 10.</p> <pre class="brush: csharp">using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.Input; namespace ModelsLibrary.ViewModels; // This must be a partial class, the CommunityToolkit.Mvvm // Source Generator will add Properties to it. public partial class MainViewModel : ObservableObject { [ObservableProperty] [NotifyCanExecuteChangedFor(nameof(IncrementCommand))] private int _counter; [RelayCommand(CanExecute = nameof(CanIncrement))] private void Increment() { Counter++; } private bool CanIncrement =&gt; Counter &lt; 10; } </pre> <h2>WPF app</h2> <p>The WPF app has a MainWindow in the <em>Views/Windows</em> folder. The project references the ModelsLibrary project.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/WinForms/Mvvm/WpfProject.png" /></p> <p>In the MainWindow the Window.DataContext property creates a new instance (object) of the MainViewModel class. The Text of the TextBlock is <a href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/?view=netdesktop-8.0">databound</a> to the (generated) Counter property of the MainViewModel object. The Command of the Button is databound to the (generated) IncrementCommand property. There is no code added to the codebehind (MainWindow.xaml.cs). This binding is <a href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/binding-declarations-overview?view=netdesktop-8.0">declared</a> in XAML using <strong>{Binding}</strong>. The Binding of the TextBlock uses a&#160;<em>C2 </em>StringFormat to format the value to a currency.</p> <pre class="brush: html">&lt;Window x:Class=&quot;WpfMvvmApp.Views.Windows.MainWindow&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; xmlns:vm=&quot;clr-namespace:ModelsLibrary.ViewModels;assembly=ModelsLibrary&quot; Title=&quot;Mvvm WPF app&quot; Width=&quot;300&quot; Height=&quot;200&quot; FontSize=&quot;25&quot; mc:Ignorable=&quot;d&quot;&gt; &lt;Window.DataContext&gt; &lt;vm:MainViewModel /&gt; &lt;/Window.DataContext&gt; &lt;Grid&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height=&quot;1*&quot; /&gt; &lt;RowDefinition Height=&quot;1*&quot; /&gt; &lt;/Grid.RowDefinitions&gt; &lt;TextBlock HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot; Text=&quot;{Binding Counter, Mode=OneWay, StringFormat=C2}&quot; /&gt; &lt;Button Grid.Row=&quot;1&quot; Padding=&quot;8&quot; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot; Command=&quot;{Binding IncrementCommand, Mode=OneTime}&quot; Content=&quot;Increment&quot; /&gt; &lt;/Grid&gt; &lt;/Window&gt; </pre> <h2>Windows Forms app</h2> <p>The Windows Forms app has a MainForm in the <em>Views/Forms</em> folder. This project also references the ModelsLibrary project.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/WinForms/Mvvm/WinFormsProject.png" /></p> <p>The MainForm has a Label and a Button control. The databinding is defined in the codebehind of the form. I could have used the Windows Forms designer for this but I prefer to do this manually in the CodeBehind. In the constructor of the MainForm a new instance of the MainViewModel is created. It is stored in a private readonly field so you can use it everwhere. Not that I&apos;m using it in this demo.</p> <p>In the constructor I created a Binding object by calling the Add method of the DataBindings property of the Label. The Add method binds the Text property to the Counter property of the MainViewModel instance. On this Binding object I set the FormatString property to <em>C2</em> and enabled the Formatting.</p> <p>The <a href="https://learn.microsoft.com/en-us/dotnet/desktop/winforms/whats-new/net80?view=netdesktop-6.0#button-commands">Command</a> property of the Button control is new in .NET 8. I have set it to the IncrementProperty of the MainViewModel instance. When the button is clicked the Command is executed. The button will be disabled when the value of the Counter reaches 10.</p> <pre class="brush: csharp">using ModelsLibrary.ViewModels; namespace WinFormsMvvmApp.Views.Forms; public partial class MainForm : Form { private readonly MainViewModel _vm; public MainForm() { InitializeComponent(); _vm = new MainViewModel(); var binding = labelCounter.DataBindings.Add(nameof(labelCounter.Text), _vm, nameof(_vm.Counter)); binding.FormatString = &quot;C2&quot;; binding.FormattingEnabled = true; buttonIncrement.Command = _vm.IncrementCommand; } } </pre> <h2>Closure</h2> <p>I love the MVVM Design pattern. I use it in all my XAML apps. You can use it now in Windows Forms apps too. This is very cool and easy. Way better than implementing Click events in the CodeBehind. Especially if you care about writing <a href="https://learn.microsoft.com/en-us/archive/msdn-magazine/2013/november/mvvm-writing-a-testable-presentation-layer-with-mvvm">Unit Tests</a>.&#160;</p> <p>In a next blog I will explain some more advanced Windows Forms scenarios like binding to ObservableCollections and using Command Parameters.</p> <p>Below you can find some links about the usage of the MVVM design patterns in UWP, WPF and MAUI apps.</p> <ul> <li><a href="https://learn.microsoft.com/en-us/windows/uwp/data-binding/data-binding-and-mvvm">https://learn.microsoft.com/en-us/windows/uwp/data-binding/data-binding-and-mvvm</a>&#160;</li> <li><a href="https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern">https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern</a>&#160;</li> <li><a href="https://learn.microsoft.com/en-us/dotnet/architecture/maui/mvvm">https://learn.microsoft.com/en-us/dotnet/architecture/maui/mvvm</a></li> </ul></body></html>]]></content:encoded> </item> <item> <title>XAML NumberBox not accepting letters</title> <link>https://www.reflectionit.nl/blog/2023/xaml-numberbox-not-accepting-letters</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>Apps</category> <category>XAML</category> <category>UWP</category> <category>WinUI</category> <category>WindowsAppSDK</category> <category>CSharp</category> <guid>https://www.reflectionit.nl/blog/2023/xaml-numberbox-not-accepting-letters</guid> <pubDate>Mon, 04 Sep 2023 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>Last week there was a&#160;<a href="https://twitter.com/archiecoder/status/1697409720552652823">discussion</a> on X (former Twitter) about the usage of the NumberBox in WinUI apps. Should it accept letter inputs or not. The &apos;conlusion&apos; was that it should because you can enter formulas. But there are also a few developers which don&apos;t like this. So I took up the challenge to find a solution for this problem. My first guess was that I should create an AttachedProperty or Behavior for this. I was wrong. AttachedProperties can&apos;t be used for this. You can&apos;t use them for handing events on controls. Behaviors can but they require you to add an extra <a href="https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.WinUI.Managed">NuGet</a> package to the project. Something you might not want. So I decided to use compiled binding (x:Bind) to events, also known as <a href="https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/x-bind-markup-extension#event-binding">Event Binding</a>.</p> <h3>My Solution</h3> <p><img src="https://www.reflectionit.nl/Images/Blog/XAML/NumberBox/NumberBoxScreenshot.png" alt="WinUI and UWP NumberBox screenshot" /></p> <p>There are a few &apos;Key&apos; events you can use: KeyDown, KeyUp, PreviewKeyDown and PreviewKeyUp. All events use the KeyEventHandler delegate but it is the PreviewKeyDown you should use. It allows you to set the Handled property of the KeyRoutedEventArgs to true. This will cancel the input.</p> <p>I&apos;m using Event Binding instead of the more common solution in which you handle events in the code-behind of the Window, Page or UserControl. This makes my solution reusable which I always prefer. All code is just in a single class. This&#160;<strong>PreviewKeyDownHandler </strong>class has 3 public static methods to which you can bind to. Use the one you think works best for you.</p> <ul> <li>RejectLetters, don&apos;t accept letters A to Z</li> <li>AcceptNumbersOnly, only support numbers but off course also cursor &amp; tab keys</li> <li>AcceptNumbersAndOperators, use this when you have AcceptsExpression turned on.</li> </ul> <p>This class is written using C# 9.0 so make sure you upgrade to this version in UWP project, set LangVersion to 9.0 or higher in your project file. I use conditional compilation for importing the correct namespaces and the GetKeyState function which are different in WinUI. I use the IsModifierKeyDown() method to handle special cases like a Ctrl+C or a Windows+P. Those should not be cancelled.</p> <pre class="brush: csharp">#if WINDOWS_UWP using Windows.UI.Xaml.Input; #else using Microsoft.UI.Xaml.Input; #endif using System; using Windows.System; using Windows.UI.Core; namespace Helpers { /// &lt;summary&gt; /// This helper class is used to avoid letter inputs for a NumberBox. /// Make sure you upgrade your UWP project to at least C# 9.0, we use switch expressions and /// logical pattern matching. /// &lt;code&gt; /// &lt;NumberBox PreviewKeyDown=&quot;{x:Bind helpers:PreviewKeyDownHandler.AcceptNumbersOnly}&quot; /&gt; /// &lt;/code&gt; /// &lt;/summary&gt; static class PreviewKeyDownHandler { #if WINDOWS_UWP private static readonly Func&lt;VirtualKey, CoreVirtualKeyStates&gt; _keyStateFunction = CoreWindow.GetForCurrentThread().GetKeyState; #else private static readonly Func&lt;VirtualKey, CoreVirtualKeyStates&gt; _keyStateFunction = Microsoft.UI.Input.InputKeyboardSource.GetKeyStateForCurrentThread; #endif private static bool IsModifierKeyDown() { return _keyStateFunction(VirtualKey.Control).HasFlag(CoreVirtualKeyStates.Down) || _keyStateFunction(VirtualKey.LeftMenu).HasFlag(CoreVirtualKeyStates.Down) || _keyStateFunction(VirtualKey.RightMenu).HasFlag(CoreVirtualKeyStates.Down) || _keyStateFunction(VirtualKey.LeftWindows).HasFlag(CoreVirtualKeyStates.Down) || _keyStateFunction(VirtualKey.RightWindows).HasFlag(CoreVirtualKeyStates.Down); } [System.Diagnostics.CodeAnalysis.SuppressMessage(&quot;Style&quot;, &quot;IDE0060:Remove unused parameter&quot;, Justification = &quot;Must match KeyEventHandler delegate, don&apos;t remove sender&quot;)] public static void RejectLetters(object sender, KeyRoutedEventArgs e) { if (IsModifierKeyDown()) { return; } if (e.Key is &gt;= VirtualKey.A and &lt;= VirtualKey.Z) { e.Handled = true; } } [System.Diagnostics.CodeAnalysis.SuppressMessage(&quot;Style&quot;, &quot;IDE0060:Remove unused parameter&quot;, Justification = &quot;Must match KeyEventHandler delegate, don&apos;t remove sender&quot;)] public static void AcceptNumbersOnly(object sender, KeyRoutedEventArgs e) { if (IsModifierKeyDown()) { return; } e.Handled = e.Key switch { &gt;= VirtualKey.Number0 and &lt;= VirtualKey.Number9 =&gt; false, &gt;= VirtualKey.NumberPad0 and &lt;= VirtualKey.NumberPad9 =&gt; false, VirtualKey.Left =&gt; false, VirtualKey.Right =&gt; false, VirtualKey.Up =&gt; false, VirtualKey.Down =&gt; false, VirtualKey.PageUp =&gt; false, VirtualKey.PageDown =&gt; false, VirtualKey.Tab =&gt; false, VirtualKey.Home =&gt; false, VirtualKey.End =&gt; false, VirtualKey.Shift =&gt; false, VirtualKey.Back =&gt; false, VirtualKey.Delete =&gt; false, VirtualKey.Enter =&gt; false, VirtualKey.Decimal =&gt; false, (VirtualKey)188 =&gt; false, // Comma (VirtualKey)189 =&gt; false, // Minus (VirtualKey)190 =&gt; false, // Dot _ =&gt; true, }; } [System.Diagnostics.CodeAnalysis.SuppressMessage(&quot;Style&quot;, &quot;IDE0060:Remove unused parameter&quot;, Justification = &quot;Must match KeyEventHandler delegate, don&apos;t remove sender&quot;)] public static void AcceptNumbersAndOperators(object sender, KeyRoutedEventArgs e) { if (IsModifierKeyDown()) { return; } AcceptNumbersOnly(sender, e); if (e.Handled) { e.Handled = e.Key switch { VirtualKey.Multiply =&gt; false, VirtualKey.Divide =&gt; false, VirtualKey.Add =&gt; false, VirtualKey.Subtract =&gt; false, VirtualKey.Space =&gt; false, (VirtualKey)187 =&gt; false, // + _ =&gt; true, }; } } } } </pre> <h3>WinUI3 usage</h3> <p>In a WinUI app you can use it like this. The x:Bind in the PreviewKeyDown event is all you need. You can set this on a NumberBox but also on a Panel which contain multiple NumberBox controls. This works becauses the PreviewKeyDown is a&#160;<a href="https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/events-and-routed-events-overview#routed-events">Routing Event</a>&#160;which bubbles up to it&apos;s parent.</p> <pre class="brush: html">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt; &lt;Window x:Class=&quot;WinUI3App1.MainWindow&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; xmlns:helpers=&quot;using:Helpers&quot; xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; mc:Ignorable=&quot;d&quot;&gt; &lt;Grid Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot;&gt; &lt;StackPanel Width=&quot;208&quot; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot; Spacing=&quot;8&quot;&gt; &lt;NumberBox Header=&quot;A&quot; PreviewKeyDown=&quot;{x:Bind helpers:PreviewKeyDownHandler.RejectLetters}&quot; SpinButtonPlacementMode=&quot;Inline&quot; /&gt; &lt;NumberBox AcceptsExpression=&quot;True&quot; Header=&quot;B&quot; PreviewKeyDown=&quot;{x:Bind helpers:PreviewKeyDownHandler.AcceptNumbersAndOperators}&quot; /&gt; &lt;StackPanel Orientation=&quot;Horizontal&quot; PreviewKeyDown=&quot;{x:Bind helpers:PreviewKeyDownHandler.AcceptNumbersOnly}&quot; Spacing=&quot;8&quot;&gt; &lt;NumberBox Width=&quot;100&quot; Header=&quot;C&quot; /&gt; &lt;NumberBox Width=&quot;100&quot; Header=&quot;D&quot; /&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/Window&gt; </pre> <h3>UWP usage</h3> <p>In a UWP app using WinUI2 you use it like this. The only real difference with WinUI 3 is the prefix of the <em>winui</em>: in front of the NumberBox. It refers to <em>xmlns:winui</em> namespace declaration in the Page element.</p> <pre class="brush: html">&lt;Page x:Class=&quot;UwpApp1.MainPage&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; xmlns:helpers=&quot;using:Helpers&quot; xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; xmlns:winui=&quot;using:Microsoft.UI.Xaml.Controls&quot; Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot; mc:Ignorable=&quot;d&quot;&gt; &lt;StackPanel Width=&quot;208&quot; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot; Spacing=&quot;8&quot;&gt; &lt;winui:NumberBox Header=&quot;A&quot; PreviewKeyDown=&quot;{x:Bind helpers:PreviewKeyDownHandler.RejectLetters}&quot; SpinButtonPlacementMode=&quot;Inline&quot; /&gt; &lt;winui:NumberBox AcceptsExpression=&quot;True&quot; Header=&quot;B&quot; PreviewKeyDown=&quot;{x:Bind helpers:PreviewKeyDownHandler.AcceptNumbersAndOperators}&quot; /&gt; &lt;StackPanel Orientation=&quot;Horizontal&quot; PreviewKeyDown=&quot;{x:Bind helpers:PreviewKeyDownHandler.AcceptNumbersOnly}&quot; Spacing=&quot;8&quot;&gt; &lt;winui:NumberBox Width=&quot;100&quot; Header=&quot;C&quot; /&gt; &lt;winui:NumberBox Width=&quot;100&quot; Header=&quot;D&quot; /&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;/Page&gt; </pre> <h3>Closure</h3> <p>I hope you like this solution. I have published this solution containing the WinUI and UWP project in this <a href="https://github.com/sonnemaf/NumberBoxInputSample">GitHub repository</a>.&#160;</p></body></html>]]></content:encoded> </item> <item> <title>System controls need BasedOn Styling in WinUI</title> <link>https://www.reflectionit.nl/blog/2023/system-controls-need-basedon-styling-in-winui</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>Apps</category> <category>XAML</category> <category>UWP</category> <category>WinUI</category> <category>WindowsAppSDK</category> <guid>https://www.reflectionit.nl/blog/2023/system-controls-need-basedon-styling-in-winui</guid> <pubDate>Sun, 26 Mar 2023 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>You can customize the appearance of your apps in many ways by using the XAML framework like WPF, UWP, WinUI and MAUI. Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls. Styling is to XAML what CSS is to HTML. Using styles, you can group a set of properties and assign them to specific controls or all controls of a specific type, and just like in CSS, a style can inherit (BasedOn) from another style.</p> <p>Starting with WinUI 2.6 there are new styles for most of the controls. It is encourage you to use the new styles, as they better match the design direction of Windows. You can read more about <a href="https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-styles">styling</a>.</p> <h2>BasedOn for System controls</h2> <p>In WinUI the Styles for system controls (Button, CheckBox, TextBox, etc) should set BasedOn=&quot;{StaticResource Default&lt;ControlName&gt;Style}&quot;, where &lt;ControlName&gt; is the name of the control.&#160;</p> <p>Take the next WinUI3 example in which I have defined two button styles. MyButtonStyle1 is not using BasedOn, MyButtonStyle2 uses the <em>DefaultButtonStyle</em>.</p> <pre class="brush: html">&lt;Window x:Class=&quot;ButtonStylingDemo.MainWindow&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; mc:Ignorable=&quot;d&quot;&gt; &lt;Grid Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot;&gt; &lt;StackPanel HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot; Orientation=&quot;Vertical&quot; Spacing=&quot;12&quot;&gt; &lt;StackPanel.Resources&gt; &lt;Style x:Key=&quot;MyButtonStyle1&quot; TargetType=&quot;Button&quot;&gt; &lt;Setter Property=&quot;BorderBrush&quot; Value=&quot;Black&quot; /&gt; &lt;Setter Property=&quot;FontSize&quot; Value=&quot;16&quot; /&gt; &lt;/Style&gt; &lt;Style x:Key=&quot;MyButtonStyle2&quot; BasedOn=&quot;{StaticResource DefaultButtonStyle}&quot; TargetType=&quot;Button&quot;&gt; &lt;Setter Property=&quot;BorderBrush&quot; Value=&quot;Red&quot; /&gt; &lt;Setter Property=&quot;FontSize&quot; Value=&quot;16&quot; /&gt; &lt;/Style&gt; &lt;/StackPanel.Resources&gt; &lt;Button&gt;Button1 without any Style&lt;/Button&gt; &lt;Button Style=&quot;{StaticResource AccentButtonStyle}&quot;&gt;Button2 with AccentButtonStyle&lt;/Button&gt; &lt;Button Style=&quot;{StaticResource MyButtonStyle1}&quot;&gt;Button3 with MyStyle1&lt;/Button&gt; &lt;Button Style=&quot;{StaticResource MyButtonStyle2}&quot;&gt;Button4 with MyStyle2&lt;/Button&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/Window&gt; </pre> <p>The Window with the buttons will display like this.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/WinUI/Styling/WinUIButtonStyling.png" alt="WinUI Button Styles example" width="433" /></p> <p>Button1 and Button2 have the rounded corners which where introduced in the Windows 11 design. Button3 has <strong>square corners </strong>due to the fact that it&apos;s style is not based on the DefaultButtonStyle, it doesn&apos;t match with the new Windows design. The Style of Button4 is based on the DefaultButtonStyle which makes the button have the correct cornerradius.</p> <p>In WPF and UWP (not using WinUI2) there are no default styles for the system controls. Make sure you always inherit (using BasedOn) your Styles from the default styles in WinUI 2 and WinUI 3 apps. Not only for a Buttons but for all system controls like CheckBox, TextBox, etc.</p> <p>&#160;</p> <p>&#160;</p></body></html>]]></content:encoded> </item> <item> <title>Fons Sonnemans 2023 Development Tools List</title> <link>https://www.reflectionit.nl/blog/2023/fons-sonnemans-2023-development-tools-list</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>Tools</category> <category>Apps</category> <category>XAML</category> <category>UWP</category> <category>Blend</category> <category>CSharp</category> <category>Visual Studio</category> <guid>https://www.reflectionit.nl/blog/2023/fons-sonnemans-2023-development-tools-list</guid> <pubDate>Tue, 24 Jan 2023 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>Many years ago Scott Hanselman wrote the famous <a href="https://hanselman.com/tools">Scott Hanselman Ultimate Tools List</a> post. In 2019 I wrote my own <a href="../../../blog/2019/fons-sonnemans-2019-development-tools-list">list</a>, now it is time for an update because there are new tools I use. I&apos;m a Windows App developer more than a Web developer so I use different tools. I write mainly XAML (UWP, WPF, WinUI and <a href="https://platform.uno/">UnoPlatform</a>) apps and only occasionally an ASP.NET MVC, WebAPI or Blazor WASM projects. My code is written in C#. I create them because it is fun to do and it helps me to train my own skills. I use this experience for my trainings (<a href="../../../training/csharp">C#</a>,&#160;<a href="../../../training/xaml">XAML</a>,&#160;<a href="../../../training/web">ASP.NET</a>&#160;and&#160;<a href="../../../training/data">SQL</a>). I write my own training material so I need the experience. I have developed about 50 Windows (and Windows Phone) <a href="../../apps">apps</a>, some are very popular. The apps have more than 5 million downloads and daily thousands of players. Most of my apps are free but there are Ads in it to generate some revenue.</p> <h3>Software</h3> <ul> <li><a href="https://visualstudio.microsoft.com/">Visual Studio</a> is my favorite IDE, version 2022. I use it for coding (mainly C# but occasionally also JavaScript and TypeScript), debugging and XAML/HTML/CSS editing. I think 85% of my development time is with Visual Studio.</li> <li><a href="https://docs.microsoft.com/en-us/visualstudio/xaml-tools/creating-a-ui-by-using-blend-for-visual-studio?view=vs-2019">Blend for Visual Studio</a> is installed with Visual Studio. I use it for designing the XAML of my UWP and WPF apps. Compared to Visual Studio, Blend has a better Assets panel, Resource management, Data management, Animations, States and Templating &amp; Styling editing. Most developers don&apos;t use it and that is a pitty. You should give it a try. You can write XAML way better and faster with Blend.</li> <li><a href="http://expressiondesign4.com/">Microsoft Expression Design</a> is a great tool for creative professionals and developers who want to build graphics for application user interfaces, the web, or any other medium. It is an alternative for Adobe Illustrator. I use it for my graphic assets (logo&apos;s, images, paths) in my apps. It is a vector drawing tool which you can use to export your graphics to XAML paths. It is really nice.</li> <li><a href="https://www.microsoft.com/en-us/download/details.aspx?id=18974">Microsoft Expression Encoder</a>&#160;is an advanced application for bringing your edited video project to the web for high-quality playback. I use it to edit app promo video&apos;s. I record the videos using the Xbox Game Bar.</li> <li><a href="https://www.getpaint.net/%20">Paint.NET</a> is great for image and photo editing. You can <a href="https://www.getpaint.net/download.html#download">download </a>it or install it from the <a href="https://www.microsoft.com/en-us/p/paintnet/9nbhcs1lx4r0?ocid=badge&amp;rtc=1#activetab=pivot:overviewtab">Microsoft Store</a>.</li> <li><a href="http://www.7-zip.org/">7-Zip</a> - The best app to create or unpack archives (zip, rar, etc). Very fast, free and open source.</li> <li><a href="https://notepad-plus-plus.org">Notepad++</a> is a free (as in &#8220;free speech&#8221; and also as in &#8220;free beer&#8221;) source code editor and Notepad replacement that supports several languages.&#160;</li> <li><a href="https://freefilesync.org/">FreeFileSync</a>&#160;FreeFileSync is a folder comparison and synchronization software that creates and manages backup copies of all your important files. Instead of copying every file every time, FreeFileSync determines the differences between a source and a target folder and transfers only the minimum amount of data needed. I use it to keep my desktop and laptops in sync.&#160;</li> <li><a href="https://docs.microsoft.com/en-us/sysinternals/downloads/zoomit">ZoomIt </a>is a screen zoom and annotation tool for technical presentations that include application demonstrations. I use it a lot in my trainings and presentations.</li> <li><a href="https://dotnet.microsoft.com/en-us/platform/upgrade-assistant">.NET Upgrade Assistant</a>&#160;The .NET Upgrade Assistant is a .NET global tool that helps you incrementally upgrade your .NET Framework-based applications. Take advantage of performance gains, deployment flexibility, and innovation by upgrading to the modern .NET (Core) platform.</li> <li><a href="https://www.microsoft.com/store/productId/9WZDNCRDXF41">Character Map UWP</a> is a modern, native UWP replacement for the Win32 Character Map and Windows Font Viewer with flawless high DPI and touch support.</li> <li><a href="https://www.microsoft.com/store/productId/9MSVH128X2ZT">WinUI 2 Gallery</a> app demonstrates all of the Xaml and Windows UI library controls available to make a Fluent Windows 10 app.</li> <li><a href="https://www.microsoft.com/store/productId/9P3JFPWWDZRC">WinUI 3 Gallery</a> app demonstrates all of the Windows UI 3 library controls and styles available to make a WinUI 3 app with the Windows App SDK.</li> <li><a href="https://www.microsoft.com/store/productId/9N2XD3Q8X57C">Fluent XAML Theme Editor</a> is a&#160;design development tool you can use to create custom themes for the Windows Universal Platform. This tool also helps with the development flow by generating and exporting your chosen theme to a XAML markup resource dictionary.This tool and it&apos;s source are public on <a href="https://github.com/Microsoft/fluent-xaml-theme-editor">GitHub</a>.</li> <li><a href="https://www.microsoft.com/en-us/p/xaml-diff/9nblggh63p3x?rtc=1&amp;activetab=pivot:overviewtab">XAML Diff</a>&#160;Is a tool which generates the UWP Visual State Setters using a diff analysis of your named elements in your XAML. I wrote it myself and published it in the Microsoft Store. I wrote a&#160;<a href="../../blog/2018/xaml-diff-generate-visual-state-setters">blog&#160;</a>post about it last year. I hope you like it. I find it very useful.&#160;</li> <li><a href="https://www.microsoft.com/store/productId/9NBLGGH4TLCQ">Windows Community Toolkit Sample App</a>. The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common .NET developer tasks building UWP and WinUI 3 apps for Windows 10 and Windows 11. The toolkit is part of the .NET Foundation and available on GitHub at http://aka.ms/windowstoolkit</li> <li><a href="The%20CommunityToolkit.Mvvm%20package%20(aka%20MVVM%20Toolkit,%20formerly%20named%20Microsoft.Toolkit.Mvvm)%20is%20a%20modern,%20fast,%20and%20modular%20MVVM%20library.%20It%20is%20part%20of%20the%20.NET%20Community%20Toolkit%20and%20is%20built%20to%20be%20platform%20and%20runtime%20independent,%20simple%20to%20pick-up%20and%20use,%20&#224;%20la%20carte,%20and%20providing%20a%20lean%20and%20performant%20reference%20implementation%20for%20all%20basic%20MVVM%20building%20blocks.%20The%20MVVM%20Toolkit%20is%20maintained%20and%20published%20by%20Microsoft,%20and%20part%20of%20the%20.NET%20Foundation.%20It%20is%20also%20used%20by%20several%20first%20party%20applications%20that%20are%20built%20into%20Windows,%20such%20as%20the%20Microsoft%20Store.%20The%20toolkit%20is%20available%20on%20GitHub%20at%20http:/aka.ms/windowstoolkit.">MVVM Toolkit Sample App</a>. The CommunityToolkit.Mvvm package (aka MVVM Toolkit, formerly named Microsoft.Toolkit.Mvvm) is a modern, fast, and modular MVVM library. It is part of the <a href="https://github.com/CommunityToolkit/dotnet">.NET Community Toolkit</a> and is built to be platform and runtime independent, simple to pick-up and use, &#224; la carte, and providing a lean and performant reference implementation for all basic MVVM building blocks. The MVVM Toolkit is maintained and published by Microsoft, and part of the .NET Foundation. It is also used by several first party applications that are built into Windows, such as the Microsoft Store.&#160;</li> <li><a href="https://www.microsoft.com/store/productId/9NBLGGH4NNS1">Microsoft App Installer</a> for Windows 10 makes sideloading Windows 10 apps easy: Just double-click the app package, and you won&apos;t have to run PowerShell to install apps. App Installer presents the package information like app name, publisher, version, display logo, and the capabilities requested by the app. Get right into the app, no hassles--and if installation doesn&apos;t work, the error messages were designed to help you fix the problem. Windows Package Manager is supported through App Installer starting on Windows 10 1809.</li> <li><a href="https://www.pwabuilder.com/">PWABuilder</a> <span style="color: #4d4d4d; font-family: -apple-system, BlinkMacSystemFont, &apos;Segoe UI&apos;, Helvetica, Arial, sans-serif, &apos;Apple Color Emoji&apos;, &apos;Segoe UI Emoji&apos;, &apos;Segoe UI Symbol&apos;; font-size: 16px; background-color: #ffffff;">enables developers to quickly and easily to generate store uploadable packages for the Microsoft, Google Play, and iOS App stores.</span></li> <li><a href="https://www.office.com/?omkt=nl-nl">Microsoft Office</a> is great and I use it a lot. I use PowerPoint for my slides, OneNote for my notes and Outlook for my mails. I don&apos;t like Word but I have no better alternative. Excel is great but I don&apos;t have to use it a lot. I love that OneNote syncs all my notes on every computer and my phone.</li> <li><a href="https://www.microsoft.com/store/productId/9NBLGGH4NNS1">Microsoft To Do</a>.Whether you want to increase your productivity, decrease your stress levels, or just free up some mental space, Microsoft To Do makes it easy to plan your day and manage your life.</li> <li><a href="https://learn.microsoft.com/en-us/windows/powertoys/">Microsoft PowerToys</a> is a set of utilities for power users to tune and streamline their Windows experience for greater productivity.</li> <li><a href="https://support.microsoft.com/en-gb/help/22878/windows-10-record-steps">Steps Recorder</a> (called Problems Steps Recorder in Windows 7), is a program that helps you troubleshoot a problem on your device by recording the exact steps you took when the problem occurred. You can then send this record to a support professional to help them diagnose the problem. It is already installed on your Windows computer. Just hit Windows+R and type PSR. I wish all my users would use it to report problems to me.</li> <li><a href="https://www.microsoft.com/en-us/p/nuget-package-explorer/9wzdncrdmdm3#activetab=pivot:overviewtab">NuGet Explorer</a>&#160;allows browsing <a href="https://www.nuget.org/">NuGet</a> packages from an online feed and viewing contents of the packages. NuGet is a package management tool in Visual Studio. It is <a href="https://github.com/NuGetPackageExplorer/NuGetPackageExplorer">open source</a> and setup by&#160;<a href="https://oren.codes/">Oren Novotny</a>.</li> <li><a href="https://www.audacityteam.org/">Audacity</a> is an easy-to-use, multi-track audio editor and recorder for Windows, Mac OS X, GNU/Linux and other operating systems. I use it for editing the sounds in my games.</li> <li><a href="https://www.getpostman.com/">Postman</a> is a collaboration platform for Web API (REST &amp; HTTP) development. Postman&apos;s features simplify each step of building an API and streamline collaboration so you can create better APIs - faster.</li> <li><a href="http://www.fiddlertool.com/">Fiddler</a> is the easy, clean, and powerful debugging proxy for checking out HTTP between here and there. It even supports sniffing SSL traffic.</li> <li><a href="https://rufus.ie/">Rufus</a> creates bootable USB drives the easy way.</li> <li><a href="https://github.com/">GitHub</a> is the place where I store <a href="https://github.com/sonnemaf">my </a>repositories. I use <a href="https://desktop.github.com/">GitHub Desktop</a>, <a href="https://github.com/gitextensions/gitextensions">Git Extensions</a> and&#160;<a href="https://www.sourcetreeapp.com/">Sourcetree </a>as my git clients.</li> <li><a href="https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15">SQL Server Management Studio</a> (SSMS) -&#160;SQL Server Management Studio (SSMS) is an integrated environment for managing any SQL infrastructure, from SQL Server to Azure SQL Database.</li> <li><a href="https://docs.microsoft.com/en-us/sql/ssdt/download-sql-server-data-tools-ssdt?view=sql-server-ver15">SQL Server Data Tools</a> (SSDT) is a modern development tool for building SQL Server relational databases, Azure SQL databases, Analysis Services (AS) data models, Integration Services (IS) packages, and Reporting Services (RS) reports. With SSDT, you can design and deploy any SQL Server content type with the same ease as you would develop an application in Visual Studio. It is an individual component inside the Visual Studio Installer.</li> <li><a href="https://www.microsoft.com/store/productId/9NKSQGP7F2NH">WhatsApp</a> from Meta is a 100% free messaging app. It&#8217;s used by over 2B people in more than 180 countries. It&#8217;s simple, reliable, and private, so you can easily keep in touch with your friends and family.&#160;</li> <li><a href="https://github.com/valinet/ExplorerPatcher">ExplorerPatcher</a> is an Open Source portable executable that lets you customize the Windows 11 Start Menu, Taskbar, System Tray, File Explorer, and more.</li> </ul> <h3>Analyzers</h3> <p>Analyzers where added to Visual Studio 2015. I love this technique and here is a list of analyzers which I use a lot.</p> <ul> <li><a href="https://github.com/microsoft/RoslynClrHeapAllocationAnalyzer">ClrHeapAllocationAnalyzer</a> - Roslyn based C# heap allocation diagnostic analyzer that can detect explicit and many implicit allocations like boxing, display classes (aka closures), implicit delegate creations, etc.&#160;</li> <li><a href="https://github.com/sonnemaf/ReflectionIT.Analyzer">ReflectionIT Analyzer</a> - I wrote this analyzer myself. It contains a few analyzers and fixes of things I did wrong in my code. Now I can quickly find and fix them.&#160;</li> <li><a href="https://www.nuget.org/packages/ErrorProne.NET.CoreAnalyzers/0.4.0-beta.1">ErrorProne.NET.CoreAnalyzers</a> and <a href="https://www.nuget.org/packages/ErrorProne.NET.Structs/0.4.0-beta.1">ErrorProne.NET.Structs</a> and is a set of Roslyn-based analyzers that will help you to write correct code. The idea is similar to Google&apos;s but instead of Java, the analyzers are focusing on correctness (and, maybe, performance) of C# programs. You might want to set <em>error_prone.large_struct_threshold </em>to a value below the default of 24.</li> <li><a href="https://github.com/DotNetAnalyzers/WpfAnalyzers">WpfAnalyzers</a> Roslyn analyzers for WPF.</li> <li><a href="https://github.com/meziantou/Meziantou.Analyzer">Meziantou.Analyzer</a>&#160;A Roslyn analyzer to enforce some good practices in C#.</li> <li><a href="https://github.com/microsoft/Rapid-XAML-Toolkit">Rapid XAML Toolkit</a>&#160;Tools to accelerate XAML app development. It is even <a href="https://github.com/microsoft/Rapid-XAML-Toolkit/blob/dev/docs/extending-xaml-analysis.md">extendable</a>.</li> <li><a href="https://security-code-scan.github.io/"> Security Code Scan</a>&#160;Detects various <a href="https://security-code-scan.github.io/#rules">security vulnerability patterns</a>: SQL Injection, Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), XML eXternal Entity Injection (XXE), etc.</li> </ul> <h3>Visual Studio Extensions</h3> <ul> <li><a href="https://marketplace.visualstudio.com/items?itemName=SharpDevelopTeam.ILSpy">ILSpy</a> -&#160;Integrates the ILSpy decompiler into Visual Studio.&#160;</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=GitHub.copilot">GitHub Copilot</a> provides autocomplete-style suggestions from an AI pair programmer as you code. You can receive suggestions from GitHub Copilot either by starting to write the code you want to use, or by writing a natural language comment describing what you want the code to do.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=unoplatform.uno-platform-addin-2022">Uno Platform Solution Templates</a> - Solution templates for Uno Platform enabled projects.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebEssentials2019">Web Essentials</a> - Essential tools for writing Web (in my case ASP.NET) apps. The easiest way to set up Visual Studio 2019 for the ultimate web development experience. Couldn&apos;t find a 2022 version but many of the extensions in this package are also available for 2022.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=TeamXavalon.XAMLStyler">XAML Styler</a> - Formats XAML source code by sorting the attributes based on their importance. This tool can help you/your team maintain a better XAML coding style as well as a much better XAML readability.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=StephanZehetner.InliningAnalyzer">Inlining Analyzers</a> shows if a method call will be inlined by the JIT Compiler. Method calls are highlighted right in the source code and also display the reason for a failed inline as given by the JIT Compiler.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools">EF Core Power Tools</a> - I use it to reverse engineer existing databases to <a href="https://docs.microsoft.com/en-us/ef/#pivot=efcore">Entity Framewok Core</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=rudyhuyn.ReswPlus">ReswPlus</a> -&#160;Advanced Resw File Code Generator for UWP apps. ReswPlus is a Visual Studio extension enriching your existing .resw files. Written by <a href="https://www.rudyhuyn.com/blog/">Rudy Huyn</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=MadsKristensen.OpenCommandLine">Open Command Line</a> -&#160;Opens a command line at the root of the project.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=Diagnostics.ConcurrencyVisualizer2017">Concurrency Visualizer for Visual Studio 2022</a> - Visualizes execution history and profiles applications.&#160;</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=EgorBogatov.Disasmo">Disasmo</a> - Click on any method to see what ASM JIT will generate for it.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=MultilingualAppToolkit.MultilingualAppToolkit-18308">Multilingual App Toolkit v4.0 (VS 2017+)</a> helps you localize your Windows and Xamarin Apps by providing file management, translation services, translation editor, and build integration.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=FonsSonnemans.ReflectionITRefactoring">ReflectionIT.Refactoring</a>&#160;- I wrote this extension myself. It contains a few refactorings to speedup my coding.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=josefpihrt.Roslynator2019">Roslynator</a> - A collection of 500+ analyzers, refactorings and fixes for C#, powered by Roslyn. I don&apos;t use it a lot but it is worth to mention.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=MadsKristensen.RainbowBraces">Rainbow Braces</a> - Colorizes matching brace pairs to make it easy to identify them and their scope. Works for curly brackets, parentheses, and square brackets.</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=ChrisDexter.RunCoverletReportVs2022">RunCoverletReport</a> An easy to use visual studio 2022 extension to run coverlet code coverage and then use report generator and show results in visual studio with syntax highlighting. Note: Relies on <a href="https://github.com/coverlet-coverage/coverlet">Coverlet</a> and <a href="https://github.com/danielpalme/ReportGenerator">Report Generator</a> being available.&#160;</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=FortuneNgwenya.FineCodeCoverage2022">Fine Code Coverage</a> - Visualize unit test code coverage easily for free in Visual Studio Community Edition (and other editions too)</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=FonsSonnemans.RDwCB">ResourceDictionary with Code-behind</a> - ItemTemplate for an empty, keyed collection of XAML resources with Code-behind which can be used for x:Bind (UWP &amp; WinUI) and EventHandlers (UWP + WinUI + WPF).</li> </ul> <h3>NuGet Packages</h3> <ul> <li><a href="https://github.com/CommunityToolkit/WindowsCommunityToolkit">Windows Community Toolkit</a> is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP and WinAppSdk/WinUI3 apps for Windows 10. It is <a href="https://github.com/windows-toolkit/WindowsCommunityToolkit">open source</a> and has great <a href="https://docs.microsoft.com/en-us/windows/communitytoolkit/">documentation</a>.&#160;</li> <li><a href="https://www.nuget.org/packages/CommunityToolkit.Diagnostics/">CommunityToolkit.Diagnostics</a>. A set of helper APIs (specifically, Guard and ThrowHelper) that can be used for cleaner, more efficient and less error-prone argument validation and error checking.</li> <li><a href="https://www.nuget.org/packages/CommunityToolkit.Mvvm">CommunityToolkit.Mvvm</a>. A fast, modular, platform-agnostic MVVM library, which is the official successor of MvvmLight. It&apos;s used extensively in the Microsoft Store and other first party apps.</li> <li><a href="https://www.nuget.org/packages/CommunityToolkit.HighPerformance/">CommunityToolkit.HighPerformance</a>. A collection of helpers for working in high-performance scenarios.&#160;</li> <li><a href="https://www.nuget.org/packages/Microsoft.UI.Xaml">Microsoft.UI.Xaml</a> (aka WinUI2) - This package provides backward-compatible versions of Windows UI features including UWP XAML controls, and Fluent styles and materials. It is part of the Windows UI Library. I use it in all of my UWP apps. The next minor version will also contain the NumberBox control which I <a href="https://github.com/microsoft/microsoft-ui-xaml/issues/483">proposed</a>. The next major release is WinUI 3.0, it is now already in <a href="https://docs.microsoft.com/en-us/uwp/toolkits/winui3/">Alpha</a>. It will allow you to use the UWP controls in .NET (Core/5) as an alternative for WPF.&#160;</li> <li><a href="https://www.nuget.org/packages/Microsoft.WindowsAppSDK">Microsoft.WindowsAppSDK</a> (aka WinUI3) - The <a href="https://github.com/microsoft/windowsappsdk">Windows App SDK</a> empowers all Windows Desktop apps with modern Windows UI, APIs, and platform features, including back-compat support.</li> <li><a href="https://www.nuget.org/packages/Newtonsoft.Json/">Newtonsoft.Json</a> (aka Json.NET) is a popular high-performance JSON framework for .NET. I use it for all my JSON work. In .NET Core 3 I switched to <a href="https://devblogs.microsoft.com/dotnet/try-the-new-system-text-json-apis/">System.Text.Json</a>.</li> <li><a href="https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/">Microsoft.Xaml.Behaviors.Uwp.Managed</a> - Blend Behaviors and Actions for UWP, <a href="https://github.com/Microsoft/XamlBehaviors">open source</a>.</li> <li><a href="https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.WinUI.Managed">Microsoft.Xaml.Behaviors.WinUI.Managed</a> - Easily add interactivity to your WinUI apps using XAML Behaviors. Behaviors encapsulate reusable functionalities for elements that can be easily added to your XAML without the need for more imperative code. This is the managed version for C# WinUI3 projects.</li> <li><a href="https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Wpf/">Microsoft.Xaml.Behaviors.Wpf</a>&#160; - Blend Behaviors, Actions and Triggers for WPF, <a href="https://github.com/Microsoft/XamlBehaviorsWpf%20">open source</a>.</li> <li><a href="https://github.com/dotMorten/WindowsStateTriggers">WindowsStateTriggers</a> and <a href="https://github.com/Herdo/AdaptiveTriggerLibrary">AdaptiveTriggerLibrary</a> - Collections of custom UWP visual state triggers.&#160;</li> <li><a href="https://www.nuget.org/packages/PlayFabAllSDK/">PlayFabAllSDK</a> - I use this for leaderboards in my games.</li> <li><a href="https://www.nuget.org/packages/ThomasLevesque.WeakEvent">ThomasLevesque.WeakEvent</a> -&#160;A generic weak event implementation.</li> <li><a href="https://www.nuget.org/packages/Nito.AsyncEx/">Nito.AsyncEx</a> -&#160;A helper library for the Task-Based Asynchronous Pattern (TAP).</li> <li><a href="https://www.nuget.org/packages?q=Microsoft.AppCenter">Microsoft.AppCenter</a> - I use it to diagnose the <a href="https://www.nuget.org/packages/Microsoft.AppCenter.Crashes/">Crashes</a> and track <a href="https://www.nuget.org/packages/Microsoft.AppCenter.Analytics/">Analitycs </a>events of my UWP apps. The quality of the StackTraces is really great.</li> <li><a href="https://www.nuget.org/packages/Microsoft.Services.Store.SDK/">Microsoft.Services.Store.SDK</a> -&#160;The Microsoft Store Services SDK includes advertising and engagement frameworks. The best way to generate revenue in my free games.</li> <li><a href="https://www.nuget.org/packages/Win2D.uwp/">Win2D.uwp</a> -&#160;An easy-to-use Windows Runtime API for immediate mode 2D graphics rendering. I use it in some of my UWP apps.&#160;</li> <li><a href="https://www.nuget.org/packages/ReportGenerator">ReportGenerator</a> converts coverage reports generated by coverlet, OpenCover, dotCover, Visual Studio, NCover, Cobertura, JaCoCo, Clover, gcov or lcov into human readable reports in various formats. The reports show the coverage quotas and also visualize which lines of your source code have been covered.</li> <li><a href="https://www.nuget.org/packages/Microsoft.EntityFrameworkCore">Microsoft.EntityFrameworkCore</a> and&#160;<a href="https://www.nuget.org/packages/Dapper/">Dapper</a> - My two favorite ORMs. EF is easy and Dapper is fast. I often use them both in a project.</li> <li><a href="https://www.nuget.org/packages/xunit/">xUnit</a> is a developer testing framework, built to support Test Driven Development, with a design goal of extreme simplicity and alignment with framework features. I use it with <a href="https://www.nuget.org/packages/xunit.runner.visualstudio/">xunit.runner.visualstudio</a> which integrates it with the Visual Studio Test Explorer. &#160;</li> <li><a href="https://www.nuget.org/packages/bunit.template/">bUnit</a> is a testing library for Blazor Components. Its goal is to make it easy to write comprehensive, stable unit tests.&#160;</li> <li><a href="https://www.nuget.org/packages/Microsoft.AspNetCore.Components.QuickGrid">QuickGrid for Blazor</a> is an experimental grid component built by the Blazor team.</li> <li><a href="https://datalnet.com">Datalnet Blazor Components</a> is a Blazor component library. All components are written in C#. It includes the super fast BlGrid.</li> <li><a href="https://blazorise.com/">Blazorise</a> is a component library built on top of Blazor with support for multiple CSS frameworks like Bootstrap, Bulma, AntDesign and Material.</li> <li><a href="https://www.nuget.org/packages/BlazorStrap.V5">BlazorStrap</a> Bootstrap 4/5 components for Blazor.</li> <li><a href="https://www.matblazor.com/">MatBlazor</a> Material Design components for Blazor</li> </ul> <h3>Closure</h3> <p>I hope this list is useful for you. Especially if you are also an Windows App developer. I will probably write a new one in the future because things will change, as always.</p> <p>Fons</p></body></html>]]></content:encoded> </item> <item> <title>Implement IXmlSerializable in a readonly struct</title> <link>https://www.reflectionit.nl/blog/2022/implement-ixmlserializable-in-a-readonly-struct</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>CSharp</category> <guid>https://www.reflectionit.nl/blog/2022/implement-ixmlserializable-in-a-readonly-struct</guid> <pubDate>Tue, 14 Jun 2022 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>Xml serialization is really common. For a class this is done automatically, but not for your own struct. The primitive structs from Microsoft (bool, byte, short, int, long, double, decimal, etc.) don&#8217;t have this problem. The serialization and deserialization of those types are done by the XmlSerializer class. For your own struct you have to implement the IXmlSerializable interface. This isn&#8217;t really hard, but it is harder when the struct is a readonly struct. A feature which Microsoft added to C# 7.2 a few years ago. The problem is caused by the ReadXml() method of this interface. This method returns a void which means that you have to modify the fields inside the struct, which is not allowed if the struct is readonly. Luckily there is a solution using the Unsafe.AsRef() method. In this blog I will explain how to use it.</p> <h3>Xml Serialization</h3> <p>To serialize or deserialize an object you can use an XmlSerializer. The following code example shows you how to do this. It uses a StringWriter to serialize it to a string. It uses a StringReader to deserialize from a string. You can use different readers and writers like the StreamWriter and StreamReader when you want to write it to disk or the network. The next code is written in C# 10 so it uses modern features like top-level statements, nullable reference types and implicit usings.</p> <pre class="brush: csharp">using System.Xml; using System.Xml.Schema; using System.Xml.Serialization; var employee = new Employee(&quot;Fons&quot;, 2000); var xml = SerializeToXml(employee); Console.WriteLine(xml); xml = &quot;&lt;Employee&gt;&lt;Name&gt;Jim&lt;/Name&gt;&lt;Salary&gt;4000&lt;/Salary&gt;&lt;/Employee&gt;&quot;; employee = DeserializeFromXml&lt;Employee&gt;(xml); Console.WriteLine(employee.ToString()); static string SerializeToXml&lt;T&gt;(T point) { XmlSerializer serializer = new XmlSerializer(typeof(T)); using (var sw = new StringWriter()) { serializer.Serialize(sw, point); return sw.ToString(); } } static T DeserializeFromXml&lt;T&gt;(string xml) { XmlSerializer serializer = new XmlSerializer(typeof(T)); using (var sr = new StringReader(xml)) { return (T)serializer.Deserialize(sr)!; } } public class Employee { public string? Name { get; set; } public decimal Salary { get; set; } public Employee() { // Public parameterless constructuctor is // required for Deserialization } public Employee(string? name, decimal salary) { Name = name; Salary = salary; } public override string ToString() =&gt; $&quot;Employee {Name} {Salary}&quot;; } </pre> <p>The output of the serialization is then</p> <pre class="brush: html">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-16&quot;?&gt; &lt;Employee xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot;&gt; &lt;Name&gt;Fons&lt;/Name&gt; &lt;Salary&gt;2000&lt;/Salary&gt; &lt;/Employee&gt; </pre> <p>Because the Employee is a class the serialization doesn&#8217;t require any special treatment. You can although use attributes to finetune the process. For example you can use the XmlAttribute to indicate that a property should be serialized into an xml attribute and not into an xml element. In the next example this attribute is used for the Salary property.</p> <pre class="brush: csharp">public class Employee { public string? Name { get; set; } [XmlAttribute] public decimal Salary { get; set; } public Employee() { // Public parameterless constructuctor is // required for Deserialization } public Employee(string? name, decimal salary) { Name = name; Salary = salary; } public override string ToString() =&gt; $&quot;Employee {Name} {Salary}&quot;; } </pre> <p>The output of the Serialization is then</p> <pre class="brush: html">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-16&quot;?&gt; &lt;Employee xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot; Salary=&quot;2000&quot;&gt; &lt;Name&gt;Fons&lt;/Name&gt; &lt;/Employee&gt; </pre> <h3>Struct Serialization</h3> <p>If you want to serialize a struct you have to implement the IXmlSerializable interface. This interface has 3 methods which aren&#8217;t really difficult to implement. In this example I use a Point struct. It is implemented as a C# 10 record struct which will automatically implement fast equality logic. This logic you should otherwise have to write yourself. In the next example the WriteXml() writes the public fields X and Y to xml attributes. The ReadXml() read them from the xml attributes.</p> <pre class="brush: csharp">using System.Xml; using System.Xml.Schema; using System.Xml.Serialization; var point = new Point(1, 2); Console.WriteLine(point.ToString()); var xml = SerializeToXml(point); Console.WriteLine(xml); xml = &quot;&lt;Point X=\&quot;3\&quot; Y=\&quot;4\&quot; /&gt;&quot;; point = DeserializeFromXml&lt;Point&gt;(xml); Console.WriteLine(point.ToString()); public record struct Point : IXmlSerializable { public int X; public int Y; public Point(int x, int y) { X = x; Y = y; } public double Dist =&gt; Math.Sqrt((long)X * X + (long)Y * Y); public override string ToString() =&gt; $&quot;{X}:{Y}&quot;; public XmlSchema GetSchema() =&gt; null!; public void ReadXml(XmlReader reader) { int x = int.Parse(reader.MoveToAttribute(&quot;X&quot;) ? reader.Value : &quot;0&quot;); int y = int.Parse(reader.MoveToAttribute(&quot;Y&quot;) ? reader.Value : &quot;0&quot;); reader.Skip(); this = new Point(x, y); } public void WriteXml(XmlWriter writer) { writer.WriteAttributeString(&quot;X&quot;, X.ToString()); writer.WriteAttributeString(&quot;Y&quot;, Y.ToString()); } } </pre> <p>The output of the Serialization is then</p> <pre class="brush: html">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-16&quot;?&gt; &lt;Point X=&quot;1&quot; Y=&quot;2&quot; /&gt; </pre> <h3>Readonly Struct Serialization</h3> <p>If your struct is readonly you have to modify the ReadXml() method. In a readonly struct you can&#8217;t modify the fields of the struct. The Unsafe.AsRef() method allows you to modify the current value although it is readonly. It feels like a hack but libraries like <a href="https://nodatime.org/">NodaTime</a> and <a href="https://github.com/Qowaiv/Qowaiv">Qowaiv</a> use the same solution. NodaTime is written by John Skeet and if he dares to use it, I will use it too. The only difference in the code is in line 28.</p> <pre class="brush: csharp">using System.Runtime.CompilerServices; using System.Xml; using System.Xml.Schema; using System.Xml.Serialization; public readonly record struct Point : IXmlSerializable { public readonly int X; public readonly int Y; public Point(int x, int y) { X = x; Y = y; } public double Dist =&gt; Math.Sqrt((long)X * X + (long)Y * Y); public override string ToString() =&gt; $&quot;{X}:{Y}&quot;; public XmlSchema GetSchema() =&gt; null!; public void ReadXml(XmlReader reader) { int x = int.Parse(reader.MoveToAttribute(&quot;X&quot;) ? reader.Value : &quot;0&quot;); int y = int.Parse(reader.MoveToAttribute(&quot;Y&quot;) ? reader.Value : &quot;0&quot;); reader.Skip(); // Update this using the Unsafe.AsRef() workaround Unsafe.AsRef(this) = new Point(x, y); } public void WriteXml(XmlWriter writer) { writer.WriteAttributeString(&quot;X&quot;, X.ToString()); writer.WriteAttributeString(&quot;Y&quot;, Y.ToString()); } } </pre> <p>If you want to use this solution in a project targeting the old .NET Framework of .NET Standard 2.0 you have to add the <a href="https://www.nuget.org/packages/System.Runtime.CompilerServices.Unsafe">System.Runtime.CompilerServices.Unsafe</a> NuGet package to the project. This will allow you to use the Unsafe class.</p> <h3>Closure</h3> <p>I hope you like this blog post. C# and .NET are great but you have to know the quirks.</p> <p>Fons</p></body></html>]]></content:encoded> </item> <item> <title>Accelerator keys for ContentDialog Buttons</title> <link>https://www.reflectionit.nl/blog/2022/accelerator-keys-for-contentdialog-buttons</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>Apps</category> <category>XAML</category> <category>UWP</category> <category>WinUI</category> <category>WindowsAppSDK</category> <guid>https://www.reflectionit.nl/blog/2022/accelerator-keys-for-contentdialog-buttons</guid> <pubDate>Fri, 25 Feb 2022 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p><span style="font-size: 1em;">Accelerator keys (or keyboard accelerators) are keyboard shortcuts that improve the usability and accessibility of your Windows applications by providing an intuitive way for users to invoke common actions or commands without navigating the app UI. You can add them to a Button using the KeyboardAccelerators property. See the example below.</span></p> <pre class="brush: html">&lt;Button HorizontalAlignment=&quot;Center&quot; Click=&quot;Button_Click&quot; Content=&quot;Test&quot;&gt; &lt;Button.KeyboardAccelerators&gt; &lt;KeyboardAccelerator Key=&quot;T&quot; /&gt; &lt;/Button.KeyboardAccelerators&gt; &lt;/Button&gt; </pre> <p>A keyboard is indispensable for users with certain disabilities (see Keyboard accessibility), and is also an important tool for users who prefer it as a more efficient way to interact with an app.</p> <h3>ContentDialog&#160;</h3> <p>ContentDialog controls in WinUI3 and UWP are modal UI overlays that provide contextual app information. They block interactions with the app window until being explicitly dismissed. They often request some kind of action from the user. They replace the MessageBox from Windows Forms and WPF.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/XAML/ContentDialog/ConfirmContentDialog.png" alt="WinUI XAML with normal Row and Column Definitions" width="420" /></p> <p>You can create the above ContentDialog using code.</p> <pre class="brush: csharp">private async void Button_Click(object sender, RoutedEventArgs e) { var confirmDialog = new ContentDialog { Title = &quot;Confirm&quot;, PrimaryButtonText = &quot;Yes&quot;, SecondaryButtonText = &quot;No&quot;, CloseButtonText = &quot;Cancel&quot;, Content = &quot;Are you sure you want this?&quot;, }; var result = await confirmDialog.ShowAsync(); (sender as Button).Content = result.ToString(); } </pre> <p>You can also add a ConfirmDialog to your project which makes it easier create a more complex content. The following ConfirmContentDialog using the ContentDialog Item Template. This template is <a href="https://github.com/microsoft/microsoft-ui-xaml/issues/6583">missing</a> in WinUI. You can workaround this by coping a UWP ContentDialog.xaml into your WinUI project and then rename the namespace Windows.UI.* to Microsoft.UI.*.</p> <pre class="brush: html">&lt;ContentDialog x:Class=&quot;ContentDialogDemoUWP.ConfirmContentDialog&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; Title=&quot;Confirm&quot; CloseButtonText=&quot;Cancel&quot; PrimaryButtonText=&quot;Yes&quot; SecondaryButtonText=&quot;No&quot;&gt; &lt;Grid&gt; &lt;TextBlock Text=&quot;Are you sure you want this?&quot; /&gt; &lt;/Grid&gt; &lt;/ContentDialog&gt; </pre> <p>You can show this ConfirmContentDialog using the ShowAsync() method. The result (Which action button was clicked: Primary, Secondary or Close (None)) is then placed in the Content of the Button which opened the content dialog.</p> <pre class="brush: csharp">private async void Button_Click(object sender, RoutedEventArgs e) { var confirmDialog = new ConfirmContentDialog(); var result = await confirmDialog.ShowAsync(); (sender as Button).Content = result.ToString(); } </pre> <p><span style="font-size: 1em;">A ContentDialog can have 3 buttons: Primary, Secondary and Close. The Close button has always the Escape as access key. The Primary and Secondary have none. There is no easy way to set them. There is only a Text and a Style property for each button in the ContentDialog. The PrimaryKeyboardAccelerators and SecondaryKeyboardAccelerators properties are just not there. I thought I could &apos;fix&apos; this by setting the KeyboardAccelerators property using the Style the Button. Unfortunatly that didn&apos;t work because this KeyboardAccelerators property is not a DependencyProperty. Only DependencyProperty can be set in a Style. I already created this </span><a style="font-size: 1em;" href="https://github.com/microsoft/microsoft-ui-xaml/issues/6672">issue</a><span style="font-size: 1em;"> to get this fixed in WinUI3.</span></p> <h3>&#160;Solution</h3> <p>The solution I found is quite simple. In XAML you can create attachted properties.&#160;An attached property is a Extensible Application Markup Language (XAML) concept. Attached properties enable extra property/value pairs to be set on any XAML element that derives from&#160;<a class="no-loc" href="https://docs.microsoft.com/en-us/dotnet/api/system.windows.dependencyobject" data-linktype="absolute-path">DependencyObject</a>, even though the element doesn&apos;t define those extra properties in its object model. The attached properties can be used in the Style which allows me to set the KeyboardAccelerators for the Buttons.</p> <p>I created a KeyboardAccelerator and KeyboardAccelerators attached properties in my KeyboardAcceleratorsServices class. The first one is used if you only need one KeyboardAccelerator. The second one if you need more than one. The OnKeyboardAcceleratorChanged() and OnKeyboardAcceleratorsChanged() methods add the KeyboardAccelerator(s) to the Button.</p> <pre class="brush: csharp">using System.Collections.Generic; using Windows.UI.Xaml; using Windows.UI.Xaml.Input; namespace ContentDialogDemoUWP.Helpers { public class KeyboardAcceleratorsServices { #region KeyboardAccelerator Attached Property /// &lt;summary&gt; /// Identifies the KeyboardAccelerator attachted property. This enables animation, styling, binding, etc... /// &lt;/summary&gt; public static readonly DependencyProperty KeyboardAcceleratorProperty = DependencyProperty.RegisterAttached(&quot;KeyboardAccelerator&quot;, typeof(KeyboardAccelerator), typeof(KeyboardAcceleratorsServices), new PropertyMetadata(default(KeyboardAccelerator), OnKeyboardAcceleratorChanged)); /// &lt;summary&gt; /// KeyboardAccelerator changed handler. /// &lt;/summary&gt; /// &lt;param name=&quot;d&quot;&gt;UIElement that changed its KeyboardAccelerator attached property.&lt;/param&gt; /// &lt;param name=&quot;e&quot;&gt;DependencyPropertyChangedEventArgs with the new and old value.&lt;/param&gt; private static void OnKeyboardAcceleratorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is UIElement source) { if (e.NewValue is KeyboardAccelerator value) { source.KeyboardAccelerators.Add(value); } } } /// &lt;summary&gt; /// Gets the value of the KeyboardAccelerator attached property from the specified FrameworkElement . /// &lt;/summary&gt; public static KeyboardAccelerator GetKeyboardAccelerator(DependencyObject obj) { return (KeyboardAccelerator)obj.GetValue(KeyboardAcceleratorProperty); } /// &lt;summary&gt; /// Sets the value of the KeyboardAccelerator attached property to the specified FrameworkElement . /// &lt;/summary&gt; /// &lt;param name=&quot;obj&quot;&gt;The object on which to set the KeyboardAccelerator attached property.&lt;/param&gt; /// &lt;param name=&quot;value&quot;&gt;The property value to set.&lt;/param&gt; public static void SetKeyboardAccelerator(DependencyObject obj, KeyboardAccelerator value) { obj.SetValue(KeyboardAcceleratorProperty, value); } #endregion KeyboardAccelerator Attached Property #region KeyboardAccelerators Attached Property /// &lt;summary&gt; /// Identifies the KeyboardAccelerators attachted property. This enables animation, styling, binding, etc... /// &lt;/summary&gt; public static readonly DependencyProperty KeyboardAcceleratorsProperty = DependencyProperty.RegisterAttached(&quot;KeyboardAccelerators&quot;, typeof(IList&lt;KeyboardAccelerator&gt;), typeof(KeyboardAcceleratorsServices), new PropertyMetadata(default, OnKeyboardAcceleratorsChanged)); /// &lt;summary&gt; /// KeyboardAccelerators changed handler. /// &lt;/summary&gt; /// &lt;param name=&quot;d&quot;&gt;UIElement that changed its KeyboardAccelerators attached property.&lt;/param&gt; /// &lt;param name=&quot;e&quot;&gt;DependencyPropertyChangedEventArgs with the new and old value.&lt;/param&gt; private static void OnKeyboardAcceleratorsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is UIElement source) { if (e.NewValue is IList&lt;KeyboardAccelerator&gt; value) { foreach (var item in value) { source.KeyboardAccelerators.Add(item); } } } } /// &lt;summary&gt; /// Gets the value of the KeyboardAccelerators attached property from the specified FrameworkElement. /// &lt;/summary&gt; public static object GetKeyboardAccelerators(DependencyObject obj) { return (object)obj.GetValue(KeyboardAcceleratorsProperty); } /// &lt;summary&gt; /// Sets the value of the KeyboardAccelerators attached property to the specified FrameworkElement. /// &lt;/summary&gt; /// &lt;param name=&quot;obj&quot;&gt;The object on which to set the KeyboardAccelerators attached property.&lt;/param&gt; /// &lt;param name=&quot;value&quot;&gt;The property value to set.&lt;/param&gt; public static void SetKeyboardAccelerators(DependencyObject obj, object value) { obj.SetValue(KeyboardAcceleratorsProperty, value); } #endregion KeyboardAccelerators Attached Property } public class KeyboardAcceleratorList : List&lt;KeyboardAccelerator&gt; { } } </pre> <p>I can now create a Style for the Primary and Secondary buttons in the ContentDialog. In this Style I can use the attached properties to set the KeyboardAccelerator. The PrimaryButton (Yes) has two KeyboardAccelerators (lines 11-18). One for the Y key and another one for the J key (just for demo purpose). The SecondaryButton (No) has only one for the N key (lines 23-27). I also had to add the xml namespace <strong>helpers</strong> to the ContentDialog element, line 4.</p> <pre class="brush: html">&lt;ContentDialog x:Class=&quot;ContentDialogDemoUWP.ConfirmContentDialog&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; xmlns:helpers=&quot;using:ContentDialogDemoUWP.Helpers&quot; Title=&quot;Confirm&quot; CloseButtonText=&quot;Cancel&quot; PrimaryButtonText=&quot;Yes&quot; SecondaryButtonText=&quot;No&quot;&gt; &lt;ContentDialog.PrimaryButtonStyle&gt; &lt;Style BasedOn=&quot;{StaticResource AccentButtonStyle}&quot; TargetType=&quot;Button&quot;&gt; &lt;Setter Property=&quot;helpers:KeyboardAcceleratorsServices.KeyboardAccelerators&quot;&gt; &lt;Setter.Value&gt; &lt;helpers:KeyboardAcceleratorList&gt; &lt;KeyboardAccelerator Key=&quot;Y&quot; /&gt; &lt;KeyboardAccelerator Key=&quot;J&quot; /&gt; &lt;/helpers:KeyboardAcceleratorList&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/ContentDialog.PrimaryButtonStyle&gt; &lt;ContentDialog.SecondaryButtonStyle&gt; &lt;Style TargetType=&quot;Button&quot;&gt; &lt;Setter Property=&quot;helpers:KeyboardAcceleratorsServices.KeyboardAccelerator&quot;&gt; &lt;Setter.Value&gt; &lt;KeyboardAccelerator Key=&quot;N&quot; /&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/ContentDialog.SecondaryButtonStyle&gt; &lt;Grid&gt; &lt;TextBlock Text=&quot;Are you sure you want this?&quot; /&gt; &lt;/Grid&gt; &lt;/ContentDialog&gt; </pre> <p>And that&#8217;s it &#8211; the user can now use the Y, J or N keys to select the correct action. The sample projects (UWP and WinUI3) are available on <a href="https://github.com/sonnemaf/ContentDialogWithKeyboardAccelerators">GitHub</a> for full source code.</p></body></html>]]></content:encoded> </item> <item> <title>XAML inline RowDefinitions and ColumnDefinitions</title> <link>https://www.reflectionit.nl/blog/2021/xaml-inline-rowdefinitions-and-columndefinitions</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>XAML</category> <category>UWP</category> <category>WPF</category> <category>WinUI3</category> <category>WindowsAppSDK</category> <guid>https://www.reflectionit.nl/blog/2021/xaml-inline-rowdefinitions-and-columndefinitions</guid> <pubDate>Wed, 01 Dec 2021 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>In the XAML of <a href="https://docs.microsoft.com/en-us/windows/apps/winui/winui3/">WinUI3</a> apps you can use the inline syntax for creating Rows and Columns inside a Grid. This is a feature which <a href="https://avaloniaui.net/">Avalonia</a>&#160;had for a long time. It is more compact and works fine as long as you don&apos;t need a Max or Min Width/Height.</p> <p>The following screenshot shows you a Grid with 2 Rows and Columns. Both in equal size. Using 4 Rectangle elements I created the Microsoft logo inside this Grid.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/XAML/InlineRowColumnDefinitions/WinUIRowColumnDefinitions.png" alt="WinUI XAML with normal Row and Column Definitions" width="600" /></p> <p>The following screenshot shows you the same Grid but now with inline RowDefinitions and ColumnDefinitions. It saves you a few lines of XAML.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/XAML/InlineRowColumnDefinitions/WinUIInlineRowColumnDefinitions.png" alt="WinUI XAML with inline Row and Column Definitions" width="600" /></p> <h3>UWP Support</h3> <p>This inline syntax is only available in WinUI3, not in WPF or UWP. Luckely we can create a similar solution using Attached Properties. So, I created for my UWP projects a helper class called Grid with the two attached Properties: RowDefinitions and ColumnDefinitions.</p> <pre class="brush: csharp">using System; using Windows.UI.Xaml; using Windows.UI.Xaml.Markup; namespace ReflectionIT.Universal.Helpers { /// &lt;summary&gt; /// &lt;Grid helpers:Grid.RowDefinitions=&quot;1*, 50, Auto,2*&quot; /// helpers:Grid.ColumnDefinitions=&quot;1.5*,50,Auto,2.5*&quot; ... /// &lt;/summary&gt; public class Grid { #region ColumnDefinitions Attached Property /// &lt;summary&gt; /// Identifies the ColumnDefinitions attachted property. This enables animation, styling, binding, etc... /// &lt;/summary&gt; public static readonly DependencyProperty ColumnDefinitionsProperty = DependencyProperty.RegisterAttached(&quot;ColumnDefinitions&quot;, typeof(string), typeof(Grid), new PropertyMetadata(default(string), OnColumnDefinitionsChanged)); /// &lt;summary&gt; /// ColumnDefinitions changed handler. /// &lt;/summary&gt; /// &lt;param name=&quot;d&quot;&gt;Grid that changed its ColumnDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;e&quot;&gt;DependencyPropertyChangedEventArgs with the new and old value.&lt;/param&gt; private static void OnColumnDefinitionsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is Windows.UI.Xaml.Controls.Grid source) { if (source.ColumnDefinitions?.Count == 0) { var value = (string)e.NewValue; var a = value.Split(&apos;,&apos;); foreach (var text in a) { source.ColumnDefinitions.Add(new Windows.UI.Xaml.Controls.ColumnDefinition { Width = CreateGridLength(text), }); } } } } /// &lt;summary&gt; /// Gets the value of the ColumnDefinitions attached property from the specified Windows.UI.Xaml.Controls.Grid. /// &lt;/summary&gt; public static string GetColumnDefinitions(DependencyObject obj) { return (string)obj.GetValue(ColumnDefinitionsProperty); } /// &lt;summary&gt; /// Sets the value of the ColumnDefinitions attached property to the specified Windows.UI.Xaml.Controls.Grid. /// &lt;/summary&gt; /// &lt;param name=&quot;obj&quot;&gt;The object on which to set the ColumnDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;value&quot;&gt;The property value to set.&lt;/param&gt; public static void SetColumnDefinitions(DependencyObject obj, string value) { obj.SetValue(ColumnDefinitionsProperty, value); } #endregion ColumnDefinitions Attached Property #region RowDefinitions Attached Property /// &lt;summary&gt; /// Identifies the RowDefinitions attachted property. This enables animation, styling, binding, etc... /// &lt;/summary&gt; public static readonly DependencyProperty RowDefinitionsProperty = DependencyProperty.RegisterAttached(&quot;RowDefinitions&quot;, typeof(string), typeof(Grid), new PropertyMetadata(default(string), OnRowDefinitionsChanged)); /// &lt;summary&gt; /// RowDefinitions changed handler. /// &lt;/summary&gt; /// &lt;param name=&quot;d&quot;&gt;Grid that changed its RowDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;e&quot;&gt;DependencyPropertyChangedEventArgs with the new and old value.&lt;/param&gt; private static void OnRowDefinitionsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is Windows.UI.Xaml.Controls.Grid source) { if (source.RowDefinitions?.Count == 0) { var value = (string)e.NewValue; var a = value.Split(&apos;,&apos;); foreach (var item in a) { source.RowDefinitions.Add(new Windows.UI.Xaml.Controls.RowDefinition { Height = CreateGridLength(item), }); } } } } /// &lt;summary&gt; /// Gets the value of the RowDefinitions attached property from the specified Grid . /// &lt;/summary&gt; public static string GetRowDefinitions(DependencyObject obj) { return (string)obj.GetValue(RowDefinitionsProperty); } /// &lt;summary&gt; /// Sets the value of the RowDefinitions attached property to the specified Grid . /// &lt;/summary&gt; /// &lt;param name=&quot;obj&quot;&gt;The object on which to set the RowDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;value&quot;&gt;The property value to set.&lt;/param&gt; public static void SetRowDefinitions(DependencyObject obj, string value) { obj.SetValue(RowDefinitionsProperty, value); } #endregion RowDefinitions Attached Property private static GridLength CreateGridLength(string text) { text = text.Trim(); return text.Length==0 ? throw new XamlParseException(&quot;XAML parsing failed: Empty GridLength is not allowed&quot;) : text.EndsWith(&apos;*&apos;) ? new GridLength(text.Length &gt; 1 ? double.Parse(text.Substring(0, text.Length - 1)) : 1, GridUnitType.Star) : text.Equals(&quot;auto&quot;, StringComparison.OrdinalIgnoreCase) ? new GridLength(0D, GridUnitType.Auto) : new GridLength(double.Parse(text), GridUnitType.Pixel); } } } </pre> <p>You can use these properties by first registering the xml namespace inside you XAML. In this case I named it helpers. Inside the Grid element the helpers:Grid.ColumnDefinitions and helpers:Grid.RowDefinitions attributes get the &quot;1*,1*&quot; value. You can off course not only use the Star sizes. Pixel and Auto are also supported. For example the value &quot;40,Auto,*&quot;. The first one is Pixel size 40, the second one is Auto and the last one is 1 Star.</p> <pre class="brush: html">&lt;Page x:Class=&quot;App44.MainPage&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; xmlns:helpers=&quot;using:ReflectionIT.Universal.Helpers&quot; xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot; mc:Ignorable=&quot;d&quot;&gt; &lt;Grid Margin=&quot;8&quot; ColumnSpacing=&quot;8&quot; RowSpacing=&quot;8&quot; helpers:Grid.ColumnDefinitions=&quot;1*,1*&quot; helpers:Grid.RowDefinitions=&quot;1*,1*&quot;&gt; &lt;Rectangle Fill=&quot;#F25022&quot; /&gt; &lt;Rectangle Grid.Column=&quot;1&quot; Fill=&quot;#7FBA00&quot; /&gt; &lt;Rectangle Grid.Row=&quot;1&quot; Fill=&quot;#00A4EF&quot; /&gt; &lt;Rectangle Grid.Row=&quot;1&quot; Grid.Column=&quot;1&quot; Fill=&quot;#FFB900&quot; /&gt; &lt;/Grid&gt; &lt;/Page&gt; </pre> <p>&#160;</p> <h3>WPF Support</h3> <p>The same solution can also be used in WPF. The Grid class is similar as the UWP version, it differs only for some different namespaces.</p> <pre class="brush: csharp">using System; using System.Windows; using System.Xaml; namespace ReflectionIT.Wpf.Helpers { /// &lt;summary&gt; /// &lt;Grid helpers:Grid.RowDefinitions=&quot;1*, 50, Auto,2*&quot; /// helpers:Grid.ColumnDefinitions=&quot;1.5*,50,Auto,2.5*&quot; ... /// &lt;/summary&gt; public class Grid { #region ColumnDefinitions Attached Property /// &lt;summary&gt; /// Identifies the ColumnDefinitions attachted property. This enables animation, styling, binding, etc... /// &lt;/summary&gt; public static readonly DependencyProperty ColumnDefinitionsProperty = DependencyProperty.RegisterAttached(&quot;ColumnDefinitions&quot;, typeof(string), typeof(Grid), new PropertyMetadata(default(string), OnColumnDefinitionsChanged)); /// &lt;summary&gt; /// ColumnDefinitions changed handler. /// &lt;/summary&gt; /// &lt;param name=&quot;d&quot;&gt;Grid that changed its ColumnDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;e&quot;&gt;DependencyPropertyChangedEventArgs with the new and old value.&lt;/param&gt; private static void OnColumnDefinitionsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is System.Windows.Controls.Grid source) { if (source.ColumnDefinitions?.Count == 0) { var value = (string)e.NewValue; var a = value.Split(&apos;,&apos;); foreach (var text in a) { source.ColumnDefinitions.Add(new System.Windows.Controls.ColumnDefinition { Width = CreateGridLength(text), }); } } } } /// &lt;summary&gt; /// Gets the value of the ColumnDefinitions attached property from the specified Windows.UI.Xaml.Controls.Grid. /// &lt;/summary&gt; public static string GetColumnDefinitions(DependencyObject obj) { return (string)obj.GetValue(ColumnDefinitionsProperty); } /// &lt;summary&gt; /// Sets the value of the ColumnDefinitions attached property to the specified Windows.UI.Xaml.Controls.Grid. /// &lt;/summary&gt; /// &lt;param name=&quot;obj&quot;&gt;The object on which to set the ColumnDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;value&quot;&gt;The property value to set.&lt;/param&gt; public static void SetColumnDefinitions(DependencyObject obj, string value) { obj.SetValue(ColumnDefinitionsProperty, value); } #endregion ColumnDefinitions Attached Property #region RowDefinitions Attached Property /// &lt;summary&gt; /// Identifies the RowDefinitions attachted property. This enables animation, styling, binding, etc... /// &lt;/summary&gt; public static readonly DependencyProperty RowDefinitionsProperty = DependencyProperty.RegisterAttached(&quot;RowDefinitions&quot;, typeof(string), typeof(Grid), new PropertyMetadata(default(string), OnRowDefinitionsChanged)); /// &lt;summary&gt; /// RowDefinitions changed handler. /// &lt;/summary&gt; /// &lt;param name=&quot;d&quot;&gt;Grid that changed its RowDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;e&quot;&gt;DependencyPropertyChangedEventArgs with the new and old value.&lt;/param&gt; private static void OnRowDefinitionsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is System.Windows.Controls.Grid source) { if (source.RowDefinitions?.Count == 0) { var value = (string)e.NewValue; var a = value.Split(&apos;,&apos;); foreach (var item in a) { source.RowDefinitions.Add(new System.Windows.Controls.RowDefinition { Height = CreateGridLength(item), }); } } } } /// &lt;summary&gt; /// Gets the value of the RowDefinitions attached property from the specified Grid . /// &lt;/summary&gt; public static string GetRowDefinitions(DependencyObject obj) { return (string)obj.GetValue(RowDefinitionsProperty); } /// &lt;summary&gt; /// Sets the value of the RowDefinitions attached property to the specified Grid . /// &lt;/summary&gt; /// &lt;param name=&quot;obj&quot;&gt;The object on which to set the RowDefinitions attached property.&lt;/param&gt; /// &lt;param name=&quot;value&quot;&gt;The property value to set.&lt;/param&gt; public static void SetRowDefinitions(DependencyObject obj, string value) { obj.SetValue(RowDefinitionsProperty, value); } #endregion RowDefinitions Attached Property private static GridLength CreateGridLength(string text) { text = text.Trim(); return text.Length == 0 ? throw new XamlParseException(&quot;XAML parsing failed: Empty GridLength is not allowed&quot;) : text.EndsWith(&apos;*&apos;) ? new GridLength(text.Length &gt; 1 ? double.Parse(text.Substring(0, text.Length - 1)) : 1, GridUnitType.Star) : text.Equals(&quot;auto&quot;, StringComparison.OrdinalIgnoreCase) ? new GridLength(0D, GridUnitType.Auto) : new GridLength(double.Parse(text), GridUnitType.Pixel); } } } </pre> <p>The usage is the same as in UWP. I had to add Margin to the Rectangle elements due to the lack of RowSpacing and ColumnSpacing on the Grid. Let&apos;s hope that will be added to WPF soon.&#160;</p> <p><img src="https://www.reflectionit.nl/Images/Blog/XAML/InlineRowColumnDefinitions/WPFInlineRowColumnDefinitions.png" alt="WPF XAML with normal Row and Column Definitions" width="600" /></p> <h3>Designer support</h3> <p>The WPF and UWP Designers support the use of these Attached Properties. Let&apos;s also hope that a Designer will be added to WinUI3 soon. Untill then we can use XAML Hot Reload and XAML Live Preview as a poor man&apos;s alternative for a Designer. Unfortnatly it doesn&apos;t support the inline syntax yet. Something which is <a href="https://github.com/microsoft/microsoft-ui-xaml/issues/6371">reported</a> and will hopefully be fixed soon</p> <p><img src="https://www.reflectionit.nl/Images/Blog/XAML/InlineRowColumnDefinitions/XamlLivePreview.png" alt="WPF XAML with normal Row and Column Definitions" width="600" /></p></body></html>]]></content:encoded> </item> <item> <title>XAML Lightweight styling done right</title> <link>https://www.reflectionit.nl/blog/2021/xaml-lightweight-styling-done-right</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>Apps</category> <category>XAML</category> <category>UWP</category> <category>Windows 10</category> <category>Blend</category> <guid>https://www.reflectionit.nl/blog/2021/xaml-lightweight-styling-done-right</guid> <pubDate>Mon, 11 Jan 2021 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>You can customize the appearance of your apps in many ways by using the XAML framework. Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.</p> <p>With&#160;<a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-styles#lightweight-styling">Lightweight styling</a>&#160;you override the system brushes, and the color override will affect all controls that reference that brush. Although this is called styling you are not defining a style. You just create a ResourceDictionary with a ThemeDictionary in which you override the system brushes.</p> <pre class="brush: html">&lt;Page.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.ThemeDictionaries&gt; &lt;ResourceDictionary x:Key=&quot;Light&quot;&gt; &lt;SolidColorBrush x:Key=&quot;ButtonBackground&quot; Color=&quot;Transparent&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;ButtonForeground&quot; Color=&quot;MediumSlateBlue&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;ButtonBorderBrush&quot; Color=&quot;MediumSlateBlue&quot;/&gt; &lt;/ResourceDictionary&gt; &lt;/ResourceDictionary.ThemeDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/Page.Resources&gt;/&gt; </pre> <p>These overriden system brushes make a normal Button control transparent with a purple border and text (content).</p> <p><img src="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/lightweightstyling_buttonstatesexample.png" alt="" width="720" /></p> <p>For states like PointerOver (mouse is hovered over the button),<strong>PointerPressed</strong> (button has been invoked), or Disabled (button is not interactable). These endings are appended onto the original Lightweight styling names:<strong>ButtonBackgroundPointerOver, ButtonForegroundPointerPressed, ButtonBorderBrushDisabled, etc</strong>. Modifying those brushes as well, will make sure that your controls are colored consistently to your app&apos;s theme.</p> <p>You should also define these brushes in the Default (read &apos;Dark&apos;) theme. If you are not familiar with this you should read the <a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-theme-resources">XAML theme resources</a> docs.</p> <h3>Per-control Styling</h3> <p>These overrides of the system brushes are generally done at the App or Page level. In the docs you can also read that there is a way you can do this <a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-styles#per-control-styling">per-control</a>. Changing a single control on one page only to look a certain way, without altering any other versions of that control, is desired:</p> <p><img src="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/lightweightstyling_checkboxexample.png" alt="" width="203" height="137" /></p> <pre class="brush: html">&lt;CheckBox Content=&quot;Normal CheckBox&quot; Margin=&quot;5&quot;/&gt; &lt;CheckBox Content=&quot;Special CheckBox&quot; Margin=&quot;5&quot;&gt; &lt;CheckBox.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.ThemeDictionaries&gt; &lt;ResourceDictionary x:Key=&quot;Light&quot;&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundUnchecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckGlyphForegroundChecked&quot; Color=&quot;White&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundStrokeChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundFillChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;/ResourceDictionary&gt; &lt;/ResourceDictionary.ThemeDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/CheckBox.Resources&gt; &lt;/CheckBox&gt; &lt;CheckBox Content=&quot;Normal CheckBox&quot; Margin=&quot;5&quot;/&gt; </pre> <p>If you want to do this for two controls you have to override the system brushes for both controls. Each control will have the same ResourceDictionary containing the Themes with the overriden system brushes.</p> <pre class="brush: html">&lt;CheckBox Content=&quot;Normal CheckBox&quot; Margin=&quot;5&quot;/&gt; &lt;CheckBox Content=&quot;Special CheckBox&quot; Margin=&quot;5&quot;&gt; &lt;CheckBox.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.ThemeDictionaries&gt; &lt;ResourceDictionary x:Key=&quot;Light&quot;&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundUnchecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckGlyphForegroundChecked&quot; Color=&quot;White&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundStrokeChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundFillChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;/ResourceDictionary&gt; &lt;/ResourceDictionary.ThemeDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/CheckBox.Resources&gt; &lt;/CheckBox&gt; &lt;CheckBox Content=&quot;Special CheckBox&quot; Margin=&quot;5&quot;&gt; &lt;CheckBox.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.ThemeDictionaries&gt; &lt;ResourceDictionary x:Key=&quot;Light&quot;&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundUnchecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckGlyphForegroundChecked&quot; Color=&quot;White&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundStrokeChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundFillChecked&quot; Color=&quot;Purple&quot;/&gt; &lt;/ResourceDictionary&gt; &lt;/ResourceDictionary.ThemeDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/CheckBox.Resources&gt; &lt;/CheckBox&gt;</pre> <p>This is not the right solution because you now have duplicate xaml code. This will cause maintenance issues. A better solution is available. You candefine the ResourceDictionary inside a separate ResourceDictionary file and use a Merged DictionaryResource inside the controls.</p> <h4>PurpleCheckboxTheme.xaml</h4> <pre class="brush: html">&lt;ResourceDictionary xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;&gt; &lt;ResourceDictionary.ThemeDictionaries&gt; &lt;ResourceDictionary x:Key=&quot;Light&quot;&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundUnchecked&quot; Color=&quot;Purple&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundChecked&quot; Color=&quot;Purple&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckGlyphForegroundChecked&quot; Color=&quot;White&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundStrokeChecked&quot; Color=&quot;Purple&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundFillChecked&quot; Color=&quot;Purple&quot; /&gt; &lt;/ResourceDictionary&gt; &lt;/ResourceDictionary.ThemeDictionaries&gt; &lt;/ResourceDictionary&gt;</pre> <p>Inside the Checkbox controls you used the MergedDictionaries to reference the PurpleCheckboxTheme.xaml file</p> <pre class="brush: html">&lt;CheckBox Content=&quot;Special CheckBox&quot;&gt; &lt;CheckBox.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.MergedDictionaries&gt; &lt;ResourceDictionary Source=&quot;/PurpleCheckboxTheme.xaml&quot; /&gt; &lt;/ResourceDictionary.MergedDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/CheckBox.Resources&gt; &lt;/CheckBox&gt; &lt;CheckBox Content=&quot;Special CheckBox&quot;&gt; &lt;CheckBox.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.MergedDictionaries&gt; &lt;ResourceDictionary Source=&quot;/PurpleCheckboxTheme.xaml&quot; /&gt; &lt;/ResourceDictionary.MergedDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/CheckBox.Resources&gt; &lt;/CheckBox&gt;</pre> <p>This solution work perfect but is it the right one? The values of the system brushes have no duplicates. Still, I don&apos;t like this solution. I find it way too verbose.</p> <h3>The right solution</h3> <p>To get rid of the verboseness I tried to place the ResourceDictionary inside a Style. This would make Lightweight styling real styling. Unfortunately this doesn&apos;t work (compile) as this screenshot will show you.</p> <p><img src="https://reflectionit.nl/Images/Blog/Windows10/LightweightStyling/Error.png" alt="" width="720" /></p> <p>The Resource property is not a Dependency Property so it can&apos;t be set inside a (Style) Setter. Luckily the error message also hints towards the solution. An attached property can be used instead. So, I created a ResourcesServices class with a Resources attached property in it. The OnResourcesChanged() method sets the Resources property of the FrameworkElement. It uses a&#160;ResourceDictionaryCloner helper class to clone the ResourceDictionary.</p> <pre class="brush: csharp">public class ResourcesServices { /// &lt;summary&gt; /// Identifies the Resources attachted property. This enables animation, styling, binding, etc... /// &lt;/summary&gt; public static readonly DependencyProperty ResourcesProperty = DependencyProperty.RegisterAttached(&quot;Resources&quot;, typeof(ResourceDictionary), typeof(ResourcesServices), new PropertyMetadata(default(ResourceDictionary), OnResourcesChanged)); /// &lt;summary&gt; /// Resources changed handler. /// &lt;/summary&gt; /// &lt;param name=&quot;d&quot;&gt;FrameworkElement that changed its Resources attached property.&lt;/param&gt; /// &lt;param name=&quot;e&quot;&gt;DependencyPropertyChangedEventArgs with the new and old value.&lt;/param&gt; private static void OnResourcesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is FrameworkElement source) { var value = (ResourceDictionary)e.NewValue; ResourceDictionaryCloner.Clone(value, source.Resources); } } /// &lt;summary&gt; /// Gets the value of the Resources attached property from the specified FrameworkElement. /// &lt;/summary&gt; public static ResourceDictionary GetResources(DependencyObject obj) { return (ResourceDictionary)obj.GetValue(ResourcesProperty); } /// &lt;summary&gt; /// Sets the value of the Resources attached property to the specified FrameworkElement. /// &lt;/summary&gt; /// &lt;param name=&quot;obj&quot;&gt;The object on which to set the Resources attached property.&lt;/param&gt; /// &lt;param name=&quot;value&quot;&gt;The property value to set.&lt;/param&gt; public static void SetResources(DependencyObject obj, ResourceDictionary value) { obj.SetValue(ResourcesProperty, value); } } internal static class ResourceDictionaryCloner { internal static ResourceDictionary Clone(ResourceDictionary resource, ResourceDictionary destination) { if (resource == null) return null; if (resource.Source != null) { destination.Source = resource.Source; } else { // Clone theme dictionaries if (resource.ThemeDictionaries != null) { foreach (var theme in resource.ThemeDictionaries) { if (theme.Value is ResourceDictionary themedResource) { var themeDictionary = new ResourceDictionary(); Clone(themedResource, themeDictionary); destination.ThemeDictionaries[theme.Key] = themeDictionary; } else { destination.ThemeDictionaries[theme.Key] = theme.Value; } } } // Clone merged dictionaries if (resource.MergedDictionaries != null) { foreach (var mergedResource in resource.MergedDictionaries) { var themeDictionary = new ResourceDictionary(); Clone(mergedResource, themeDictionary); destination.MergedDictionaries.Add(themeDictionary); } } // Clone all contents foreach (var item in resource) { destination[item.Key] = item.Value; } } return destination; } } </pre> <p><span style="font-size: 1em;">The Property attribute of the Setter element now uses this Attached Property. The &apos;local&apos; namespace is for this example set to SampleApp. This is the namespace of the ResourcesServices class.</span></p> <pre class="brush: html">&lt;Page.Resources&gt; &lt;Style x:Key=&quot;PurlpleCheckbox&quot; xmlns:local=&quot;using:SampleApp&quot; TargetType=&quot;CheckBox&quot;&gt; &lt;Style.Setters&gt; &lt;Setter Property=&quot;local:ResourcesServices.Resources&quot;&gt; &lt;Setter.Value&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.ThemeDictionaries&gt; &lt;ResourceDictionary x:Key=&quot;Light&quot;&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundUnchecked&quot; Color=&quot;Purple&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxForegroundChecked&quot; Color=&quot;Purple&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckGlyphForegroundChecked&quot; Color=&quot;White&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundStrokeChecked&quot; Color=&quot;Purple&quot; /&gt; &lt;SolidColorBrush x:Key=&quot;CheckBoxCheckBackgroundFillChecked&quot; Color=&quot;Purple&quot; /&gt; &lt;/ResourceDictionary&gt; &lt;/ResourceDictionary.ThemeDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style.Setters&gt; &lt;/Style&gt; &lt;/Page.Resources&gt;</pre> <p>So, if you want two CheckBoxes with this lightweight style you can just assign the PurpleCheckbox to the Style property of those two controls. This is very compact code which makes it perfect.</p> <pre class="brush: html">&lt;CheckBox Content=&quot;Normal CheckBox&quot; /&gt; &lt;CheckBox Content=&quot;Special CheckBox&quot; Style=&quot;{StaticResource PurlpleCheckbox}&quot; /&gt; &lt;CheckBox Content=&quot;Special CheckBox&quot; Style=&quot;{StaticResource PurlpleCheckbox}&quot; /&gt;</pre> <h3>Closure</h3> <p>I think that Lightweight styling is great and with this Resources attached property is super clean. No duplicate code and very compact. Just the way I like it. I hope you like it too.</p> <p>Fons</p> <p><strong>Update 12-1-2021</strong>: My original code was not tested correctly.&#160;<a href="https://github.com/rudyhuyn">Rudy Hyun</a>&#160;mentioned this in this&#160;<a href="https://twitter.com/RudyHuyn/status/1348791145657061376">tweet</a>, thanks. He has a solution for my problem which he already implemented in the&#160;<a href="https://github.com/rudyhuyn/XamlPlus">XamlPlus</a>&#160;project. I took (stole) his&#160;<a href="https://github.com/rudyhuyn/XamlPlus/blob/master/StyleExtension/ResourceDictionaryCloner.cs">ResourceDictionaryCloner</a>&#160;and added this to this blog. You might also decide to use the XamlPlus style project instead. It has a Style class with a Resources attached property. I think it even functions better than mine when you change the RequestedTheme on runtime.</p></body></html>]]></content:encoded> </item> <item> <title>WinUI NumberBox Control</title> <link>https://www.reflectionit.nl/blog/2020/winui-numberbox-control</link> <description /> <author>fons.sonnemans@reflectionit.nl (Fons Sonnemans)</author> <category>Apps</category> <category>XAML</category> <category>UWP</category> <category>WinUI</category> <category>Windows 10</category> <category>Blend</category> <guid>https://www.reflectionit.nl/blog/2020/winui-numberbox-control</guid> <pubDate>Fri, 27 Mar 2020 00:00:00 GMT</pubDate> <content:encoded><![CDATA[<html><body><p>If you write business apps, there are a lot of controls for data input: TextBox, CheckBox, ComboBox, DatePicker, ToggleSwitch, TimePicker, RadioButton, Slider, etc. I always wondered why there was no NumberBox. Numeric input is very common so it needs its own control for it. Luckily there is the&#160;<a href="https://microsoft.github.io/microsoft-ui-xaml/">Windows UI Library (WinUI)</a>, an&#160;open source project from Microsoft. I <a href="https://github.com/microsoft/microsoft-ui-xaml/issues/483">proposed</a> the NumberBox last year and the team did a great job implementing it. It is released in version <a href="https://www.nuget.org/packages/Microsoft.UI.Xaml/2.3.200213001">2.3</a> and most of the issues are now solved. Time for a blog post showing of its features.</p> <p>This animated GIF demonstrates a few of the features like AcceptsExpression, PlaceholderText, SpinButtons and NumberFormatter. I &apos;stole&apos; it from this <a href="https://twitter.com/WindowsDocs/status/1242847738817056773">tweet</a>.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/Windows10/NumberBox/NumberBox.gif" alt="NumberBox in action" /></p> <h3>Demo Project</h3> <p>The next screenshot is taken from my NumberBoxTest app/project. The project can be found in this <a href="https://github.com/sonnemaf/NumberBoxTest">GitHub repository</a>.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/Windows10/NumberBox/NumberBoxTest.png" alt="MainPage with 5 NumberBox controls" width="600" /></p> <p>On the MainPage there are five NumberBox controls. They are databound to the properties of a Product and an Employee object which are created in the codebehind of the MainPage.</p> <pre class="brush: html">&lt;Page x:Class=&quot;NumberBoxTest.MainPage&quot; xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; xmlns:behaviors=&quot;using:NumberBoxTest.Behaviors&quot; xmlns:converters=&quot;using:NumberBoxTest.Converters&quot; xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; xmlns:interactivity=&quot;using:Microsoft.Xaml.Interactivity&quot; xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; xmlns:winui=&quot;using:Microsoft.UI.Xaml.Controls&quot; Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot; mc:Ignorable=&quot;d&quot;&gt; &lt;Page.Resources&gt; &lt;converters:DecimalToDoubleConverter x:Key=&quot;Decimal2Double&quot; /&gt; &lt;converters:IntToDoubleConverter x:Key=&quot;Int2Double&quot; /&gt; &lt;converters:NullableDoubleToStringConverter x:Key=&quot;NullableDouble2String&quot; /&gt; &lt;/Page.Resources&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width=&quot;1*&quot; /&gt; &lt;ColumnDefinition Width=&quot;1*&quot; /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;StackPanel Width=&quot;300&quot; Margin=&quot;8&quot; x:DefaultBindMode=&quot;TwoWay&quot; Spacing=&quot;8&quot;&gt; &lt;TextBlock Style=&quot;{ThemeResource TitleTextBlockStyle}&quot; Text=&quot;Product&quot; /&gt; &lt;TextBox Header=&quot;Product Name&quot; MaxLength=&quot;10&quot; Text=&quot;{x:Bind Product.ProductName}&quot; TextWrapping=&quot;Wrap&quot; /&gt; &lt;winui:NumberBox AcceptsExpression=&quot;True&quot; Header=&quot;Unit Price&quot; Minimum=&quot;0&quot; NumberFormatter=&quot;{x:Bind Path=DutchDecimalFormatter, Mode=OneTime}&quot; PlaceholderText=&quot;You can also use expressions like &apos;5 + 7&apos;&quot; ValueChanged=&quot;NumberBox_ValueChanged&quot; Value=&quot;{x:Bind Product.UnitPrice}&quot; /&gt; &lt;winui:NumberBox Header=&quot;Units in Stock&quot; Maximum=&quot;10000&quot; Minimum=&quot;0&quot; NumberFormatter=&quot;{x:Bind Path=IntFormatter, Mode=OneTime}&quot; SpinButtonPlacementMode=&quot;Inline&quot; ValueChanged=&quot;NumberBox_ValueChanged&quot; Value=&quot;{x:Bind Product.UnitsInStock, Converter={StaticResource Int2Double}}&quot; /&gt; &lt;StackPanel Margin=&quot;0,8&quot; Padding=&quot;8&quot; x:DefaultBindMode=&quot;OneWay&quot; BorderBrush=&quot;{ThemeResource SystemErrorTextColor}&quot; BorderThickness=&quot;2&quot; Spacing=&quot;8&quot;&gt; &lt;TextBlock Text=&quot;{x:Bind Product.ProductName}&quot; /&gt; &lt;TextBlock Text=&quot;{x:Bind Product.UnitPrice}&quot; /&gt; &lt;TextBlock Text=&quot;{x:Bind Product.UnitsInStock}&quot; /&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;StackPanel Grid.Column=&quot;1&quot; Width=&quot;300&quot; Margin=&quot;8&quot; x:DefaultBindMode=&quot;TwoWay&quot; Spacing=&quot;8&quot;&gt; &lt;TextBlock Style=&quot;{ThemeResource TitleTextBlockStyle}&quot; Text=&quot;Employee&quot; /&gt; &lt;TextBox Header=&quot;Name&quot; MaxLength=&quot;10&quot; Text=&quot;{x:Bind Employee.Name}&quot; TextWrapping=&quot;Wrap&quot; /&gt; &lt;winui:NumberBox AcceptsExpression=&quot;True&quot; Header=&quot;Salary&quot; IsWrapEnabled=&quot;true&quot; Minimum=&quot;100&quot; NumberFormatter=&quot;{x:Bind Path=DutchDecimalFormatter, Mode=OneTime}&quot; SpinButtonPlacementMode=&quot;Hidden&quot; Value=&quot;{x:Bind Employee.Salary, Converter={StaticResource Decimal2Double}}&quot;&gt; &lt;interactivity:Interaction.Behaviors&gt; &lt;behaviors:NanToMinimumBehavior /&gt; &lt;/interactivity:Interaction.Behaviors&gt; &lt;/winui:NumberBox&gt; &lt;winui:NumberBox Header=&quot;Bonus&quot; Minimum=&quot;0&quot; NumberFormatter=&quot;{x:Bind Path=DutchDecimalFormatter, Mode=OneTime}&quot; SmallChange=&quot;100&quot; SpinButtonPlacementMode=&quot;Compact&quot; Text=&quot;{x:Bind Employee.Bonus, ConverterLanguage=nl-NL, Converter={StaticResource NullableDouble2String}}&quot; /&gt; &lt;winui:NumberBox Header=&quot;Age&quot; Maximum=&quot;100&quot; Minimum=&quot;16&quot; SpinButtonPlacementMode=&quot;Inline&quot; Value=&quot;{x:Bind Employee.Age, Converter={StaticResource Int2Double}}&quot;&gt; &lt;interactivity:Interaction.Behaviors&gt; &lt;behaviors:NanToMinimumBehavior /&gt; &lt;behaviors:IntNumberFormatterBehavior /&gt; &lt;/interactivity:Interaction.Behaviors&gt; &lt;/winui:NumberBox&gt; &lt;StackPanel Margin=&quot;0,8&quot; Padding=&quot;8&quot; x:DefaultBindMode=&quot;OneWay&quot; BorderBrush=&quot;{ThemeResource SystemErrorTextColor}&quot; BorderThickness=&quot;2&quot; Spacing=&quot;8&quot;&gt; &lt;TextBlock Text=&quot;{x:Bind Employee.Name}&quot; /&gt; &lt;TextBlock Text=&quot;{x:Bind Employee.Salary}&quot; /&gt; &lt;TextBlock Text=&quot;{x:Bind Employee.Bonus}&quot; /&gt; &lt;TextBlock Text=&quot;{x:Bind Employee.Age}&quot; /&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/Page&gt; </pre> <p>In the codebehind of the MainPage (MainPage.xaml.cs) the Product and Employee objects are created. It also contains two DecimalFormatter properties and a NumberBox_ValueChanged eventhandler.</p> <pre class="brush: csharp">using Microsoft.UI.Xaml.Controls; using NumberBoxTest.Models; using Windows.Globalization.NumberFormatting; using Windows.UI.Xaml.Controls; namespace NumberBoxTest { public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } private DecimalFormatter DutchDecimalFormatter { get; } = new DecimalFormatter(new[] { &quot;nl-NL&quot; }, &quot;NL&quot;) { IsGrouped = true, FractionDigits = 2, NumberRounder = new IncrementNumberRounder { Increment = 0.01, RoundingAlgorithm = RoundingAlgorithm.RoundHalfUp, } }; private DecimalFormatter IntFormatter { get; } = new DecimalFormatter(new[] { &quot;nl-NL&quot; }, &quot;NL&quot;) { IsGrouped = false, FractionDigits = 0, NumberRounder = new IncrementNumberRounder(), }; internal Employee Employee { get; } = new Employee { Name = &quot;Fons&quot;, Salary = 2000, Bonus = 100, Age = 50 }; internal Product Product { get; } = new Product { ProductName = &quot;Surface Pro&quot;, UnitPrice = 1299, UnitsInStock = 50 }; private void NumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs args) { if (double.IsNaN(args.NewValue)) { sender.Value = sender.Minimum; } } } } </pre> <h3>NumberFormatter</h3> <p>The DutchDecimalFormatter and IntFormatter properties in the MainPage.xaml.cs are used to format the &apos;money&apos; NumberBoxes (UnitPrice, Salary and Bonus) and the &apos;int&apos; NumberBoxes (UnitsInStock and Age). The NumberFormatter property of each NumberBox is set to these properties using x:Bind or a Behavior. The DutchDecimalFormatter will format the &apos;money&apos; using the &apos;nl&apos; region. This region uses a comma for fractions and a dot for grouping. It has FractionDigits wich is set to 2 and the NumberRounder is set to 0.01. So if the users enters the value 1,006 it is converted to 1,01. A value of 1,004 is converted to 1,00. The IntFormatter has a FractionDigits of 0 because it is an int. I think you should always set the NumberFormatter property of every NumberBox. I like behaviors so I created this IntNumberFormatterBehavior to set the NumberFormmater. You have to reference the&#160;<a href="https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/">Microsoft.Xaml.Behaviors.Uwp.Managed</a>&#160;NuGet package to make it work. You can easily assign it to a NumberBox in Blend for VisualStudio. Just Drag &amp; Drop it from the Assets panel onto a NumberBox.</p> <pre class="brush: csharp">class IntNumberFormatterBehavior : Behavior&lt;NumberBox&gt; { private static DecimalFormatter IntFormatter { get; } = new DecimalFormatter(new[] { &quot;nl-NL&quot; }, &quot;NL&quot;) { IsGrouped = false, FractionDigits = 0, NumberRounder = new IncrementNumberRounder(), }; protected override void OnAttached() { base.OnAttached(); this.AssociatedObject.NumberFormatter = IntFormatter; } } </pre> <p>&#160;</p> <h3>SpinButtons</h3> <p><img src="https://www.reflectionit.nl/Images/Blog/Windows10/NumberBox/SpinButtons.png" alt="" width="423" /></p> <p>The NumberBox supports spin buttons to increase or decrease the value. They can be placed &apos;Compact&apos; or &apos;Inline&apos;. You can also use the Up/Down cursor keys for a small change and the PageUp/PageDown for a large change.</p> <pre class="brush: html">&lt;winui:NumberBox Header=&quot;Bonus&quot; Minimum=&quot;0&quot; NumberFormatter=&quot;{x:Bind Path=DutchDecimalFormatter, Mode=OneTime}&quot; SmallChange=&quot;10&quot; LargeChange=&quot;100&quot; SpinButtonPlacementMode=&quot;Compact&quot; Text=&quot;{x:Bind Employee.Bonus, ConverterLanguage=nl-NL, Converter={StaticResource NullableDouble2String}}&quot; /&gt; </pre> <p>&#160;</p> <h3>AcceptsExpression &amp;&#160;PlaceholderText</h3> <p><img src="https://www.reflectionit.nl/Images/Blog/Windows10/NumberBox/Expression.png" alt="AcceptsExpression" width="409" /></p> <p>If the AcceptsExpression property is set to True you can use the NumberBox as a calculator. You can type an expression for example &apos;5 + 7&apos;. The value (12) is calculated when you hit Enter or leave the NumberBox. The PlaceholderText can be used to explain this feature to the user.</p> <pre class="brush: html">&lt;winui:NumberBox AcceptsExpression=&quot;True&quot; Header=&quot;Unit Price&quot; Minimum=&quot;0&quot; NumberFormatter=&quot;{x:Bind Path=DutchDecimalFormatter, Mode=OneTime}&quot; PlaceholderText=&quot;You can also use expressions like &apos;5 + 7&apos;&quot; ValueChanged=&quot;NumberBox_ValueChanged&quot; Value=&quot;{x:Bind Product.UnitPrice}&quot; /&gt; </pre> <p>&#160;</p> <h3>Minimum and Maximum</h3> <p><img src="https://www.reflectionit.nl/Images/Blog/Windows10/NumberBox/Minimum.png" alt="Minimum and Maximum" width="414" /></p> <p>The NumberBox has Minimum and Maximum properties that ensure the user cannot set a Value below the Minimum or above the Maximum. You can, although, clear the content of a NumberBox. The (double) Value property will get the value NAN (not a number). This is correct because NAN is not above or below anything. I don&apos;t like this so I came up with a solution where the Value of an empty NumberBox is set to the Minimum. I used two solutions for this. The first is using the ValueChanged event of the NumberBox. In the NumberBox_ValueChanged method the NewValue is tested for NAN and then the Value is set to the Minimum. The second solution is using my NanToMinimumBehavior. You can easily assign it to a NumberBox in Blend for VisualStudio. Just Drag &amp; Drop it from the Assets panel onto a NumberBox.</p> <pre class="brush: csharp">class NanToMinimumBehavior : Behavior&lt;NumberBox&gt; { protected override void OnAttached() { base.OnAttached(); this.AssociatedObject.ValueChanged += AssociatedObject_ValueChanged; } protected override void OnDetaching() { base.OnDetaching(); this.AssociatedObject.ValueChanged -= AssociatedObject_ValueChanged; } private void AssociatedObject_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs args) { if (double.IsNaN(args.NewValue)) { sender.Value = sender.Minimum; } } } </pre> <p>&#160;</p> <h3>Value &amp; Binding</h3> <p>The Value of the NumberBox controls are databound to the properties of a Product or Employee. I have chosen all kind of datatypes for these properties: double, double?, decimal and int. Binding to a double is simple because the Value property is also of the type double.</p> <p><img src="https://www.reflectionit.nl/Images/Blog/Windows10/NumberBox/ClassDiagram.png" alt="ClassDiagram" width="600" /></p> <p>I have created a few ValueConverter classes to bind to the decimal, int and nullable double (double?).</p> <pre class="brush: csharp">class DecimalToDoubleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return System.Convert.ToDouble(value); } public object ConvertBack(object value, Type targetType, object parameter, string language) { return double.IsNaN((double)value) ? (parameter is object ? System.Convert.ToDecimal(parameter) : 0) : System.Convert.ToDecimal(value); } } class IntToDoubleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return System.Convert.ToDouble(value); } public object ConvertBack(object value, Type targetType, object parameter, string language) { return double.IsNaN((double)value) ? (parameter is object ? System.Convert.ToInt32(parameter) : 0) : System.Convert.ToInt32(value); } } class NullableDoubleToStringConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return value is object ? value.ToString() : string.Empty; } public object ConvertBack(object value, Type targetType, object parameter, string language) { return string.IsNullOrWhiteSpace((string)value) ? (double?)null : double.Parse((string)value, CultureInfo.GetCultureInfo(language)); } } </pre> <p>The Bonus property of the Employee class is a double?. The Value property of the NumberBox is a normal double. You can&apos;t use x:Bind for this and I don&apos;t like old-school binding. The solution I came up with is to use the Text property of the NumberBox in combination with the NullableDoubleToStringConverter converter. The converter will convert an string to/from a double?. If the text is empty the value will be null.</p> <h3>Closure</h3> <p>Writing the NumberBox proposal and working with the WinUI team to get specs right was a great experience. I can recommend everyone to get involved and suggest new controls or features.</p> <p>Here are some other links you might be interesting:</p> <ul> <li><a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/number-box">NumberBox Guidelines Documentation</a></li> <li><a href="https://docs.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls.numberbox?view=winui-2.3">NumberBox API Documentation</a></li> <li><a href="https://www.microsoft.com/store/productId/9MSVH128X2ZT">Xaml Controls Gallery App</a> where NumberBox can be seen in action alongside more sample code</li> <li><a href="https://github.com/microsoft/microsoft-ui-xaml/issues/1736">NumberBox V2 Proposal</a></li> </ul> <p>Last, it may also be interesting for you to note that <a href="https://github.com/microsoft/microsoft-ui-xaml-specs/blob/user/savoyschuler/numberbox/active/NumberBox/NumberBox.md#required">integrated input validation is planned for NumberBox</a> and should be unblocked with the release of WinUI 3. =Ø Þ</p> <p>&#160;Fons</p></body></html>]]></content:encoded> </item> </channel> </rss>