Triggers

CompareStateTrigger

Enables a state if the value is equal to, greater than, or less than another value.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.CompareStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Less">
                    <VisualState.StateTriggers>
                        <triggers:CompareStateTrigger Comparison="LessThan"
                                                      Value="{Binding Value, ElementName=Slider, Mode=OneWay}"
                                                      To="3" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SliderStatus.Text" Value="Slider value is less than 3" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Equal">
                    <VisualState.StateTriggers>
                        <triggers:CompareStateTrigger Comparison="Equal"
                                                      Value="{Binding Value, ElementName=Slider, Mode=OneWay}"
                                                      To="3" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SliderStatus.Text" Value="Slider value is 3" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Greater">
                    <VisualState.StateTriggers>
                        <triggers:CompareStateTrigger Comparison="GreaterThan"
                                                      Value="{Binding Value, ElementName=Slider, Mode=OneWay}"
                                                      To="3" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SliderStatus.Text" Value="Slider value is greater than 3" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="GreaterThanOrEqual">
                    <VisualState.StateTriggers>
                        <triggers:CompareStateTrigger Comparison="GreaterThanOrEqual"
                                                      Value="{Binding Value, ElementName=Slider2, Mode=OneWay}"
                                                      To="4" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SliderStatus2.Text" Value="Slider value is 4 or greater" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="LessThanOrEqual">
                    <VisualState.StateTriggers>
                        <triggers:CompareStateTrigger Comparison="LessThanOrEqual"
                                                      Value="{Binding Value, ElementName=Slider2, Mode=OneWay}"
                                                      To="2" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SliderStatus2.Text" Value="Slider value is 2 or less" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel MaxWidth="400">
            <Slider x:Name="Slider"
                    Maximum="5"
                    Minimum="0" />
            <TextBlock x:Name="SliderStatus"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Text="If you see this, trigger isn't working" />
            <Slider x:Name="Slider2"
                    Margin="0,36,0,0"
                    Maximum="5"
                    Minimum="0" />
            <TextBlock x:Name="SliderStatus2"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Text="Slider value is 3" />
        </StackPanel>
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(CompareStateTriggerSample), "CompareStateTrigger", description: $"A sample for showing how to create and use a {nameof(CompareStateTrigger)}.")]
public sealed partial class CompareStateTriggerSample : Page
{
    public CompareStateTriggerSample()
    {
        this.InitializeComponent();
    }
}

ControlStateTrigger

Enables a state if the target control meets the specified size

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.ControlSizeTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <triggers:ControlSizeTrigger MinWidth="400"
                                                     MaxWidth="501"
                                                     TargetElement="{Binding ElementName=ParentGrid}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ResizingText.Text" Value="more than 400" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel MaxWidth="400">

            <Slider x:Name="Slider"
                    Maximum="500"
                    Minimum="1" />
            <Grid x:Name="ParentGrid"
                  Width="{Binding Value, ElementName=Slider, Mode=OneWay}"
                  Height="32"
                  Background="{ThemeResource AccentFillColorDefaultBrush}"
                  CornerRadius="{StaticResource ControlCornerRadius}" />

            <TextBlock Margin="0,12,0,0"
                       HorizontalAlignment="Center"
                       Style="{StaticResource CaptionTextBlockStyle}">
                <Run Text="Control size is" />
                <Run x:Name="ResizingText"
                     FontWeight="SemiBold"
                     Text="less than 400" />
            </TextBlock>
        </StackPanel>
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(ControlSizeTriggerSample), "ControlStateTrigger", description: $"A sample for showing how to create and use a {nameof(ControlSizeTrigger)}.")]
public sealed partial class ControlSizeTriggerSample : Page
{
    public ControlSizeTriggerSample()
    {
        this.InitializeComponent();
    }
}

IsEqualStateTrigger

