[iOS] ContentViews and Grids not rendered properly in right-to-left cultures

[dk-mushiyoke]

Description

On iOS when Arabic is defined as one of the CFBundleLocalizations in Info.plist it will force the app into right-to-left layout mode. Under such circumstance, ContentViews (and potentially other views, still triaging atm) do not render past first immediate child view, as in, if I have the following xaml defined, only the border is rendered, the grid and the label are not rendered.

<ContentView>
    <Border StrokeThickness="5" Stroke="Red">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="5" />
        </Border.StrokeShape>
        <Grid BackgroundColor="Blue" HeightRequest="40">
            <Label Text="Control in a ContentView" TextColor="White"/>
        </Grid>
    </Border>
</ContentView>

Steps to Reproduce

Note: the resx files in the repro project does not seem to affect anything and can be omitted

1. Create a new MAUI project
2. Add supported localization in Platforms/iOS/Info.plist in the <dict> section

<key>CFBundleLocalizations</key>
<array>
  <string>en</string>
  <string>ar</string>
</array>

3. Add the following controls in MainPage.xaml inside the <VerticalStackLayout>

<!-- Control in a grid is rendered properly -->
<Grid>
    <Border StrokeThickness="5" Stroke="Red">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="5" />
        </Border.StrokeShape>
        <Grid BackgroundColor="Blue" HeightRequest="40">
            <Label Text="Control in a Grid" TextColor="White"/>
        </Grid>
    </Border>
</Grid>

<!-- Control in a content view, only border is rendered -->
<ContentView>
    <Border StrokeThickness="5" Stroke="Red">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="5" />
        </Border.StrokeShape>
        <Grid BackgroundColor="Blue" HeightRequest="40">
            <Label Text="Control in a ContentView" TextColor="White"/>
        </Grid>
    </Border>
</ContentView>

<!-- Grid in a Grid also not rendering -->
<Grid RowSpacing="0" Margin="0,10" BackgroundColor="Pink">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- #region comment out this inner grid and things will start working again -->
    <Grid Grid.Column="0"
          HeightRequest="50"
          HorizontalOptions="Center"
          VerticalOptions="Center">
    <!-- #endregion -->

        <Button BackgroundColor="Transparent"
                BorderColor="Black"
                BorderWidth="2"
                InputTransparent="True" />
        <Image HorizontalOptions="Center"
               VerticalOptions="Center"
               HeightRequest="30"
               WidthRequest="30"
               Source="dotnet_bot.png"/>
    <!-- #region comment out this inner grid and things will start working again -->
    </Grid>
    <!-- #endregion -->

    <Label Grid.Column="1" Text="Grid in a Grid" />

</Grid>

4. Deploy the app to an iOS device or simulator and change system language (or app language) to Arabic
5. Run the app and observe the 2 newly added controls

Link to public reproduction project repository

https://github.com/dk-mushiyoke/MauiContentViewRtlRepro

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16

Did you find any workaround?

Instead of using ContentView or Grid try Vertical/HorizontalStackLayout
#15095 (comment)

Relevant log output

2023-05-15 17:26:15.790138-0600 MauiArabic[37939:213833] [TableView] Warning once only: UITableView was told to layout its visible cells and other contents without being in the view hierarchy (the table view or one of its superviews has not been added to a window). This may cause bugs by forcing views inside the table view to load and perform layout without accurate information (e.g. table view bounds, trait collection, layout margins, safe area insets, etc), and will also cause unnecessary performance overhead due to extra layout passes. Make a symbolic breakpoint at UITableViewAlertForLayoutOutsideViewHierarchy to catch this in the debugger and see what caused this to occur, so you can avoid this action altogether if possible, or defer it until the table view has been added to a window. Table view: <_UIMoreListTableView: 0x7fa82eb8a800; frame = (0 0; 0 0); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x600001597ba0>; backgroundColor = <UIDynamicSystemColor: 0x600000e90c40; name = tableBackgroundColor
>; layer = <CALayer: 0x600001f4a980>; contentOffset: {0, 0}; contentSize: {0, 0}; adjustedContentInset: {0, 0, 0, 0}; dataSource: <UIMoreListController: 0x7fa84e7f3a50>>

