Item Size When Using FlexLayout

Nathan Sokalski 4,121 Reputation points
2021-01-18T21:03:30.097+00:00

I have a FlexLayout that wraps (or doesn't wrap) when the content changes. Here is the XAML for the FlexLayout & ItemTemplate:

<FlexLayout x:Name="flexTrackers" AlignContent="Center" AlignItems="Center" Direction="Row" HorizontalOptions="Center" Margin="0" Padding="0" VerticalOptions="Center" Wrap="Wrap" JustifyContent="Center">  
	<BindableLayout.ItemTemplate>  
		<DataTemplate>  
			<Grid ColumnSpacing="5" Padding="0" Margin="25,0" HorizontalOptions="Center" VerticalOptions="End">  
			  <Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions>  
			  <Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>  
				<Label Grid.ColumnSpan="2" FontFamily="Arial" FontSize="30" HorizontalOptions="Fill" HorizontalTextAlignment="Center" IsVisible="{Binding IsChecked,Source={x:Reference chkMultipleOrNamed}}" Text="{Binding TrackerName}" Margin="0" Padding="0" TextColor="White" VerticalOptions="Fill" VerticalTextAlignment="Center"/>  
				<Label Grid.Row="1" Grid.RowSpan="2" FontFamily="Arial Bold" FontSize="90" HorizontalOptions="Fill" HorizontalTextAlignment="End" Text="{Binding Value}" LineBreakMode="NoWrap" Margin="0" Padding="0" TextColor="White" VerticalOptions="Fill" VerticalTextAlignment="Center"/>  
				<Button Grid.Column="1" Grid.Row="1" Style="{StaticResource UpDownButtonStyle}" IsVisible="{Binding IsChecked,Source={x:Reference radDecrementOnly},Converter={StaticResource InvertedBool}}" IsEnabled="{Binding Value,Converter={StaticResource IncDecButtonEnabled},ConverterParameter=Increment}" Text="▲" Clicked="btnIncrementDecrement_Clicked"/>  
				<Label Grid.Column="1" Grid.Row="1" Style="{StaticResource IncrementLabelStyle}" IsVisible="{Binding Converter={StaticResource IncDecLabelVisible}}" Text="{Binding Text,Source={x:Reference txtIncDecValue},Converter={StaticResource StringFormat},ConverterParameter='+{0}'}" VerticalTextAlignment="End"/>  
				<Button Grid.Column="1" Grid.Row="2" Style="{StaticResource UpDownButtonStyle}" IsVisible="{Binding IsChecked,Source={x:Reference radIncrementOnly},Converter={StaticResource InvertedBool}}" IsEnabled="{Binding Value,Converter={StaticResource IncDecButtonEnabled},ConverterParameter=Decrement}" Text="▼" Clicked="btnIncrementDecrement_Clicked"/>  
				<Label Grid.Column="1" Grid.Row="2" Style="{StaticResource IncrementLabelStyle}" IsVisible="{Binding Converter={StaticResource IncDecLabelVisible}}" Text="{Binding Text,Source={x:Reference txtIncDecValue},Converter={StaticResource StringFormat},ConverterParameter='-{0}'}" VerticalTextAlignment="Start"/>  
			</Grid>  
		</DataTemplate>  
	</BindableLayout.ItemTemplate>  
</FlexLayout>  

Here are screenshots in which the Value property of the Content in ItemsSource for the first & second items have a value of 0 & 0, 9 & 10, and 10 & 10:
57882-screenshot-2021-01-18-154505.png

57853-screenshot-2021-01-18-154727.png

57824-screenshot-2021-01-18-154806.png
Notice that when the values are 10 & 10, instead of wrapping to the next line, FlexLayout modifies the Label used to display the value. I'm not quite sure what to do here, all I really need is a template-capable layout that can wrap the items to the next line. Any ideas? Thanks.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,301 questions
{count} votes