C#•12mo ago

Maui App looks different on different platforms

On Windows and Android it looks as desired (see screenshot), but on Mac the TitleView is empty and has no content.

<FlyoutItem Title="Customer Support" Icon="headset_blue.png">
        <ShellContent 
            Title="Customer Support"
            ContentTemplate="{DataTemplate views:CustomerSupport}"
            Route="Customer Support"
            >
            <Shell.TitleView>
                <Grid>
                    <Image HeightRequest="20" WidthRequest="20" VerticalOptions="Center" Margin="10, 0, 0, 0" HorizontalOptions="Start" Source="headset_white.png"></Image>
                    <Label FontSize="22" FontAttributes="Bold" TextColor="#FFFFFF" Margin="40, 0, 0, 0" VerticalOptions="Center" HorizontalOptions="Start" Text="Customer Support"></Label>
                    <ImageButton BackgroundColor="{StaticResource Primary}" Background="{StaticResource Primary}" BorderColor="{StaticResource Primary}" Clicked="PhoneButton_Clicked" Margin="0, 0, 22, 0" HeightRequest="20" WidthRequest="20" HorizontalOptions="End" VerticalOptions="Center" Source="phone_white.png"/>
                    <ImageButton IsVisible="{Binding NewTicketOrCallNotificationVisible}" BackgroundColor="{StaticResource Primary}" Background="{StaticResource Primary}" BorderColor="{StaticResource Primary}" Clicked="PhoneButton_Clicked" Margin="0, 12, 10, 0" HeightRequest="9" WidthRequest="9" HorizontalOptions="End" VerticalOptions="Center" Source="circle_red.png"/>
                </Grid>
            </Shell.TitleView>
        </ShellContent>
    </FlyoutItem>

<FlyoutItem Title="Customer Support" Icon="headset_blue.png">
        <ShellContent 
            Title="Customer Support"
            ContentTemplate="{DataTemplate views:CustomerSupport}"
            Route="Customer Support"
            >
            <Shell.TitleView>
                <Grid>
                    <Image HeightRequest="20" WidthRequest="20" VerticalOptions="Center" Margin="10, 0, 0, 0" HorizontalOptions="Start" Source="headset_white.png"></Image>
                    <Label FontSize="22" FontAttributes="Bold" TextColor="#FFFFFF" Margin="40, 0, 0, 0" VerticalOptions="Center" HorizontalOptions="Start" Text="Customer Support"></Label>
                    <ImageButton BackgroundColor="{StaticResource Primary}" Background="{StaticResource Primary}" BorderColor="{StaticResource Primary}" Clicked="PhoneButton_Clicked" Margin="0, 0, 22, 0" HeightRequest="20" WidthRequest="20" HorizontalOptions="End" VerticalOptions="Center" Source="phone_white.png"/>
                    <ImageButton IsVisible="{Binding NewTicketOrCallNotificationVisible}" BackgroundColor="{StaticResource Primary}" Background="{StaticResource Primary}" BorderColor="{StaticResource Primary}" Clicked="PhoneButton_Clicked" Margin="0, 12, 10, 0" HeightRequest="9" WidthRequest="9" HorizontalOptions="End" VerticalOptions="Center" Source="circle_red.png"/>
                </Grid>
            </Shell.TitleView>
        </ShellContent>
    </FlyoutItem>

I've tried to add RowDefinitions="Auto" to the Grid, which made the stuff appear on Mac, so the issue is with sizing. But when I do put it to Auto, the content of the TitleView is not centered even tho I specified VerticalOptions=Center everywhere. Any help?

6 Replies

aquaritek•12mo ago

While I can't answer this question directly. I did want to give a more broadly scoped response. Since Maui compiles to Native environment components for each supported platform. You're definitely going to experience issues keeping the "look" identical across said platforms. It's very much like other "compile to native" libraries like React Native for example. Maui w/Blazor and it's WebView2 rendering wrapper would allow you to create identical application UI's across each supported platform (with its own quirks of course). It behaves a lot more like Flutter in that sense - while architecturally very different of course. Just tossing this in here.

Florian VoßOP•12mo ago

actually not entirely true, you can achieve consistent designs with both Maui Blazor and Maui Xaml

Florian VoßOP•12mo ago

it is consistent across different platforms, its just mac and iOS that don't work as expected, and I think its related to this issue: https://github.com/dotnet/maui/issues/15189

GitHub

Latest update to Visual Studio for Mac breaks CollectionView · Issu...

Description Yesterday (5/18/23) I had finished testing my CacheAll app on my Mac and was ready to upload it to the AppStore and run it from TestFlight. However, VS told me there was an update so I ...

Florian VoßOP•12mo ago

apparently new version of Visual Studio Mac or Apple SDK or Maui SDK or whatever ruined how Layout components work on maccatalyst workload

Florian VoßOP•12mo ago

Florian VoßOP•12mo ago

@aquaritek

Gaming

Programming

Maui App looks different on different platforms

Did you find this page helpful?