Child rendering behaviour mismatched after upgrading Xamarin.Forms (>4.0) in FlexLayout

HemalathaMarikumar · July 2019

Hi All,

I have a simple sample with the layout structure of FlexLayout which has more number of Grid. Each Grid has two children that are

Grid with Label as a child

Custom View (TouchView) which is inherited from View.

<FlexLayout HorizontalOptions="Start" 
                                VerticalOptions="Center" 
                                Direction="Row" 
                                Wrap="Wrap" 
                                BindableLayout.ItemsSource="{Binding ChildItems}"
                                JustifyContent="Start" 
                                AlignContent="Start" 
                                AlignItems="Start">

            <FlexLayout.BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid BackgroundColor="Aqua">
                            <Label TextColor="Black" Text="{Binding}"/>
                        </Grid>
                        <local:TouchView/>
                    </Grid>
                </DataTemplate>
            </FlexLayout.BindableLayout.ItemTemplate>

        </FlexLayout>

Here TouchView represents like

public class TouchView:View
    {

    }

This FlexLayout wrap its child element correctly up to the Xamarin.Forms version of 3.6.0.539721

But after 4.0.0.425677 , it rendered be like in below

Note : Issue only with Android platform.

@Xamariners please check this and update us with possible solution. Actually it blocks our development cycle. Taking this a high priority and provide a solution ASAP.

I have attached the sample in both lower and higher version of Xamarin.Forms.

Regards,
Hemalatha M.

LeonLu · July 2019

If you want to achieve the result like 3.6.0.539721 in xamarin forms 4.0.0.425677 , you should set a specific value of RowDefinition Height and ColumnDefinition Width, I do not what is your achievement of TouchView, to achieve same result like the 3.6.0.539721, I set the value of ColumnSpacing, let it disappear, but you can adjust it.

Here is running screenshot.

Here is code.

   <FlexLayout HorizontalOptions="Start" 
                            VerticalOptions="Start" 
                            Direction="Row" 
                            Wrap="Wrap" 

                            BindableLayout.ItemsSource="{Binding ChildItems}"

                            JustifyContent="Start" 
                            AlignContent="Start" 
                            AlignItems="Start">

    <BindableLayout.ItemTemplate>
        <DataTemplate  >

                <Grid ColumnSpacing="-62" RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="62" />
                        <ColumnDefinition Width="62" />
                    </Grid.ColumnDefinitions>

                    <Grid BackgroundColor="Aqua" Grid.Column="0" Grid.Row="0">
                        <Label TextColor="Black" Text="{Binding}"/>
                    </Grid>
                    <local:TouchView Grid.Column="0" Grid.Row="1" />
                </Grid>



        </DataTemplate>
    </BindableLayout.ItemTemplate>


</FlexLayout>

LeonLu · July 2019

If you want to achieve the result like 3.6.0.539721 in xamarin forms 4.0.0.425677 , you should set a specific value of RowDefinition Height and ColumnDefinition Width, I do not what is your achievement of TouchView, to achieve same result like the 3.6.0.539721, I set the value of ColumnSpacing, let it disappear, but you can adjust it.

Here is running screenshot.

Here is code.

   <FlexLayout HorizontalOptions="Start" 
                            VerticalOptions="Start" 
                            Direction="Row" 
                            Wrap="Wrap" 

                            BindableLayout.ItemsSource="{Binding ChildItems}"

                            JustifyContent="Start" 
                            AlignContent="Start" 
                            AlignItems="Start">

    <BindableLayout.ItemTemplate>
        <DataTemplate  >

                <Grid ColumnSpacing="-62" RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="62" />
                        <ColumnDefinition Width="62" />
                    </Grid.ColumnDefinitions>

                    <Grid BackgroundColor="Aqua" Grid.Column="0" Grid.Row="0">
                        <Label TextColor="Black" Text="{Binding}"/>
                    </Grid>
                    <local:TouchView Grid.Column="0" Grid.Row="1" />
                </Grid>



        </DataTemplate>
    </BindableLayout.ItemTemplate>


</FlexLayout>

HemalathaMarikumar · July 2019

@LeonLu Thanks for your update. I will check and let you know

LeonLu · July 2019

Ok, waitting for you update, if the reply is helpful, please mark it as answer, it will help other who have similar issue.

LeonLu · July 2019

@HemalathaMarikumar Are there any updates for this issue? If the reply is helpful, please try to mark it as an answer, it will help others who have similar issue.

HemalathaMarikumar · July 2019

@LeonLu Yes. I have checked the provided solution. But in my cases, I have to arrange all children of the main grid in the same column. It really appreciated based on your solution only we have got an idea to find, that issue is because of having the problem with measured width value to the custom view (TouchView). Hence we have fixed the same in our custom control.

Without considered our cases, it will be worked fine. Even though it should consider this as a bug.

https://github.com/xamarin/Xamarin.Forms/issues/6745

Xamarin

Quick Links

Child rendering behaviour mismatched after upgrading Xamarin.Forms (>4.0) in FlexLayout

Best Answer

Answers