[dk-mushiyoke]

Just did more testing and seems Grid inside another Grid will also cause the inner Grid to not render, I have updated the title and repro project to reflect this discovery

[PureWeen]

Just did more testing and seems Grid inside another Grid will also cause the inner Grid to not render, I have updated the title and repro project to reflect this discovery

One workaround that might work for now (not sure if it will cover all your scenarios) is to set the ContentView to LTR and then bind the FlowDirection of the content to the devices FlowDirection.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:str="clr-namespace:MauiArabic.Resources.Strings"
             x:Class="MauiArabic.MainPage"
             xmlns:local="clr-namespace:Microsoft.Maui.Controls;assembly=Microsoft.Maui.Controls">
...
     <ContentView Background="Green" BackgroundColor="Green" FlowDirection="LeftToRight">
                <Border StrokeThickness="5" Stroke="Red" 
                        FlowDirection="{Binding Source={x:Static local:Device.FlowDirection}}">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5" />
                    </Border.StrokeShape>
                    <Grid BackgroundColor="Blue" HeightRequest="40">
                        <Label Text="Control in a ContentView" TextColor="White"/>
                    </Grid>
                </Border>
     </ContentView>

Once I have a better idea of the root cause I'll see if there's a more complete workaround.

[shmoe01]

Is this issue going to close? Or remain open until further investigation?

[hartez]

Is this issue going to close? Or remain open until further investigation?

We're going to fix it before we close it.

[cruzmar]

Setting the FlowDirection at page level works on elements declared directly on that page. However, elements inside of a ContentView are still not displayed if the FlowDirection is set to RightToLeft.

[dk-mushiyoke]

Thanks for the workaround @PureWeen and @hartez , I was able to get the repro project to show up but issue still persists inside our app, digging into it more it seems that ContentTemplates would still not show contents through ContentPresenter, should we reopen this issue or do you want me to create a new one?

[PureWeen]

Thanks for the workaround @PureWeen and @hartez , I was able to get the repro project to show up but issue still persists inside our app, digging into it more it seems that ContentTemplates would still not show contents through ContentPresenter, should we reopen this issue or do you want me to create a new one?

Unfortunately we haven't found a cross cutting way to apply EZ's fix. I did whip this up which looks like it works with your sample

https://github.com/PureWeen/ShanedlerSamples/blob/main/ShanedlerSamples/Library/Workarounds/CustomRTLHandlerFixes.cs

Related extension method here
https://github.com/PureWeen/ShanedlerSamples/blob/main/ShanedlerSamples/Library/Common/ViewExtensions.iOS.cs#L228

If you want to give that a go that should help our confidence level out with backporting vs not

[dk-mushiyoke]

hey @PureWeen, I was able to test your workaround in our app which works great in about 99% scenarios, some exceptions I have found including ActivityIndicator and SKLottieView from SkiaSharp.Extended.UI, they have the correct position as can be seen by setting a background color, but they are drawn at left hand side, do you think your handler fix would apply to those? Thank you.

Edit: I have updated the repro project to include the activity indicator repro, SKLottieView seems to be working with a custom handler but ActivityIndicator still has the wrong x position when WidthRequest and HeightRequest is set.

[PureWeen]

hey @PureWeen, I was able to test your workaround in our app which works great in about 99% scenarios, some exceptions I have found including ActivityIndicator and SKLottieView from SkiaSharp.Extended.UI, they have the correct position as can be seen by setting a background color, but they are drawn at left hand side, do you think your handler fix would apply to those? Thank you.

Edit: I have updated the repro project to include the activity indicator repro, SKLottieView seems to be working with a custom handler but ActivityIndicator still has the wrong x position when WidthRequest and HeightRequest is set.

#15411