Jeroen Visser
Jeroen Visser

Reputation: 3

.net MAUI Grid in ListView not spacing columns properly

Im trying to make a list of items where each item has the same amount of columns containing a label. Since the text in each label is of different size I want the columns to be a percentage of the available width so they line up between the different list items. This is where I run into problems. Even tho I set the Grid column width to "*" they are not using the available width. I'm looking for a solution comparable to the WPF SharedSizeGroup.

tldr: ListView in .net MAUI with evenly spaced columns across the list items.

<ListView ItemsSource="{Binding TransactionViewmodels}" Grid.Row="1">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid ColumnSpacing="24" Margin="24">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    
                    <Label Grid.Column="0"                                   
                           Grid.Row="0"
                           FontSize="Medium"
                           Text="{Binding Date}"/>
                        
                    <Label Grid.Column="0"
                           Grid.Row="1"
                           FontSize="Small"
                           Text="{Binding Time}"/>
                        
                    <Label Grid.Column="1"
                           Grid.Row="0"
                           FontSize="Medium"
                           Text="{Binding StockName}"/>
                        
                    <Label Grid.Column="1"
                           Grid.Row="1"
                           FontSize="Small"
                           Text="{Binding Isin}"/>
                        
                    <Label Grid.Column="2"
                           Grid.Row="0"
                           Grid.RowSpan="2"
                           FontSize="Small"
                           VerticalTextAlignment="Center"
                           Text="{Binding Description}"/>
                        
                    <Label Grid.Column="3"
                           Grid.Row="0"
                           Grid.RowSpan="2"
                           FontSize="Medium"
                           VerticalTextAlignment="Center"
                           Text="{Binding Value}"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Image of current result

Edit: Xaml of the full page

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PortfolioOverview.View.Desktop"
             x:Class="PortfolioOverview.View.Desktop.DesktopTransactionsPage"
             Title="DesktopTransactionsPage"
             NavigationPage.HasNavigationBar="False">
    <HorizontalStackLayout>
        <local:DesktopMenuView/>
        <Grid ColumnDefinitions="*" RowDefinitions="auto, *">
            <!--Add transaction UI goes here Grid.Row 0-->
            
            <ListView ItemsSource="{Binding TransactionViewmodels}" Grid.Row="1">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid ColumnSpacing="24" Margin="24">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                
                                <Label Grid.Column="0"                                   
                                       Grid.Row="0"
                                       FontSize="Medium"
                                       Text="{Binding Date}"/>
                                    
                                <Label Grid.Column="0"
                                       Grid.Row="1"
                                       FontSize="Small"
                                       Text="{Binding Time}"/>
                                    
                                <Label Grid.Column="1"
                                       Grid.Row="0"
                                       FontSize="Medium"
                                       Text="{Binding StockName}"/>
                                    
                                <Label Grid.Column="1"
                                       Grid.Row="1"
                                       FontSize="Small"
                                       Text="{Binding Isin}"/>
                                    
                                <Label Grid.Column="2"
                                       Grid.Row="0"
                                       Grid.RowSpan="2"
                                       FontSize="Small"
                                       VerticalTextAlignment="Center"
                                       Text="{Binding Description}"/>
                                    
                                <Label Grid.Column="3"
                                       Grid.Row="0"
                                       Grid.RowSpan="2"
                                       FontSize="Medium"
                                       VerticalTextAlignment="Center"
                                       Text="{Binding Value}"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </HorizontalStackLayout>
</ContentPage>

Upvotes: 0

Views: 344

Answers (1)

Yerik Avalos
Yerik Avalos

Reputation: 31

I was able to reproduce the error assuming you have your list inside a Grid with a columnDefinition Auto:

enter image description here

enter image description here

Without modifying your xaml, all I did was assign the column definition to * and it looks like this:

enter image description here

enter image description here

I'm guessing your problem is somehow related to the ListView container and not the itemTemplate

Upvotes: 0

Related Questions