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:
And on windows:
But on iOS it does something like this:
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?
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>