Thursday, 1 November 2018

Grid background in Expandable ViewCell does not fully cover ViewCell on iOS

I am trying to create an expandable ListView, but I have a problem with the background color on iOS, as this will not fit the ViewCell.
It is working correctly on Android and UWP.

I have tried some different approaches.

The first approach is this

<Grid BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" Margin="5" VerticalOptions="FillAndExpand">
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Label Grid.Column="0" Grid.Row="0" Text="DEL" />
   <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" Orientation="Vertical" VerticalOptions="Start">
      <Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start">
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <StackLayout Grid.Column="0" Grid.Row="0" Orientation="Vertical" VerticalOptions="Start">
            <Label LineBreakMode="TailTruncation" Text="{Binding Description}" />
            <Label Text="{Binding ProjectReference}" />
            <Label Text="{Binding CustomerName}" />
         </StackLayout>
         <Label Grid.Column="1" Grid.Row="0" Text="{Binding Amount}" />
         <Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" IsVisible="{Binding IsMoreInfoAvailable}">
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*" />
               <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.GestureRecognizers>
               <TapGestureRecognizer Command="{Binding ChangeMoreInfoCommand}" />
            </Grid.GestureRecognizers>
            <Label Grid.Column="0" Text="More info" />
            <Label Grid.Column="1" Text="{Binding MoreInfoIcon}" />
         </Grid>
      </Grid>
      <StackLayout IsVisible="{Binding ShowMoreInfo}" VerticalOptions="Start">
         <Label Text="{Binding Address}" />
      </StackLayout>
   </StackLayout>
</Grid>

And another approach is this

<Grid BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" Margin="5" VerticalOptions="FillAndExpand">
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <Label Grid.Column="0" Grid.Row="0" Text="DEL" />
   <Grid Grid.Column="1" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <StackLayout Grid.Column="0" Grid.Row="0" Orientation="Vertical" VerticalOptions="Start">
         <Label LineBreakMode="TailTruncation" Text="{Binding Description}" />
         <Label Text="{Binding ProjectReference}" />
         <Label Text="{Binding CustomerName}" />
      </StackLayout>
      <Label Grid.Column="1" Grid.Row="0" Text="{Binding Amount}" />
      <Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" IsVisible="{Binding IsMoreInfoAvailable}">
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
         <Grid.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding ChangeMoreInfoCommand}" />
         </Grid.GestureRecognizers>
         <Label Grid.Column="0" Text="More info" />
         <Label Grid.Column="1" Text="{Binding MoreInfoIcon}" />
      </Grid>
   </Grid>
   <StackLayout Grid.Column="1" Grid.Row="1" IsVisible="{Binding ShowMoreInfo}" VerticalOptions="Start">
      <Label Text="{Binding Address}" />
   </StackLayout>
 </Grid>

And both approaches work on UWP and Android but neither of them work on iOS

The command consist of

ShowMoreInfo = !ShowMoreInfo;
MoreInfoIcon = ShowMoreInfo ? "-" : "+";
UpdateLayout?.Invoke();

Where the UpdateLayout action is only set on iOS and is set to ForceUpdateSize

The source code can be found on WeTransfer



from Grid background in Expandable ViewCell does not fully cover ViewCell on iOS

No comments:

Post a Comment