AdaptiveTriggers' order declared in XAML shouldn't matter

[MatFillion]

Current behavior

Take this code with 2 very small AdaptiveTriggers(0 and 10) that most likely are always "true". (not very useful, but proving the point)

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SizeGroup">
            <VisualState x:Name="Large">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="10"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Root.Background"
                            Value="Yellow"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Small">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Root.Background"
                            Value="Red"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>

and the same triggers but listed in a different order

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SizeGroup">
            <VisualState x:Name="Small">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Root.Background"
                            Value="Red"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Large">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="10"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Root.Background"
                            Value="Yellow"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>

Observe on UWP both code render the same thing (background is yellow) but with Uno they seem to be evaluated in the order they are declared in XAML.

Expected behavior

Same behavior as UWP. The order declared in XAML shouldn't affect the rendered result.

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

Make a new Uno app using the template and paste the above code.

Environment

Nuget Package: 2.0

• iOS
• Android
• WebAssembly
• macOS (didn't test)

[agneszitte]

FYI @jeromelaban

This issue is still happening with the latest Uno.UI stable version 4.7.44 and latest dev version 4.8.0-dev.560

Another snippet to test the issue:

<Grid>
        <!-- ISSUE : https://github.com/unoplatform/uno/issues/2662 -->
        <!-- The WIDE VisualState.StateTriggers are not working on the other platforms here after the NARROW  VisualState.StateTriggers -->
        <!-- The VisualState.StateTriggers are working fine on Windows with this snippet of code for NARROW and WIDE (the order doesn`t matter) -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="NarrowApp">
                    <!-- Windows and all the other platforms needs <AdaptiveTrigger MinWindowWidth="0" /> in this case here 
                         to properly manage the setters for the Narrow visual state between 0 and 800 for the Width -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BorderTest.Background"
                                Value="LightPink" />
                        <Setter Target="TextBlockTest.Text"
                                Value="Test Narrow" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="WideApp">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="BorderTest.Background"
                                Value="Orange" />
                        <Setter Target="TextBlockTest.Text"
                                Value="Test Wide" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Border x:Name="BorderTest"
                Margin="20"
                Background="LightBlue">
            <TextBlock x:Name="TextBlockTest"
                       Text="Test" />
        </Border>
    </Grid>

The StatesTriggers listed the other way around will work fine for WIDE but not for NARROW