TextAlignment of Labels within Grid of SwipeView not applied on Android

Question

In my .NET MAUI App, I use a SwipeView for which the Elements are designed separately to have impact on the FontSize, see Setting FontSize for SwipeItem

Therefore, I used the following code:

XAML

<!-- Just the Background Image and the LinearGradient-->
<Grid Padding="0, 0, 0, -25">

   <views:BackgroundImageView x:Name="BackgroundImage" VerticalOptions="Start"/>

   <Border Style="{StaticResource BorderStyleView}" VerticalOptions="FillAndExpand">

       <Grid RowDefinitions="Auto, *">
           
           <!-- Search... -->
           <SearchBar Grid.Row="0" ios:SearchBar.SearchBarStyle="Minimal" Text="{Binding SearchText}" Placeholder="{loc:Translate ItemsOverview_SearchItemPlaceholder}"/>

           <!-- CollectionView: Margin to get the ScrollBar to the right and closer to the Border -->
           <CollectionView Grid.Row="1" ItemsSource="{Binding GroupedItems, Mode=TwoWay}" Style="{StaticResource CollectionViewStyle}" x:Name="MyCollectionView">

               <!-- Group Header: to group items -->
               <CollectionView.GroupHeaderTemplate>
                   <DataTemplate x:DataType="viewModels:GroupedItemList">
                       <VerticalStackLayout>
                           <Label Text="{Binding GroupName, StringFormat=' {0}'}" Style="{StaticResource GroupHeaderStyle}" />
                           <BoxView Style="{StaticResource GroupHeaderUnderlineStyle}"/>
                       </VerticalStackLayout>
                   </DataTemplate>
               </CollectionView.GroupHeaderTemplate>

               <!-- Group Items -->
               <CollectionView.ItemTemplate>
                   <DataTemplate x:DataType="{x:Type databaseModels:Item}">

                       <!--<controls:CustomSwipeView x:Name="MySwipeView" OpenFlag="{Binding OpenFlag, Source={RelativeSource AncestorType={x:Type views:ItemsOverviewView}}, Mode=TwoWay}">-->
                       <controls:CustomSwipeView x:Name="MySwipeView" OpenFlag="{Binding OpenFlag, Source={RelativeSource AncestorType={x:Type viewModels:ItemsOverviewViewModel}}, Mode=TwoWay}">

                           <!-- Item Name including rectangle with round corners -->
                           <Grid Padding="0, 5">
                               <Frame>
                                   <Label Text="{Binding Name}" FontAttributes="Bold" />
                               </Frame>
                           </Grid>

                           <SwipeView.RightItems>
                               
                               <SwipeItems>
                                   <SwipeItemView>
                                       <Grid RowDefinitions="*" ColumnDefinitions="*, *" WidthRequest="160" ColumnSpacing="0">
                                           
                                           <Label Grid.Column="1" Text="{loc:Translate ItemsOverview_SwipeItemEditItem}" BackgroundColor="LightGrey" Style="{StaticResource SwipeItemStyle}">
                                               <Label.GestureRecognizers>
                                                   <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ItemsOverviewViewModel}}, Path=EditItemCommand}" CommandParameter="{Binding .}"/>
                                               </Label.GestureRecognizers>
                                           </Label>

                                           <Label Grid.Column="0" Text="{loc:Translate ItemsOverview_SwipeItemDeleteItem}" BackgroundColor="{StaticResource DarkOrange1}" TextColor="White" Style="{StaticResource SwipeItemStyle}">
                                               <Label.GestureRecognizers>
                                                   <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ItemsOverviewViewModel}}, Path=DeleteItemCommand}" CommandParameter="{Binding .}"/>
                                               </Label.GestureRecognizers>
                                           </Label>
                                           
                                       </Grid>
                                   </SwipeItemView>
                               </SwipeItems>
                               
                               
                           </SwipeView.RightItems>
                       </controls:CustomSwipeView>

                   </DataTemplate>
               </CollectionView.ItemTemplate>
           </CollectionView>
       </Grid>

   </Border>

</Grid>

Style

<ContentView.Resources>
    <ResourceDictionary>
        <Style x:Key="SwipeItemStyle" TargetType="Label">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontAttributes" Value="Bold"/>
            <Setter Property="HorizontalTextAlignment" Value="Center"/>
            <Setter Property="VerticalTextAlignment" Value="Center"/>
        </Style>
    </ResourceDictionary>
</ContentView.Resources>

When I do this on iOS it looks as it should and the Text of the Labels is centered:

On Android unfortunately, the TextAlignment is not taking effect, obviously:

On iOS I am not sure if this should be Bold, but I don't think so, but this would still be okay for me.

What I can't accept is the TextAlignment on Android. Do you think this is another bug?

A workaround was to nest the Labels in another Grid like this and set the HorizontalOptions/VerticalOptions to Center:

<Grid RowDefinitions="*" ColumnDefinitions="*, *" WidthRequest="160" ColumnSpacing="0">

    <Grid Grid.Column="0" BackgroundColor="LightGrey">
        <Label Text="{loc:Translate ItemsOverview_SwipeItemEditItem}" VerticalOptions="Center" HorizontalOptions="Center">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ItemsOverviewViewModel}}, Path=EditItemCommand}" CommandParameter="{Binding .}"/>
            </Label.GestureRecognizers>
        </Label>
    </Grid>

    <Grid Grid.Column="1" BackgroundColor="{StaticResource DarkOrange1}">
        <Label Text="{loc:Translate ItemsOverview_SwipeItemDeleteItem}" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ItemsOverviewViewModel}}, Path=DeleteItemCommand}" CommandParameter="{Binding .}"/>
            </Label.GestureRecognizers>
        </Label>
    </Grid>

</Grid>

iOS:

Android:

This would work, but my problem here is that the GestureRecognizer is currently just on the Label and I need something for the Grid too since the whole area around the Label now is "Grid".

Is there a better workaround that can handle the situation with just one GestureRecognizer?

Answer 1

Share another workaround, to set a Height for Grid,

<SwipeItemView >
    <Grid HeightRequest="100" RowDefinitions="*" ColumnDefinitions="*, *" ...

Then the Label text will be centered on Android.

By the way, the Bold attribute not render on iOS is related to this issue : The "FontAttributes" property of label is not rendered on ios and maccatalyst..

If you set a default font, <Label Grid.Column="1" FontFamily="" ..., it will be bold.

Hope it helps!

Answer 2

I think, I could find a workaround by using a nested Grid and applying the GestureRecognizer on the Grid. To apply the GestureRecognizer-Effect also on the Label, I used the Option InputTransparent="true" on the Labels:

<Grid RowDefinitions="*" ColumnDefinitions="*, *" WidthRequest="160" ColumnSpacing="0">

    <Grid Grid.Column="0" BackgroundColor="LightGrey">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ItemsOverviewViewModel}}, Path=EditItemCommand}" CommandParameter="{Binding .}"/>
        </Grid.GestureRecognizers>
        <Label Text="{loc:Translate ItemsOverview_SwipeItemEditItem}" Style="{StaticResource SwipeItemStyle}" InputTransparent="True" />
    </Grid>

    <Grid Grid.Column="1" BackgroundColor="{StaticResource DarkOrange1}">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ItemsOverviewViewModel}}, Path=DeleteItemCommand}" CommandParameter="{Binding .}"/>
        </Grid.GestureRecognizers>
        <Label Text="{loc:Translate ItemsOverview_SwipeItemDeleteItem}" TextColor="White" Style="{StaticResource SwipeItemStyle}" InputTransparent="True" />
    </Grid>

</Grid>