Enables a state if the value is equal to another value.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.IsEqualStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="checkstate">
                    <VisualState.StateTriggers>
                        <!--  Checkbox is null when indeterminate  -->
                        <triggers:IsEqualStateTrigger Value="{Binding IsChecked, ElementName=checkbox, Mode=OneWay}"
                                                      To="{x:Null}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="checkStatus.Text" Value="indeterminate" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="sliderstate">
                    <VisualState.StateTriggers>
                        <triggers:IsEqualStateTrigger Value="{Binding Value, ElementName=slider, Mode=OneWay}"
                                                      To="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="sliderStatus.Text" Value="0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel MaxWidth="400">
            <CheckBox x:Name="checkbox"
                      Content="Check me"
                      IsChecked="True"
                      IsThreeState="True" />
            <TextBlock Margin="0,8,0,0"
                       Style="{StaticResource CaptionTextBlockStyle}">
                <Run Text="Checkbox value is" />
                <Run x:Name="checkStatus"
                     FontWeight="SemiBold"
                     Text="not indeterminate" />
            </TextBlock>

            <Slider x:Name="slider"
                    Margin="0,36,0,0"
                    Maximum="5"
                    Minimum="0" />
            <TextBlock Margin="0,8,0,0"
                       Style="{StaticResource CaptionTextBlockStyle}">

                <Run Text="Slider value is" />
                <Run x:Name="sliderStatus"
                     FontWeight="SemiBold"
                     Text="more than 0" />
            </TextBlock>
        </StackPanel>
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(IsEqualStateTriggerSample), "IsEqualStateTrigger", description: $"A sample for showing how to create and use a {nameof(IsEqualStateTrigger)}.")]
public sealed partial class IsEqualStateTriggerSample : Page
{
    public IsEqualStateTriggerSample()
    {
        this.InitializeComponent();
    }
}

IsNotEqualStateTrigger

Enables a state if the value is not equal to another value.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.IsNotEqualStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="checkstate">
                    <VisualState.StateTriggers>
                        <!--  Checkbox is null when indeterminate  -->
                        <triggers:IsNotEqualStateTrigger Value="{Binding IsChecked, ElementName=checkbox, Mode=OneWay}"
                                                         To="{x:Null}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="checkStatus.Text" Value="not indeterminate" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="sliderstate">
                    <VisualState.StateTriggers>
                        <triggers:IsNotEqualStateTrigger Value="{Binding Value, ElementName=slider, Mode=OneWay}"
                                                         To="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="sliderStatus.Text" Value="not 0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel MaxWidth="400">
            <CheckBox x:Name="checkbox"
                      Content="Check me"
                      IsChecked="True"
                      IsThreeState="True" />
            <TextBlock Margin="0,8,0,0"
                       Style="{StaticResource CaptionTextBlockStyle}">
                <Run Text="Checkbox value is" />
                <Run x:Name="checkStatus"
                     FontWeight="SemiBold"
                     Text="indeterminate" />
            </TextBlock>

            <Slider x:Name="slider"
                    Margin="0,36,0,0"
                    Maximum="5"
                    Minimum="0" />
            <TextBlock Margin="0,8,0,0"
                       Style="{StaticResource CaptionTextBlockStyle}">

                <Run Text="Slider value is" />
                <Run x:Name="sliderStatus"
                     FontWeight="SemiBold"
                     Text="0" />
            </TextBlock>
        </StackPanel>

    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(IsNotEqualStateTriggerSample), "IsNotEqualStateTrigger", description: $"A sample for showing how to create and use a {nameof(IsNotEqualStateTrigger)}.")]
public sealed partial class IsNotEqualStateTriggerSample : Page
{
    public IsNotEqualStateTriggerSample()
    {
        this.InitializeComponent();
    }
}

IsNullOrEmptyStateTrigger

Enables a state if an Object is null or a String/IEnumerable is empty.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.IsNullOrEmptyStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="TextBoxStates">
                <VisualState x:Name="TextBoxNotEmptyState" />
                <VisualState x:Name="TextBoxEmptyState">
                    <VisualState.StateTriggers>
                        <triggers:IsNullOrEmptyStateTrigger Value="{Binding Text, ElementName=OurTextBox, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="OurTextBox.BorderBrush" Value="Red" />
                        <Setter Target="OurTextBoxError.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ListBoxStates">
                <VisualState x:Name="ListNotEmptyState" />
                <VisualState x:Name="ListEmptyState">
                    <VisualState.StateTriggers>
                        <triggers:IsNullOrEmptyStateTrigger Value="{Binding Items, ElementName=OurList, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RemoveButton.IsEnabled" Value="False" />
                        <Setter Target="ListEmptyMessage.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel HorizontalAlignment="Center"
                    Spacing="12">
            <TextBox x:Name="OurTextBox"
                     Header="The TextBox below will warn if it is empty."
                     Text="" />
            <TextBlock x:Name="OurTextBoxError"
                       VerticalAlignment="Center"
                       Foreground="{ThemeResource SystemFillColorCriticalBrush}"
                       Text="* required"
                       Visibility="Collapsed" />

            <TextBlock x:Name="ListEmptyMessage"
                       Margin="0,24,0,0"
                       Text="List is empty, add some items"
                       Visibility="Collapsed" />
            <StackPanel Orientation="Horizontal">
                <Button x:Name="AddButton"
                        Margin="0,0,4,0"
                        Click="AddButton_Click"
                        Content="Add" />
                <Button x:Name="RemoveButton"
                        Click="RemoveButton_Click"
                        Content="Remove" />
            </StackPanel>
            <ListView x:Name="OurList"
                      HorizontalAlignment="Left">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <TextBlock Text="{Binding}" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>

    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(IsNullOrEmptyStateTriggerSample), "IsNullOrEmptyStateTrigger", description: $"A sample for showing how to create and use a {nameof(IsNullOrEmptyStateTrigger)}.")]
