ItemRepeater uses minimal horizontal space in some circumstance when using modal navigation

[Marc-Antoine-Soucy]

Current behavior

When navigating to or from a modal page, if a ScrollViewer is present around an ItemRepeater without disabling horizontal scrolling, the items within the ItemRepeater will occupy the least amount of horizontal space possible.

Expected behavior

Just like on WinUI, the ItemRepeater should take all available space when it's set to stretch.

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

In the MainPage:

<Button
                uen:Navigation.Request="!SecondPage"
                AutomationProperties.AutomationId="SecondPageButton"
                Content="Go to Second Page with modal navigation" />
            <Button
                uen:Navigation.Request="SecondPage"
                AutomationProperties.AutomationId="SecondPageButton"
                Content="Go to Second Page" />

In the second page:

<Page.Resources>
        <DataTemplate x:Key="SomeTemplate">
            <Grid
                Height="100"
                HorizontalAlignment="Stretch"
                Background="Red" />
        </DataTemplate>
    </Page.Resources>

    <Grid utu:SafeArea.Insets="All">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <utu:NavigationBar Content="Second Page">
            <utu:NavigationBar.MainCommand>
                <AppBarButton>
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="ms-appx:///unoExtensionBasicApp/Assets/Icons/back.png" />
                    </AppBarButton.Icon>
                </AppBarButton>
            </utu:NavigationBar.MainCommand>
        </utu:NavigationBar>
        <ScrollViewer
            x:Name="PrimaryScrollViewer"
            Grid.Row="1"
            Background="{ThemeResource BackgroundBrush}">
                <muxc:ItemsRepeater ItemTemplate="{StaticResource SomeTemplate}" ItemsSource="{Binding Bools}">
                    <muxc:ItemsRepeater.Layout>
                        <muxc:UniformGridLayout
                            ItemsStretch="Fill"
                            MaximumRowsOrColumns="2"
                            MinColumnSpacing="10"
                            MinItemWidth="130"
                            MinRowSpacing="10" />
                    </muxc:ItemsRepeater.Layout>
                </muxc:ItemsRepeater>
        </ScrollViewer>
    </Grid>

unoExtensionBasicApp.zip

Environment

Nuget Package:

Package Version(s):

<PackageVersion Include="SkiaSharp.Skottie" Version="2.88.3" />
    <PackageVersion Include="SkiaSharp.Views.Uno.WinUI" Version="2.88.4-preview.84" />
    <PackageVersion Include="Swashbuckle.AspNetCore" Version="6.5.0" />
    <PackageVersion Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
    <PackageVersion Include="Uno.Extensions.Configuration" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Hosting" Version="2.4.2" />
    <PackageVersion Include="Uno.Extensions.Hosting.WinUI" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Http" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Http.Refit" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Localization" Version="2.4.2" />
    <PackageVersion Include="Uno.Extensions.Localization.WinUI" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Logging.OSLog" Version="1.6.0-dev.2" />
    <PackageVersion Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.6.0-dev.2" />
    <PackageVersion Include="Uno.Extensions.Logging.WinUI" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Navigation" Version="2.4.2" />
    <PackageVersion Include="Uno.Extensions.Navigation.WinUI" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Navigation.Toolkit.WinUI" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Reactive" Version="2.4.2" />
    <PackageVersion Include="Uno.Extensions.Reactive.WinUI" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Serialization" Version="2.4.2" />
    <PackageVersion Include="Uno.Extensions.Serialization.Http" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Extensions.Serialization.Refit" Version="3.0.0-dev.1960" />
    <PackageVersion Include="Uno.Material.WinUI" Version="3.0.0-dev.260" />
    <PackageVersion Include="Uno.Dsp.Tasks" Version="1.1.0" />
    <PackageVersion Include="Uno.Toolkit.WinUI" Version="4.0.0-dev.35" />
    <PackageVersion Include="Uno.Extensions.Toolkit.WinUI" Version="3.0.0-dev.1957" />
    <PackageVersion Include="Uno.Toolkit.WinUI.Material" Version="4.0.0-dev.35" />
    <PackageVersion Include="Uno.Resizetizer" Version="1.2.0-dev.19" />
    <PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="5.0.0-dev.1344" />
    <PackageVersion Include="Uno.UniversalImageLoader" Version="1.9.36" />
    <PackageVersion Include="Uno.Wasm.Bootstrap" Version="8.0.0-dev.226" />
    <PackageVersion Include="Uno.Wasm.Bootstrap.DevServer" Version="8.0.0-dev.226" />
    <PackageVersion Include="Uno.Wasm.Bootstrap.Server" Version="8.0.0-dev.226" />
    <PackageVersion Include="Uno.WinUI" Version="5.0.0-dev.1344" />
    <PackageVersion Include="Uno.WinUI.RemoteControl" Version="5.0.0-dev.1344" />
    <PackageVersion Include="Uno.WinUI.Skia.Gtk" Version="5.0.0-dev.1344" />
    <PackageVersion Include="Uno.WinUI.WebAssembly" Version="5.0.0-dev.1344" />
    <PackageVersion Include="Xamarin.Google.Android.Material" Version="1.8.0" />
    <PackageVersion Include="Uno.UITest.Helpers" Version="1.1.0-dev.59" />
    <PackageVersion Include="Xamarin.UITest" Version="4.1.3" />

