dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.06k stars 1.73k forks source link

[regression/8.0.0-preview.5.8529] Shell flyout layout is incorrect #15793

Closed davidortinau closed 1 year ago

davidortinau commented 1 year ago

Description

Running on net8 preview 5 I observed the flyout with a custom item template suddenly has an inconsistent layout.

Screenshot 2023-06-21 at 3 15 34 PM
<Shell.ItemTemplate>
                <DataTemplate>
                    <Grid ColumnDefinitions="15,0.2*,0.8*">
                        <Image Source="{Binding FlyoutIcon}"
                            Margin="5"
                            HeightRequest="35"
                            Grid.Column="1" />
                        <Label Grid.Column="2"
                            Text="{Binding Title}"
                            FontAttributes="Italic"
                            VerticalTextAlignment="Center" />
                        <Grid.Behaviors>
                            <b:CursorBehavior/>
                        </Grid.Behaviors>
                    </Grid>
                </DataTemplate>
            </Shell.ItemTemplate>

Steps to Reproduce

Update the solution to net8 preview 5. Run it and see.

Link to public reproduction project repository

https://github.com/davidortinau/ControlGallery/blob/sharpination/src/ControlGallery/ControlGallery.csproj

Version with bug

8.0.0-preview.5.8529

Last version that worked well

7.0.86

Affected platforms

iOS, Android

Affected platform versions

33, 16.4

Did you find any workaround?

No response

Relevant log output

No response

davidortinau commented 1 year ago

I suspect this is related since it's also using a Grid with s. `<Grid ColumnDefinitions="60,20,20">`

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:system="clr-namespace:System;assembly=netstandard"
             xmlns:views="clr-namespace:PointOfSale.Pages.Views"
             xmlns:m="clr-namespace:PointOfSale.Models"
             x:DataType="views:OrderCartViewModel"
             x:Class="PointOfSale.Pages.Views.OrderCartView"
             Background="{StaticResource DarkBg2Brush}">

    <ContentView.BindingContext>
        <views:OrderCartViewModel/>
    </ContentView.BindingContext>

    <Grid RowDefinitions="*,108">
        <ScrollView>
            <VerticalStackLayout Margin="24" Spacing="20">
                <Label 
                    Text="Order #4773"
                    Style="{StaticResource Title1}" />
                <HorizontalStackLayout Spacing="12">
                    <HorizontalStackLayout.Resources>

                        <Style TargetType="RadioButton">
                            <Setter Property="ControlTemplate" Value="{StaticResource ButtonRadioTemplate}"/>
                        </Style>

                    </HorizontalStackLayout.Resources>
                    <RadioButton Content="Dine In" IsChecked="True"/>
                    <RadioButton Content="Carry Out"/>
                    <RadioButton Content="Delivery"/>
                </HorizontalStackLayout>

                <Grid ColumnDefinitions="60*,20*,20*">
                        <Label Text="Item" Style="{StaticResource Headline}"/>
                        <Label Text="Qty" Style="{StaticResource Headline}" Grid.Column="1"/>
                        <Label Text="Price" Style="{StaticResource Headline}" Grid.Column="2"/>
                    </Grid>
                    <BoxView Style="{StaticResource HRule}"/>

                <VerticalStackLayout Spacing="12"
                                     BindableLayout.ItemsSource="{Binding Order.Items}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="m:Item">
                            <Grid ColumnDefinitions="60*,20*,20*">
                                <HorizontalStackLayout Spacing="8">
                                    <Image WidthRequest="40" HeightRequest="40"
                                           Aspect="AspectFit"
                                           Source="{Binding Image}"/>

                                    <Label Style="{StaticResource Headline}">
                                        <Label.FormattedText>
                                            <FormattedString>
                                                <Span Text="{Binding Title}"/>
                                                <Span Text="{x:Static system:Environment.NewLine}"/>
                                                <Span TextColor="{StaticResource TextSecondary}" FontSize="12" Text="{Binding Price, StringFormat='${0}'}"/>
                                            </FormattedString>
                                        </Label.FormattedText>
                                    </Label>
                                </HorizontalStackLayout>

                                <Border
                                    Grid.Column="1"
                                    HeightRequest="44"
                                    WidthRequest="44"
                                    Background="{StaticResource DarkBg1Brush}"
                                    Stroke="{StaticResource SecondaryBrush}"
                                    StrokeThickness="1">
                                    <Border.StrokeShape>
                                        <RoundRectangle CornerRadius="8"/>
                                    </Border.StrokeShape>
                                    <Entry Text="{Binding Quantity}"
                                           MaxLength="2"
                                           WidthRequest="44"
                                           HorizontalTextAlignment="Center"
                                           Keyboard="Numeric"
                                           Background="Transparent" TextColor="White"
                                           HorizontalOptions="Center" VerticalOptions="Center"
                                    />

                                </Border>
                                <Label Text="{Binding SubTotal, StringFormat='${0}'}"
                                       Grid.Column="2"
                                       VerticalOptions="Center"/>
                            </Grid>
                        </DataTemplate>

                    </BindableLayout.ItemTemplate>

                </VerticalStackLayout>
            </VerticalStackLayout>
        </ScrollView>
        <Button Text="Place Order" HorizontalOptions="Fill" Margin="24" Grid.Row="1"
                Command="{Binding PlaceOrderCommand}"/>

    </Grid>
</ContentView>

.NET 7:

Screenshot 2023-06-22 at 3 56 21 PM

.NET 8:

Screenshot 2023-06-22 at 3 43 24 PM