search

unoplatform / Uno.Samples

A collection of code samples for the Uno Platform
http://platform.uno/
Other
207 stars 107 forks source link

Commerce sample has an unused VisualState, making the code confusing #683

Open ArchieCoder opened 3 months ago

ArchieCoder commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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

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

image
ArchieCoder commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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

Youssef1313 commented 3 months ago

FYI @nickrandolph

agneszitte commented 3 months ago

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