microsoft
Grid clips subsequent items to the height of the first item, renders display useless
Describe the bug
When using a Grid to display data flowing left to right, the content of each cell is arbitrarily clipped, rendering the application useless.
From lots of archeology it appears the height of any given row in the grid is controlled by the height of the first cell in the grid. This cell's height bears zero relation to any other cell's height, and so data is arbitrarily clipped.
It appears that the WinUI3 Gallery app cheats by explicitly setting the height on the rows. This may make sense for a static app showing static data, but any real app showing real data fails.
What is needed is for an option for the cells to be made the height of the tallest cell, not the first cell. This will guarantee that all data appears on the screen without clipping.
Steps to reproduce the bug
- Create a grid where the second cell is taller than the first.
- When rendered, the second cell is clipped.
Expected behavior
- Create a grid where the second cell is taller than the first.
- The first cell is fully visible.
- The second cell is fully visible.
Screenshots
Second cell clipped at height of first cell.
First cell given a fake extra fixed height row, revealing clipped data in second cell.
NuGet package version
None
Windows version
Windows 11 (24H2): Build 26100
Additional context
No response
Hi @minfrin , can you please help us by providing the minimal repro project for investigating the issue further?
Hi @minfrin, I tried to repro this using below code: `
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- First cell: short content -->
<Border Grid.Row="0" Background="LightBlue" Padding="10">
<TextBlock Text="ShortThis is a much longer piece of text that should determine the height of the row, but gets clipped because the first cell is shorter." />
</Border>
<!-- Second cell: long content that will get clipped -->
<Border Grid.Row="1" Background="LightCoral" Padding="10">
<TextBlock Text="hello"
TextWrapping="Wrap" />
</Border>
</Grid>
`
But I don't see the issue:
Been a bit swamped, need to create a simple project that shows this.
I do see the long row is in the first cell, which is used to determine the height, in theory it should be like this?
<Border Grid.Row="0" Background="LightBlue" Padding="10">
<TextBlock Text="hello"
TextWrapping="Wrap" />
</Border>
<!-- Second cell: long content that will get clipped -->
<Border Grid.Row="1" Background="LightCoral" Padding="10">
<TextBlock Text="ShortThis is a much longer piece of text that should determine the height of the row, but gets clipped because the first cell is shorter." />
</Border>
I only showed the second cell in the images above, and not the first cell. I should have shown all of it to be clearer.
You also need the text to wrap - a very long line of text that doesn't wrap is the same height as one word. In my example "Installed driver name" and below became invisible, because the second cell had the height of the first, which just happened to chop at that point.
Create a blank WinUI3 project, and drop in the following MainWindow.xaml:
<?xml version="1.0" encoding="utf-8"?>
<Window
x:Class="GridBug.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GridBug"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="GridBug">
<Grid>
<GridView x:Name="ImageGridView">
<!-- the height of the first grid below... -->
<Grid
Width="300"
Margin="8">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--
<Image x:Name="ItemImage1"
Source="Assets/StoreLogo.png"
Stretch="Uniform" />
-->
<StackPanel Orientation="Vertical"
Grid.Row="1">
<TextBlock Text="ImageTitle"
HorizontalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}" />
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<TextBlock Text="ImageFileType"
HorizontalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}" />
<TextBlock Text="ImageDimensions"
HorizontalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="8,0,0,0" />
</StackPanel>
<RatingControl Value="3" IsReadOnly="True"/>
</StackPanel>
</Grid>
<!-- ..is applied to the second grid below... -->
<Grid
Width="300"
Margin="8">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--
<Image x:Name="ItemImage2"
Source="Assets/StoreLogo.png"
Stretch="Uniform" />
-->
<StackPanel Orientation="Vertical"
Grid.Row="1">
<TextBlock Text="ImageTitle"
HorizontalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}" />
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<TextBlock Text="line below this one"
HorizontalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}" />
<TextBlock Text="is chopped off"
HorizontalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="8,0,0,0" />
</StackPanel>
<RatingControl Value="3" IsReadOnly="True"/>
<!-- ...and therefore the text below is invisible -->
<TextBlock Text="Extra text"
HorizontalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}" />
<TextBlock Text="Even more text"
HorizontalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}" />
</StackPanel>
</Grid>
</GridView>
</Grid>
</Window>
The "Extra text" and "Even more text" elements are invisible because of the bug.
Hi @minfrin, The issue appears to be with the GridView, not the Grid. When I replaced GridView with a Grid, the problem no longer occurred.