CODEWITHSUNDEEP
c#xamllistviewxamarin.forms
user4481538
user4481538

Reputation:

How to make ListView height dynamic?

I have a ListView and underneath is a StackLayout. I'm trying to make the ListView height grow as more rows are added to it (using a command in the StackLayout) with just the use of XAML. What's happening is the ListView is height is too big and the page ends up scrollable with the StackLayout all the way down

Here's my code:

<StackLayout Orientation="Vertical">
     <BoxView HorizontalOptions="FillAndExpand" HeightRequest="10" Color="Transparent/>
     <StackLayout>
          <Label Style="{StaticResource AXASOL_Label_H1}" TextColor="White" Text="Do you have Dependents?" HorizontalOptions="Center"/>
     </StackLayout>
     <ListView>
          <ListView.ItemTemplate>
              <DataTemplate>
                   <ViewCell>
                   </ViewCell>
              </DataTemplate>
           </ListView.ItemTemplate>
     </ListView>
     <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
     </StackLayout>
 </StackLayout>

Upvotes: 0

Views: 4675

Answers (1)

user3292642
user3292642

Reputation: 761

I would suggest to use a Grid instead of a StackLayout. Make sure the Row containing the ListView has it's Height="*" set.

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Content="Do you have Dependents?" />

     <ListView Grid.Row="1" ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Button Grid.Row="2" Content="Click" Click="ButtonBase_OnClick"></Button>
</Grid>

codebehind:

public partial class MainWindow : Window
{
  public MainWindow()
  {
    InitializeComponent();
    DataContext = this;
    Items = new ObservableCollection<Item>();
    Items.Add(new Item("bla"));
    Items.Add(new Item("blub"));
    Items.Add(new Item("blubber"));
 }

  public ObservableCollection<Item> Items { get; set; }

  private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
  {
    Items.Add(new Item("test"));
  }
}

public class Item
{
  public Item(string name)
  {
    Name = name;
  }
  public string Name { get; set; }
}

This will make all Rows with Height="Auto" take as much space as their content needs and the Row containing the ListView will fill up all the remaining space.

Upvotes: 1

Related Questions