Maximum height of item in listview? - xaml

Question

I have this listview in my app that shows a chat. But at a certain point, the messages are getting cut like here:
Listview with cutoff text
The text in the longer boxes is actually more, it just gets cut off.
I wrapped the text element inside a scrollview, so the user can actually scroll inside the message but id prefet it, if the whole text was shown.
It is as if the listview has a maximum row height?
Here is my view:
<ListView
Margin="20,0,20,0"
SeparatorVisibility="None"
IsPullToRefreshEnabled="True"
VerticalScrollBarVisibility="Never"
Refreshing="listview_AllChats_Refreshing"
HasUnevenRows="True"
x:Name="listview_AllChats" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="0,15,0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" >
<Frame
Grid.Column="0"
BackgroundColor="#00000000"
WidthRequest="40"
HeightRequest="40"
CornerRadius="{OnPlatform Android=60, iOS=47}"
IsClippedToBounds="True"
HasShadow="False"
Padding="0"
VerticalOptions="Start"
HorizontalOptions="Start" >
<Image
x:Name="circle_profilepic"
Aspect="AspectFill"
IsVisible="{Binding isMyMessage}"
WidthRequest="500"
HeightRequest="500"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Source="{Binding myUserPicture}">
</Image>
</Frame>
</Grid>
<Grid Grid.Column="1" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Frame BorderColor="#424242" HasShadow="False" CornerRadius="25"/>
<ScrollView VerticalScrollBarVisibility="Never">
<Label
Text="{Binding message}"
FontSize="15"
Margin="25,1,25,0"
VerticalOptions="Center"
HorizontalTextAlignment="Start"
HorizontalOptions="Start"
FontFamily="Font_11"
TextColor="#424242"
/>
</ScrollView>
<!--
<Label
Text="{Binding date}"
FontSize="15"
Grid.Row="1"
VerticalOptions="Center"
HorizontalTextAlignment="Start"
HorizontalOptions="Start"
FontFamily="Font_11"
TextColor="#424242"
/>
-->
</Grid>
</Grid>
<Grid Grid.Column="2" >
<Frame
Grid.Column="0"
BackgroundColor="#00000000"
WidthRequest="40"
HeightRequest="40"
CornerRadius="{OnPlatform Android=60, iOS=47}"
IsClippedToBounds="True"
HasShadow="False"
Padding="0"
VerticalOptions="Start"
HorizontalOptions="End" >
<Image
Aspect="AspectFill"
IsVisible="{Binding isMyPatnersMessage}"
WidthRequest="500"
HeightRequest="500"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Source="{Binding myPartnerUserPicture}">
</Image>
</Frame>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So how can I make it all be shown at once?

Answer 1

From shared code, there are some unintelligible code may occur this phenomenon.
First, you are re-wrapping Grid inside root Grid layout, as follows:
<Grid Margin="0,15,0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" > // here re-use Grid
<Frame Grid.Column="0"
BackgroundColor="#00000000"
WidthRequest="40"
HeightRequest="40"
CornerRadius="{OnPlatform Android=60, iOS=47}"
IsClippedToBounds="True"
HasShadow="False"
Padding="0"
VerticalOptions="Start"
HorizontalOptions="Start" >
...
Second, the HeightRequest and WidthRequest of image is larger then its container view(Frame).
<Grid Grid.Column="2">
<Frame Grid.Column="0"
BackgroundColor="#00000000"
WidthRequest="40"
HeightRequest="40"
CornerRadius="{OnPlatform Android=60, iOS=47}"
IsClippedToBounds="True"
HasShadow="False"
Padding="0"
VerticalOptions="Start"
HorizontalOptions="End">
<Image Aspect="AspectFill"
IsVisible="{Binding isMyPatnersMessage}"
WidthRequest="500" // larger then 40
HeightRequest="500" // larger then 40
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Source="{Binding myPartnerUserPicture}">
</Image>
</Frame>
Therefore, modify xaml code as follows to check:
<Grid Margin="0,15,0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0"
BackgroundColor="#00000000"
WidthRequest="40"
HeightRequest="40"
CornerRadius="{OnPlatform Android=60, iOS=47}"
IsClippedToBounds="True"
HasShadow="False"
Padding="0"
VerticalOptions="Start"
HorizontalOptions="Start">
<Image x:Name="circle_profilepic"
Aspect="AspectFill"
WidthRequest="40"
HeightRequest="40"
IsVisible="{Binding isMyMessage}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Source="{Binding myUserPicture}">
</Image>
</Frame>
<Frame Grid.Column="1"
BorderColor="#424242"
HasShadow="False"
CornerRadius="25">
<Label Text="{Binding Address}"
FontSize="15"
Margin="25,1,25,0"
HorizontalTextAlignment="Start"
FontFamily="Font_11"
TextColor="#424242" />
</Frame>
<Frame Grid.Column="2"
BackgroundColor="#00000000"
WidthRequest="40"
HeightRequest="40"
CornerRadius="{OnPlatform Android=60, iOS=47}"
IsClippedToBounds="True"
HasShadow="False"
Padding="0"
VerticalOptions="Start"
HorizontalOptions="End">
<Image Aspect="AspectFill"
WidthRequest="40"
HeightRequest="40"
IsVisible="{Binding isMyPatnersMessage}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Source="{Binding myPartnerUserPicture}">
</Image>
</Frame>
</Grid>
Here is the effect: