Adding Some Behaviors to Your WinUI Uno Application

With the recent release of Windows UI and support for cross platform offered by the Uno Platform, it’s going to take a little while for the various UWP libraries that we’re familiar with to be ported across. They firstly need to be ported to Windows UI and then they need a Uno build.

The Uno team have been working overtime to ensure cross platform app developers have all the tools they need. One of the first is a port of Microsoft.Xaml.Behaviors which is available as a preview NuGet package for Uno applications.

To get started with this library, simply add the NuGet package to each of your Uno projects and then add the appropriate namespaces to your XAML. Here’s a basic example of using the ChangePropertyAction behavior to change the Background of the Button to Red when the Button Click event is raised.

<Page x:Class="UnoReunionApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoReunionApp"
      xmlns:ios="http://uno.ui/ios"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
      ios:VisibleBoundsPadding.PaddingMask="All"
      mc:Ignorable="d ios">
    <!-- .... -->
    <Button Click="{x:Bind ViewModel.Click}"
            x:Name="Click"
            HorizontalAlignment="Center"
            Content="Click Me!">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click">
                <Core:ChangePropertyAction PropertyName="Background">
                    <Core:ChangePropertyAction.Value>
                        <SolidColorBrush Color="Red" />
                    </Core:ChangePropertyAction.Value>
                </Core:ChangePropertyAction>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>
    <!-- .... -->
</Page>