How to use the VisualStateManager from winrt/C++ ?

[michelgerritse]

I'm new to WinUI 3 and as a hobbyist C/C++ developer (with enough years of Win32 UI coding experience) I want to give this is try.
I really like the look and feel of WinUI3 / Fluent apps and think it's an large improvement compared to native Win32 UI.

However, moving to WinUI3 is a huge learning curve (at least for me). It doesn't help that most of the documentation and samples are aimed towards C#. But I'm still making good progress, a bit slow at times.

What I'm currently trying to do is using the VisualStateManager to do a simple transition of my custom TitleBar text when the main window activates / deactivates. Eventually I want to use this to have a gray-scale icon image when the window is deactivated (I feel this is more in line with the caption text and buttons also using a gray color).

My XAML window looks like this:

<?xml version="1.0" encoding="utf-8"?>
<Window
	x:Class="Triton_UI_WinUI3.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:Triton_UI_WinUI3"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Activated="Window_Activated"
	mc:Ignorable="d">

	<Window.SystemBackdrop>
		<DesktopAcrylicBackdrop/>
	</Window.SystemBackdrop>

    <Grid x:Name="AppRoot">
		<Grid.RowDefinitions>
			<!-- Title bar area -->
            <RowDefinition Height="Auto"/>
            <!-- Navigation / content area -->
            <RowDefinition Height="*"/>
		</Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar"
			  Grid.Row="0"
			  Height="32"
              Background="Transparent"
			  Loading="AppTitleBar_Loading"
			  SizeChanged="AppTitleBar_SizeChanged">

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="WindowActivationStates">
                    <VisualState x:Name="Activated"/>
                    <VisualState x:Name="Deactivated">
                        <VisualState.Setters>
                            <Setter Target="TitleBarTextBlock.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            
            <Grid.ColumnDefinitions>
				<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
				<ColumnDefinition x:Name="IconColumn" Width="Auto"/>
				<ColumnDefinition x:Name="TitleColumn" Width="*"/>
				<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
			</Grid.ColumnDefinitions>

            <Border BorderThickness="1" BorderBrush="BlueViolet" Grid.ColumnSpan="4"/>

            <Image x:Name="TitleBarIcon"
				   Source="appicon.ico"
				   Grid.Column="1"
				   Width="16"
				   Height="16"
				   Margin="8,0,4,0"/>

            <TextBlock x:Name="TitleBarTextBlock"
					   Text="MyApp"
					   Grid.ColumnSpan="4"
                       TextWrapping="NoWrap"
                       Foreground="{ThemeResource WindowCaptionForeground}"
					   Style="{StaticResource CaptionTextBlockStyle}"
                       HorizontalAlignment="Center"
					   VerticalAlignment="Center">
            </TextBlock>
        </Grid>

		<NavigationView x:Name="AppNavigation"
		
                 <!--- markup code removed for readability -->

		</NavigationView>
	</Grid>
</Window>

In the MainWindow.xaml.cpp file I have an Activated event handler like this:

void winrt::MyApp::implementation::MainWindow::Window_Activated(IInspectable const& sender, WindowActivatedEventArgs const& args)
{
    if (args.WindowActivationState() == WindowActivationState::Deactivated)
    {
        VisualStateManager::GoToState(AppTitleBar().as<Controls::Control>(), L"Deactivated", true);
    }
    else
    {
        VisualStateManager::GoToState(AppTitleBar()).as<Controls::Control>(), L"Activated", true);
    }
}

But when running the code I'm getting COM errors about the interface not being supported.
I suspect the cause to be:
AppTitleBar().as<Controls::Control>()

The C# samples use "this". Some of the very rare C++ samples use "*this" But I'm getting compile errors as no user defined conversion to winrt::Microsoft::UI::Xaml::Controls::Control exist.

What is the supposed way to call the GoToState method ? I've tried many different things but none seem to work. I guess it should be something simple but I can't figure it out. Any help is much appreciated.

[lgztx96]

Grid does not inherit from Microsoft::UI::Xaml::Controls::Control
https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.grid?view=windows-app-sdk-1.5

example:

<Window ...>
<Page x:Name="RootPage">  
    <Grid x:Name="AppRoot">
        <Grid x:Name="AppTitleBar" ...>
  </Grid>
 <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="WindowActivationStates">
                    <VisualState x:Name="Activated"/>
                    <VisualState x:Name="Deactivated">
                        <VisualState.Setters>
                            <Setter Target="TitleBarTextBlock.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</Page>
</Window>

void winrt::MyApp::implementation::MainWindow::Window_Activated(IInspectable const& sender, WindowActivatedEventArgs const& args)
{
    if (args.WindowActivationState() == WindowActivationState::Deactivated)
    {
        VisualStateManager::GoToState(RootPage(), L"Deactivated", true);
    }
    else
    {
        VisualStateManager::GoToState(RootPage(), L"Activated", true);
    }
}

[michelgerritse]

Thanks for that, so it was something simple I was totally missing.

Edit: Seems I'm still missing something here, as I can't get it to work at all. So to simplify the problem I created a new C++ WinUI3 app using Visual Studio template, and modified it like this:

MainWindow.xaml:

<Window ...>
    <Page x:Name="RootPage" Background="Red">
        
        <Button x:Name="myButton" Click="myButton_Click" Background="Yellow">Click Me</Button>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="States">
                <VisualState x:Name="Default">
                     <!-- Default state-->
                </VisualState>

                <VisualState x:Name="TestState">
                    <VisualState.Setters>
                        <Setter Target="RootPage.Background" Value="Blue" />
                        <Setter Target="myButton.Background" Value="Green" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Page>
</Window>

MainWindow.xaml.cpp:

void MainWindow::myButton_Click(IInspectable const&, RoutedEventArgs const&)
{
    myButton().Content(box_value(L"Clicked"));

    auto retval = VisualStateManager::GoToState(RootPage(), L"TestState", false);
}

The visual state isn't changing when the button is clicked, the return value from GoToState is always false.
What am I doing wrong here?