Search code examples
mauimaui-ios

CollectionView Header ignores left margin on iOS

I have .net maui application with a header:

<CollectionView.Header>
  <VerticalStackLayout Margin="18,0,18,12">
    <Label Style="{StaticResource TextBodySecondary}"
      Text="{Binding TotalExpenses, StringFormat={extensions:Translate TotalExpenseTemplate}, Converter={StaticResource AmountFormatConverter}}"
    />
    <Label Style="{StaticResource TextBodySecondary}"
      Text="{Binding TotalRevenue, StringFormat={extensions:Translate TotalRevenueTemplate}, Converter={StaticResource AmountFormatConverter}}"
    />
  </VerticalStackLayout>
</CollectionView.Header>

On Android and Windows the text has a proper margin. On iOS the margin is ignored.

enter image description here

Funny enough, when I change something hot reload does it actually correct. Is that a known maui issue? And is there a work around?

Solution

  • I can reproduce the issue that the Margin is ignored on iOS. As an alternative workaround, you can wrap your VerticalStackLayout in a ContentView, then the Margin will work as expected.

    You can refer to the sample code below:

    <CollectionView.Header>
      <ContentView>
            <VerticalStackLayout Margin="18,0,18,12">
                <Label Style="{StaticResource TextBodySecondary}"
                       Text="{Binding TotalExpenses, StringFormat={extensions:Translate TotalExpenseTemplate}, Converter={StaticResource AmountFormatConverter}}" />
                <Label Style="{StaticResource TextBodySecondary}"
                       Text="{Binding TotalRevenue, StringFormat={extensions:Translate TotalRevenueTemplate}, Converter={StaticResource AmountFormatConverter}}" />
            </VerticalStackLayout>
     </ContentView>
</CollectionView.Header>