Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin Listview StackLayout space between items

I'm trying to display a listview that contains some items and I just want to give a bit of space between those items.

I google about this but I could not find an answer that worked for me. Here is a solution that I found that has the same result that I wanted but didn't work: https://stackoverflow.com/a/30827419/1845593

I'm using xamarin forms 2.3.2.127 and I'd like to keep with xaml for this.

My xaml Code:

<pages:MainXaml.Content>
<ListView x:Name="AccountsList"
          ItemsSource="{Binding Items}"
          SeparatorVisibility="None"
          BackgroundColor="Gray">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>
          <StackLayout BackgroundColor="White" Margin="0,0,0,20" >
            <Label Text="{Binding Name}"
                 VerticalTextAlignment="Center"
                 LineBreakMode="TailTruncation"
                   />
            <Label Text="{Binding Amount}"
                   VerticalTextAlignment="Center"
                   LineBreakMode="TailTruncation"/>
          </StackLayout>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
</pages:MainXaml.Content>

I tried with spacing, Padding and Marging, none of them worked.

Visual Result/Expected:

enter image description here

Thanks

like image 953
user1845593 Avatar asked Sep 19 '16 16:09

user1845593


1 Answers

I just find out that I need to set HasUnevenRows=True. Then I changed to Grid because I wanted a ">" at the end:

<ListView xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="ConsumerBanking.UserControls.AccountsListView"
          SeparatorVisibility="None"
          BackgroundColor="Transparent"
          HasUnevenRows="True" >

  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>

          <Grid BackgroundColor="White" Margin="0,0,0,1" >
            <Grid.RowDefinitions>
              <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Column="0" Margin="10,5,0,5">
              <Label Text="{Binding Name}"
                     VerticalTextAlignment="Center"
                     LineBreakMode="TailTruncation"/>
              <Label Text="{Binding Amount}"
                     VerticalTextAlignment="Center"
                     LineBreakMode="TailTruncation"
                     FontSize="Large"/>
            </StackLayout>

            <Label Text=">" Grid.Column="1" VerticalTextAlignment="Center" Margin="0,0,20,0"
                   FontSize="Large" TextColor="{StaticResource darkGray}"/>
          </Grid>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
like image 94
user1845593 Avatar answered Oct 16 '22 22:10

user1845593