iosbuttonmauistylingmaui-ios

Why are the button sizes on the iOS simulator so huge, but correctly sized on Windows and Android? - .NET MAUI


Im developing an app and testing on iOS, Windows and Android. Windows is fine, Android too, but the iOS simulator is throwing up some strange behaviour in terms of button sizing? Malformed I suppose?

The buttons are made like this:

<Button
    Grid.Column="0"
    Background="{AppThemeBinding Light={StaticResource CoolBlueLight},
                                 Dark={StaticResource CoolBlueMid}}"
    Command="{Binding PreviousTreeCommand}"
    CornerRadius="5"
    FontSize="Medium"
    Text="Previous"
    TextColor="{AppThemeBinding Light=Black,
                                Dark=White}" />

<Button
    Grid.Column="1"
    Background="{AppThemeBinding Light={StaticResource ForestLight},
                                 Dark={StaticResource ForestMid}}"
    Command="{Binding NextTreeCommand}"
    CornerRadius="5"
    FontSize="Medium"
    Text="Next"
    TextColor="{AppThemeBinding Light=Black,
                                Dark=White}" />

The buttons appear normally on Android and Windows, but on iOS they are oversized, and mis-shaped. They seem to be taking up the rest of the screen space below and to the right, and arent rounded or styled as they should be. Its happening with all of the general buttons across the application on iOS, but these 2 show the best example.

Here are the buttons on android:

Android Buttons Screenshot

And on windows:

Windows Buttons Screenshot

But on iOS it does something like this:

iOS Buttons Screenshot

Whats going on with the behaviour here? is there anything i need to account for in terms of styling for iOS thats differeing from the other 2 platforms?


Solution

  • Since Border and Button combination was already demonstrated in Liqun Shen-MSFT's answer, I wanted to share details of the BoxView answer. This relies on the fact that everything in the same Grid cell will be "mashed" together:

    <Grid ColumnDefinitions="150,150">
        <!-- Previous -->
        <BoxView Grid.Column="0"
                 CornerRadius="5"
                 Background="{AppThemeBinding Light={StaticResource CoolBlueLight},
                                              Dark={StaticResource CoolBlueMid}}" />
        <Button  Grid.Column="0"
                 BackgroundColor="Transparent"
                 Text="Previous" />
    
        <!-- Next -->
        <BoxView Grid.Column="1"
                 CornerRadius="5"
                 BackgroundColor="{AppThemeBinding Light={StaticResource ForestLight},
                                                   Dark={StaticResource ForestMid}}" />
        <Button  Grid.Column="1"
                 BackgroundColor="Transparent"
                 Text="Next" />
    </Grid>