'Listview in xamarin form not using full space of form
I am working on Xamarin forms cross platform app. I have a form where i need to show data in listview.
Data is displaying but its not using entire space resulting in keeping unwanted space at bottom.
my xaml is as follows
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BMTHomesApp.Views.ImportantAppointments">
<ContentPage.Content>
<StackLayout VerticalOptions="StartAndExpand">
<ListView HasUnevenRows="True" RowHeight="100" HeightRequest="-1" x:Name="ListViewAppointments" VerticalOptions="StartAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="20,0,0,0" ColumnSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--<BoxView Color="#f7f7f7" Grid.Column="0" Grid.RowSpan="2"/>
<BoxView Color="#ffffff" Grid.Column="1" Grid.RowSpan="2"/>-->
<Image Grid.RowSpan="2" Grid.Column="0" x:Name="ImageAppointmentIcon" Source="AppointmentsIcon.png" Aspect="AspectFit"></Image>
<Label TextColor="#00344e" FontAttributes="Bold" Text="{Binding Subject}" Grid.Row="0" Grid.Column="1" VerticalTextAlignment="End"></Label>
<Label TextColor="#0073ae" Text="{Binding StartDate}" Grid.Row="1" Grid.Column="1" VerticalTextAlignment="Start"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ActivityIndicator x:Name="ActLoder" HorizontalOptions="CenterAndExpand" Color="#ffffff" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Solution 1:[1]
Could be the ActivityIndicator after the ListView. They are enclosed inside a StackLayout so will both take up space vertically.
If you want the ActivityIndicator to appear over the top of the ListView, replace the StackLayout with a Grid.
Not sure what the HeightRequest=-1 is there for.
Solution 2:[2]
I would guess that the StackLayout
is causing your layout issue. You are stacking the Listview
ontop of an ActivityIndicator
If you want the ActivityIndicator
to appear in the same space as the Listview
but centered then you can try the following:
<ContentPage.Content>
<Grid>
<ListView HasUnevenRows="True" RowHeight="100" x:Name="ListViewAppointments" VerticalOptions="StartAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="20,0,0,0" ColumnSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--<BoxView Color="#f7f7f7" Grid.Column="0" Grid.RowSpan="2"/>
<BoxView Color="#ffffff" Grid.Column="1" Grid.RowSpan="2"/>-->
<Image Grid.RowSpan="2" Grid.Column="0" x:Name="ImageAppointmentIcon" Source="AppointmentsIcon.png" Aspect="AspectFit"></Image>
<Label TextColor="#00344e" FontAttributes="Bold" Text="{Binding Subject}" Grid.Row="0" Grid.Column="1" VerticalTextAlignment="End"></Label>
<Label TextColor="#0073ae" Text="{Binding StartDate}" Grid.Row="1" Grid.Column="1" VerticalTextAlignment="Start"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ActivityIndicator x:Name="ActLoder" HorizontalOptions="CenterAndExpand" Color="#ffffff" VerticalOptions="CenterAndExpand" />
</Grid>
</ContentPage.Content>
Solution 3:[3]
Why dont you use BindableLayout feature? Since Xamarin Forms 3.5 you can Bind a list in a Stack Layout for example, you have much more control than using ListView like this:
<StackLayout BindableLayout.ItemsSource="{Binding MyListOfObjects}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Description}"></Label>
<Label Text="{Binding Status}" ></Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Steve Chadbourne |
Solution 2 | User1 |
Solution 3 | Diogo |