CODEWITHSUNDEEP
xamlxamarin.forms
trecchino
trecchino

Reputation: 35

Replace a FlexLayout with a StackLayout

I have a Grid with two rows in Auto within a CollectionView. In one I have a FlexLayout, in the other a Label. For some strange problem, with these two controls the Label is not displayed and the only way I have found so far is to replace the FlexLayout with a StackLayout.

 <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}"/>

Result

Is there any way to turn this FlexLayout into a StackLayout and be able to visualize in the same way?

Upvotes: 0

Views: 316

Answers (1)

Shaw
Shaw

Reputation: 929

Use * instead of Auto for your FlexLayout row.

    <Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
        <Grid.RowDefinitions>
            <RowDefinition Height="27" />
            <RowDefinition Height="27" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <!-- elements -->
    </Grid>

Upvotes: 1

Related Questions