Reputation: 3
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>
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
Reputation: 31
I was able to reproduce the error assuming you have your list inside a Grid with a columnDefinition Auto:
Without modifying your xaml, all I did was assign the column definition to * and it looks like this:
I'm guessing your problem is somehow related to the ListView container and not the itemTemplate
Upvotes: 0