Maui Controls Rendering Differently

Question

Hey,

I've been upgrading my old Xamarin Forms app too .NET Maui. All is going well and it is a lot easier to use but it seems that the Frame control renders different to Xamarin and also different on devices.

I'm basically trying to create a 'progress pill' look and feel for a wizard step system I am using for user registration. On Xamarin this worked fine, it is reasonably close in Maui on iOS but in Maui on Android it just basically ignores the height requests it seems.

I've attached an image which contains a snippet of the screen. Top is iOS and bottom is android, both using the same code.

The code that achieves this is

    <Shell.TitleView>  
        <Grid>  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="3*" />  
                <ColumnDefinition Width="4*" />  
                <ColumnDefinition Width="3*" />  
            </Grid.ColumnDefinitions>  
            <Grid.RowDefinitions>  
                <RowDefinition Height="*"/>  
                <RowDefinition Height="5"/>  
                <RowDefinition Height="1*"/>  
            </Grid.RowDefinitions>  
              
            <Label Grid.Row="0" Grid.Column="1" Text="{Binding StepName}" HorizontalOptions="Center" FontFamily="Montserrat-SemiBold" HorizontalTextAlignment="Center" VerticalOptions="Start" TextColor="White" FontSize="17" />  
  
            <FlexLayout Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2" Padding="10,10,10,10" JustifyContent="SpaceAround" HeightRequest="5">  
                <Frame HasShadow="False" BackgroundColor="{Binding WizardStep1MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5" Padding="0" />  
                <Frame HasShadow="False" BackgroundColor="{Binding WizardStep2MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5" Padding="0" />  
                <Frame HasShadow="False" BackgroundColor="{Binding WizardStep3MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5" Padding="0" />  
                <Frame HasShadow="False" BackgroundColor="{Binding WizardStep4MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5" Padding="0" />  
                <Frame HasShadow="False" BackgroundColor="{Binding WizardStep5MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5" Padding="0" />  
                <Frame HasShadow="False" BackgroundColor="{Binding WizardStep6MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5" Padding="0" />  
                <Frame HasShadow="False" BackgroundColor="{Binding WizardStep7MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5" Padding="0" />  
            </FlexLayout>  
        </Grid>  
    </Shell.TitleView>  

I had planned to update this from a FlexLayout to a StackLayout and then use Spacing and HorizontalOptions to fill the 'pills' to their maximum size but that just makes them disappear all together for some reason.

Any ideas around this in terms of why they are different on different platforms and why it's different to how it used to render? I'm wanting to get it pretty much like the iOS version which more or less matches my original Xamarin version.

Answer 1

Hello,

I can reproduce this issue, HeightRequest of Frame is not working in Android platform of MAUI. Please report this issue in the MAUI Github page.

You can use Boxview instead of Frame to achieve the same effect

   <BoxView  Color="{Binding WizardStep1MarkerColour}" HeightRequest="5" WidthRequest="27" CornerRadius="5" Margin="5"  />  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.