Forum Libraries, Components, and Plugins

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

FlexLayout not growing on orientation change

In the xaml file, the part commentated with "Header", the Name column grows and shrinks appropriately during orientation changes between Portrait and Landscape orientation.

The part commentated with Data, the Name column does not change appropriately during orientation.

If you start off in Portrait orientation, it looks fine. If you rotate to Landscape, the Data is stuck in Portrait length because the Name column has not grown.

If you start off in Landscape orientation, it looks fine. If you rotate to Portrait, the first row shrinks, but the rest of the Data is stuck in Landscape length because the Name column has not shrunk. If you rotate back to Landscape, the first column is still in stuck in its Portrait length because it has not grown.

Changing to "ItemSizingStrategy="MeasureAllItems"" makes the Data items behave the same, but they are still wrong in that they are stuck in their Portrait orientation length and do not grow and shrink.

The difference between the FlexLayout that works and the one that does not, is that the FlexLayout that does not work in contained in a CollectionView.

So that is going on here, and how do I fix it?

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage.Resources>
    <StyleSheet Source="Styles/styles.css" />
    <StyleSheet Source="Styles/ScoreSheetsListPage.css" />
</ContentPage.Resources>

<StackLayout>   <!-- Note you can't use FlexLayout here as it doesn't measure other FlexLayout it contains-->

    <!-- Header -->

    <FlexLayout Direction="Row"
            AlignItems="Start"
            JustifyContent="Start">
        <Label class="PersonName" Text="{x:Static res:AppRes.NameUC}" />
        <Label class="SquadTitle" Text="{x:Static res:AppRes.SquadNameTitle}"/>
        <Label class="CreatedDateLabel" Text="{x:Static res:AppRes.Date}" />
    </FlexLayout>

    <!-- Data -->

    <CollectionView x:Name="MyCollectionView"
       ItemsSource="{Binding AllItems}"
    SelectionMode="Multiple"
    SelectedItems="{Binding SelectedItems, Mode=TwoWay}" 
    ItemSizingStrategy="MeasureFirstItem"
    >
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <FlexLayout Direction="Row"
            AlignItems="Start"
            JustifyContent="Start">
                <Label class="PersonName" Text="{Binding PersonName}" />
                <Label class="SquadTitle" Text="{Binding SquadTitle}"/>
                <Label class="CreatedDate" Text="{Binding CreatedDate}" />
            </FlexLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>

    <CollectionView.EmptyView>
        <FlexLayout>
            <Label Text="{x:Static res:AppRes.NoScoresheets}"
                Margin="10,25,10,10"
                FontAttributes="Bold"
                FontSize="18"
                TextColor="Red"
                HorizontalOptions="Fill"
                HorizontalTextAlignment="Center" />
        </FlexLayout>
    </CollectionView.EmptyView>
</CollectionView>

</StackLayout>

/*

<

div class="scoreGridCell"> /
/

<

div class="scoreGridLabel"> */

.PersonName
{
flex-basis: 100;
flex-grow: 1;
font-size: 22; /* Medium Font Size */
text-align: Start;
vertical-align: End;
}

.SquadTitle
{
flex-basis: 100;
font-size: 22; /* Medium Font Size */
text-align: Center;
vertical-align: End;
}

.CreatedDate
{
flex-basis: 200;
font-size: 14; /* Small Font Size */
text-align: Start;
vertical-align: bottom;
}

.CreatedDateLabel
{
flex-basis: 200;
font-size: 22; /* Medium Font Size */
text-align: Center;
vertical-align: bottom;
}

Tagged:
Sign In or Register to comment.