Commerce sample has an unused VisualState, making the code confusing

[ArchieCoder]

Current behavior

In my basic app, when I resize to the smallest state, I want to hide one user control and show the other user control. Despite having Collapsed state in the VSM, both controls are shown. The Collapsed value is not respected.

Expected behavior

I'm expecting that the values are respected.

How to reproduce it (as minimally and precisely as possible)

1- Compile with Desktop/Skia Test.zip. 2- Resize the app and see the 2 colored rectangles on top.

There is a bug with WinAppSDK that this project does not compile https://github.com/unoplatform/uno/issues/16708

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

5.2.121

Affected platforms

Skia (WPF)

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[Youssef1313]

@ArchieCoder Now that the WinUI build issue is sorted out, can you check the behavior on WinUI? It looks like Uno matches WinUI here. Meanwhile, I'll investigate why it's not behaving the way we're expecting.

[ArchieCoder]

@Youssef1313 I simplified drastically the MainPage.xaml and VSM does not work. Narrow state is not triggered.

<Page x:Class="ElementsTechnician.Presentation.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:presentation="using:ElementsTechnician.Presentation" xmlns:uen="using:Uno.Extensions.Navigation.UI" xmlns:ui="using:Uno.Toolkit.UI" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" NavigationCacheMode="Required">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition
            Height="Auto" />
        <RowDefinition
            Height="Auto" />
    </Grid.RowDefinitions>

    <presentation:TitleWithAppControl
        x:Name="TitleGreenControl" />

    <presentation:TitleControl
        x:Name="TitleBlueControl"
        Grid.Row="1" />

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>

            <VisualState
                x:Name="Narrow">
                <VisualState.Setters>
                    <Setter Target="TitleBlueControl.Visibility" Value="Visible" />
                    <Setter Target="TitleGreenControl.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>

            <VisualState
                x:Name="Normal">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger
                        MinWindowWidth="700" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TitleBlueControl.Visibility" Value="Collapsed" />
                    <Setter Target="TitleGreenControl.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>

            <VisualState
                x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger
                        MinWindowWidth="1000" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TitleBlueControl.Visibility" Value="Collapsed" />
                    <Setter Target="TitleGreenControl.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

</Grid>

[Youssef1313]

Actually, you have a visual state called Narrow, but it doesn't have any state triggers nor any explicit GoToState calls, so I think it's expected?

[ArchieCoder]

My code above was a "copy-paste" from the Uno Commerce app.

The file is ...\Uno.Samples\reference\Commerce\Commerce\Commerce\Views\HomePage.xaml

[ArchieCoder]

You were right @Youssef1313. A trigger is needed. I took for granted the sample, without going deeper.

                <VisualState.StateTriggers>
                    <AdaptiveTrigger
                        MinWindowWidth="0" />
                </VisualState.StateTriggers>

[Youssef1313]

@ArchieCoder Happy to help!

A different approach is to remove the whole "Narrow" state and set the properties directly, e.g:

                <presentation:TitleWithAppControl
                    x:Name="TitleGreenControl" Visibility="Collapsed" />

So, when none of the states you have is active, this will be the value being used.

[Youssef1313]

I'll re-open and move to Uno.Samples to adjust the sample and make it less confusing.

[Youssef1313]

FYI @nickrandolph

[agneszitte]

Thank you @ArchieCoder and @Youssef1313 for all the details and feedback I will take a look at the sample app