public sealed partial class IsNullOrEmptyStateTriggerSample : Page
{
    public IsNullOrEmptyStateTriggerSample()
    {
        this.InitializeComponent();
    }

    private void AddButton_Click(object sender, RoutedEventArgs e)
    {
        if (OurList != null)
        {
            OurList.Items.Add("Item");
        }
    }

    private void RemoveButton_Click(object sender, RoutedEventArgs e)
    {
        if (OurList != null)
        {
            OurList.Items.RemoveAt(0);
        }
    }
}

NetworkConnectionStateTrigger

Trigger for switching when the network availability changes.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.NetworkConnectionStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="connected">
                    <VisualState.StateTriggers>
                        <triggers:NetworkConnectionStateTrigger ConnectionState="Connected" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="connectionStatus.Text" Value="Internet is available" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="disconnected">
                    <VisualState.StateTriggers>
                        <triggers:NetworkConnectionStateTrigger ConnectionState="Disconnected" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="connectionStatus.Text" Value="No internet connection" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <TextBlock HorizontalAlignment="Center">
            <Run Text="Connection status:" />
            <Run x:Name="connectionStatus"
                 FontWeight="SemiBold" />
        </TextBlock>
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(NetworkConnectionStateTriggerSample), "NetworkConnectionStateTrigger", description: $"A sample for showing how to create and use a {nameof(NetworkConnectionStateTrigger)}.")]
public sealed partial class NetworkConnectionStateTriggerSample : Page
{
    public NetworkConnectionStateTriggerSample()
    {
        this.InitializeComponent();
    }
}

RegexStateTrigger

Enables a state if the regex expression is true for a given string value.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.RegexStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="validEmail">
                    <VisualState.StateTriggers>
                        <!--  Note: Simple example RegEx, see our IsEmail string extension using emailregex.com for official RFC 5322 support  -->
                        <triggers:RegexStateTrigger Expression="^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$"
                                                    Options="IgnoreCase"
                                                    Value="{Binding Text, ElementName=emailTextBox, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="emailStatus.Text" Value="This is a valid email" />
                        <Setter Target="emailStatus.Foreground" Value="{ThemeResource SystemFillColorSuccessBrush}" />
                        <Setter Target="submitButton.IsEnabled" Value="true" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel MaxWidth="400">
            <TextBox x:Name="emailTextBox"
                     HorizontalAlignment="Stretch"
                     Header="Enter an email" />
            <TextBlock x:Name="emailStatus"
                       Margin="0,4,0,24"
                       Foreground="{ThemeResource SystemFillColorCriticalBrush}"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Text="Not a valid email" />
            <Button x:Name="submitButton"
                    Content="Submit"
                    IsEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(RegexStateTriggerSample), "RegexStateTrigger", description: $"A sample for showing how to create and use a {nameof(RegexStateTrigger)}.")]
public sealed partial class RegexStateTriggerSample : Page
{
    public RegexStateTriggerSample()
    {
        this.InitializeComponent();
    }
}

UserHandPreferenceStateTrigger

Trigger for switching UI based on whether the user favors their left or right hand.

XAML

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TriggersExperiment.Samples.UserHandPreferenceStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="leftHanded">
                    <VisualState.StateTriggers>
                        <triggers:UserHandPreferenceStateTrigger HandPreference="LeftHanded" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="handPreferenceStatus.Text" Value="You are left-handed" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="rightHanded">
                    <VisualState.StateTriggers>
                        <triggers:UserHandPreferenceStateTrigger />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="handPreferenceStatus.Text" Value="You are right-handed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel HorizontalAlignment="Center">
            <TextBlock x:Name="handPreferenceStatus"
                       HorizontalAlignment="Center"
                       FontWeight="SemiBold" />
            <TextBlock Margin="0,12"
                       HorizontalAlignment="Center"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Text="Set your hand preference in Windows settings (Devices -> Pen) then restart the app."
                       TextWrapping="WrapWholeWords" />
        </StackPanel>
    </Grid>
</Page>

C#

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(UserHandPreferenceStateTriggerSample), "UserHandPreferenceStateTrigger", description: $"A sample for showing how to create and use a {nameof(UserHandPreferenceStateTrigger)}.")]
public sealed partial class UserHandPreferenceStateTriggerSample : Page
{
    public UserHandPreferenceStateTriggerSample()
    {
        this.InitializeComponent();
    }
}