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