Affected platform(s):

• [ ] iOS
• [X] Android
• [X] WebAssembly
• [ ] WebAssembly renders for Xamarin.Forms ?
• [ ] Windows
• [ ] Build tasks

Visual Studio:

• [ ] 2017 (version: )
• [X] 2022 (version: Version 17.6.0)
• [ ] for Mac (version: )

Relevant plugins:

• [ ] Resharper (version: )

Anything else we need to know?

I was at 15 min on building IOS, so I stopped, but I know the bug was happening on earlier version on IOS.

having HorizontalScrollMode="Disabled" in the scrollviewer is a good workaround for this issue.

[agneszitte]

(as info @jeromelaban)

[agneszitte]

cc @dr1rrb

[dr1rrb]

@Marc-Antoine-Soucy So it seems linked to the Flyout (used by the "modal" nav) and the usage you have of them.

Flyout seems to have a hard-code MaxWidth that you have disabled (don't even known how you did it, I'm unable to repro in a sample app). While on Windows it somehow works, with Uno the hard-coded width still impacts the ItemsRepeater (and most probably the computed "effective view-port").

As it's not a standard way to use Flyout and there is a simple workaround, we won't fix this for now.

[kazo0]

@Marc-Antoine-Soucy is this a major blocker for any of the pages with the ui refresh work?

[carlh98]

Had the same issue for the Profile Detail page, used the workaround from @Marc-Antoine-Soucy

[Marc-Antoine-Soucy]

I made another sample with the newest nugets but this time, it's happening with AutoLayout. On wasm: On windows:

<ScrollViewer utu:AutoLayout.PrimaryAlignment="Stretch"
                  Grid.Row="1">
        <utu:AutoLayout Orientation="Horizontal">
            <TextBlock Text="Left"
                       utu:AutoLayout.PrimaryAlignment="Stretch" />
            <TextBlock Text="Right" />
        </utu:AutoLayout>
</ScrollViewer>

@dr1rrb The new sample, I think, clearly shows it's not due to a hardcoded width on other platform, but rather that the ScrollViewer for some reason acts horizontally like a StackPanel/ or as if it was a scrollable Scrollviewer, giving the minimum space, rather than giving all the space it can horizontally. This only happens with a few controls, apparently, with the Items repeater being one, and the autolayout being another. UnoExtensionsNavigation.zip

I'm not sure if it would be worth creating another issue for this since I think it's the same issue.

Also, worth noting this new sample is just the default uno app with a modal navigation to page 2 that contains the code above.