user979331
user979331

Reputation: 11961

Xamarin Forms Center items in listview vertically

I have ListView here and I can't get the items to center vertically:

<ListView x:Name="TasksList" ItemSelected="TasksList_ItemSelected">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" Text="{Binding name}" Padding="20, 0, 0, 0"></Label>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding status}" HorizontalTextAlignment="End" Padding="0,0,20,0" TextColor="{Binding statusColor}"></Label>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

I have tried adding a StackLayout around my labels and played with VericalOptions and VerticalTextOptions, but nothing seems to work

Upvotes: 0

Views: 196

Answers (1)

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13939

Just add the following code for your Grid in your ListView:

 VerticalOptions="Center"

Please refer to the following code:

    <ListView  x:Name="lstView" RowHeight="60">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid VerticalOptions="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" Text="{Binding name}" Padding="20, 0, 0, 0"></Label>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding status}" HorizontalTextAlignment="End" Padding="0,0,20,0" ></Label>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

I created a demo according to your code, the result is: enter image description here

Upvotes: 1

Related Questions