MAUI WinUI Grids don't render properly in flyout menu

vsfeedback commented 8 months ago

This issue has been moved from a ticket on Developer Community.

Our .Net MAUI app uses custom DataTemplates for ShellContent in a FlyoutItem. When the DataTemplate contains a Grid, it does not render properly on Windows. It does render properly on Android and iOS.

I've attached a modified version of the .Net MAUI Shell sample app that reproduces the problem.

This is the expected result (as shown on Android):

flyout on Andriod.png

And this is what we get on Windows:

flyout on Windows.png

You can see the Grid does not take up the full width available.

This is the DataTemplate:

    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="Auto,*,Auto"
                  Padding="5"
                  BackgroundColor="LightGreen">
                <Image Grid.Column="0"
                       Source="{Binding Icon}"
                       HeightRequest="30"
                       BackgroundColor="Salmon"/>
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center"
                       HorizontalTextAlignment="Center"
                       BackgroundColor="Cyan"/>
                <Image Grid.Column="2"
                       Source="{Binding Icon}"
                       HeightRequest="30"
                       BackgroundColor="Teal"/>
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

Original Comments

Feedback Bot on 12/17/2023, 05:53 PM:

(private comment, text removed)

Original Solutions

(no solutions)

PureWeen commented 8 months ago

ghost commented 8 months ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

XamlTest commented 7 months ago

Verified this on Visual Studio Enterprise 17.9.0 Preview 2(8.0.3 and 7.0.101). Repro on Windows 11, not repro on Android 14.0-API34, iOS 17.0 and MacCatalyst with below Project: Shell.zip

Windows: Android:

showtroylove commented 4 months ago

I'm experiencing the same issue on Windows 11. It works fine on iOS and MacCatalyst, but crashes the app entirely on Android. Only when I attempt to apply my own FlyoutItemTemplate, however.

dotnet / maui