question

StefanoM-9408 avatar image
0 Votes"
StefanoM-9408 asked JarvanZhang-MSFT commented

Row on Auto does not fit content

In the DataTemplate of a collectionView I have inserted a Grid with a Row in 'Auto'. Inside I have inserted a FlexLayout in which there are some elements, but the Row does not fit the content and some elements are not displayed. To solve the only way at the moment is to set an absolute value but that's not what I want


  <DataTemplate>
                         <yummy:PancakeView  CornerRadius="15">
                             <yummy:PancakeView.Shadow>
                                 <yummy:DropShadow Color="LightBlue" Offset="10,10"/>
                             </yummy:PancakeView.Shadow>
                             <Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
                                     <Grid.RowDefinitions>
                                         <RowDefinition Height="27"/>
                                         <RowDefinition Height="27"/>
                                         <RowDefinition Height="Auto"/>
                                         <RowDefinition Height="Auto"/>
                                     </Grid.RowDefinitions>
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="65"/>
                                         <ColumnDefinition Width="*"/>
                                     <ColumnDefinition Width="32"/>
                                 </Grid.ColumnDefinitions>
                                        
                                     <Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Margin="4,4,4,7" Source="{Binding Umore}" VerticalOptions="Center"/>
                                     <Label Grid.Row="0" FontFamily="FontM" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center" />
                                     <Label Grid.Row="1" FontFamily="FontM" Grid.Column="1" Text="{Binding Orario}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center"/>
                                     <ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="LightGray" HeightRequest="10" Progress="1" VerticalOptions="End"/>
                                     <ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="{Binding ColoreUmore}" HeightRequest="10" Progress="{Binding ProgValore}"  VerticalOptions="End"/>
                                     <FlexLayout
                                         Grid.Row="2"
                                         Margin="0,5,10,0"
                                         Grid.Column="1"     
                                         BindableLayout.ItemsSource="{Binding IconDiaries}" 
                                         Wrap="Wrap" 
                                         JustifyContent="Start" 
                                         Direction="Row" 
                                         AlignItems="Start" 
                                         AlignContent="Start">
                                         <BindableLayout.ItemTemplate>
                                             <DataTemplate>
                                                 <Grid Padding="0,2,3,0">
                                                     <Grid.RowDefinitions>
                                                         <RowDefinition Height="18"/>
                                                     </Grid.RowDefinitions>
                                                     <Grid.ColumnDefinitions>
                                                         <ColumnDefinition Width="18"/>
                                                         <ColumnDefinition Width="Auto"/>
                                                     </Grid.ColumnDefinitions>
                                                     <controls:TintedImage Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="2" TintColor="{Binding ColoreUmore}"/>
                                                     <Label Grid.Row="0" Grid.Column="1" FontFamily="FontM" Text="{Binding id}" TextColor="{DynamicResource TextColor}" Opacity="0.9" FontSize="13" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
                                                 </Grid>
                                             </DataTemplate>
                                         </BindableLayout.ItemTemplate>
                                     </FlexLayout>
                                     <Label Grid.Row="3" Grid.Column="1" FontFamily="FontM" TextColor="{DynamicResource TextColor}"  FontSize="16" Text="{Binding Nota}"/>

Example





dotnet-xamarin
activity.jpg (43.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

Hi, StefanoM-9408. I tested the code in a basic example and ran into the same problem as you described. If I delete the RelativeLayout, the code will work normally. Try to test it in your project. Which style of layout do you want to achieve with RelativeLayout ?

Best Regards,

Jarvan Zhang



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I have updated the code. I removed the RelativeLayout, now the FlexLayout inside it works correctly, but I have a label on a subsequent Row always set to Auto, but I can't see it if I don't set an absolute value. Same exact problem as before

0 Votes 0 ·

Hi, the label is also not shown in my sample. If I replace the FlexLayout with StackLayout, it'll work fine. This may be a potential issue and you could report this problem to the product team on github.


0 Votes 0 ·