C# Center ListView items on Xamarin Form

iAndiiAndi ✭✭Member ✭✭

Hello, I have a ListView with items that include multiple Label in them.
This is the XAML
<ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <StackLayout Orientation="Horizontal" Padding="10,5,5,10"> <Label Text="{Binding Time}" HorizontalOptions="StartAndExpand"></Label> <Label Text="{Binding TeamOne}"></Label> <Label Text="{Binding ScoreTeamOne}" BackgroundColor="Gray" TextColor="White" HorizontalTextAlignment="Center" WidthRequest="25" MinimumWidthRequest="25"></Label> <Label Text="{Binding ScoreTeamTwo}" BackgroundColor="Gray" TextColor="White" HorizontalTextAlignment="Center" WidthRequest="25" MinimumWidthRequest="25"></Label> <Label Text="{Binding TeamTwo}"></Label> <Label Text="{Binding Tip}" HorizontalOptions="EndAndExpand"></Label> </StackLayout> </ViewCell.View> </ViewCell> <!--<TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>--> </DataTemplate> </ListView.ItemTemplate>

As you see they are not centered. What I want to achieve is have the scores centered in the middle and the rest to follow.
Any ideas?

Answers

  • AlessandroCaliaroAlessandroCaliaro ✭✭✭✭✭ ITMember ✭✭✭✭✭
    > @iAndi said:
    > Hello, I have a ListView with items that include multiple Label in them.
    > This is the XAML
    > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <StackLayout Orientation="Horizontal" Padding="10,5,5,10"> <Label Text="{Binding Time}" HorizontalOptions="StartAndExpand"></Label> <Label Text="{Binding TeamOne}"></Label> <Label Text="{Binding ScoreTeamOne}" BackgroundColor="Gray" TextColor="White" HorizontalTextAlignment="Center" WidthRequest="25" MinimumWidthRequest="25"></Label> <Label Text="{Binding ScoreTeamTwo}" BackgroundColor="Gray" TextColor="White" HorizontalTextAlignment="Center" WidthRequest="25" MinimumWidthRequest="25"></Label> <Label Text="{Binding TeamTwo}"></Label> <Label Text="{Binding Tip}" HorizontalOptions="EndAndExpand"></Label> </StackLayout> </ViewCell.View> </ViewCell> <!--<TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>--> </DataTemplate> </ListView.ItemTemplate>
    >
    > (Image)
    >
    >
    > As you see they are not centered. What I want to achieve is have the scores centered in the middle and the rest to follow.
    > Any ideas?

    You could use a grid instead of a StackLayout
  • iAndiiAndi ✭✭ Member ✭✭
    edited August 20

    @AlessandroCaliaro said:

    @iAndi said:
    Hello, I have a ListView with items that include multiple Label in them.
    This is the XAML
    <ListView.ItemTemplate> <ViewCell.View> </ViewCell.View> </ListView.ItemTemplate>

    (Image)

    As you see they are not centered. What I want to achieve is have the scores centered in the middle and the rest to follow.
    Any ideas?

    You could use a grid instead of a StackLayout

    Grid will stuck items one upon the other? Even after adding padding. It requires colums i guess?

  • AlessandroCaliaroAlessandroCaliaro ✭✭✭✭✭ ITMember ✭✭✭✭✭
    Create a grid with 1 row and 6 columns and put each control inside a single cell and take a look how it works, probably you have o set horizontal layout
  • JohnHardmanJohnHardman mod GBUniversity mod

    @iAndi said:
    Grid will stuck items one upon the other? Even after adding padding. It requires colums i guess?

    As @AlessandroCaliaro said above, you'll need multiple columns. When you specify the ColumnDefinition Width, do not use Auto sizing. You will want to either specify Absolute or Proportional values for the Widths. See https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid#rows-and-columns

Sign In or Register to comment.