[WPF] TextBlock in Border shrink below text size

[NickThissen]

Hi,

I am building a 'DataGrid' from scratch. The main element is a Grid with 4 columns and 3 rows. These 4 columns also represent the 4 columns of the 'DataGrid' (there will always be 4 columns, and the user cannot resize them. This is not a generic grid, it only fits this one project with the data I have). The 3 rows contain:
1. A row of 4 column headers (Borders with TextBlocks inside)
2. A row of 4 ComboBoxes (to filter the data rows)
3. A ListBox (spans all 4 columns) to show the data rows.

The ListBox has an ItemTemplate with another Grid with the same 4 columns (so that the headers, comboboxes and data columns are the same width), each of which contains a Border with a TextBlock to hold a specific part of the data.

The XAML is this:

<UserControl x:Class="PaperManager.Controls.PapersGrid"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="422" d:DesignWidth="642">
    
    <UserControl.Resources>
        <Style TargetType="ComboBox">
            <Setter Property="Margin" Value="2" />
        </Style>
 
        <Style x:Key="StretchedContainerStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
 
        <Style x:Key="ItemBorderStyle" TargetType="Border">
            <Setter Property="BorderBrush" Value="LightGray" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="1" />
            <Setter Property="Margin" Value="1" />
            <Setter Property="Padding" Value="2" />
        </Style>
 
        <Style x:Key="HeaderBorderStyle" TargetType="Border" BasedOn="{StaticResource ItemBorderStyle}">
            <Setter Property="BorderBrush" Value="#FFFFFF" />
                <Setter Property="BorderThickness" Value="0" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="Margin" Value="-1" />
            <Setter Property="Padding" Value="2" />
            <Setter Property="Height" Value="35" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="AliceBlue" />
                        <GradientStop Offset="0.3" Color="LightBlue" />
                        <GradientStop Offset="0.3" Color="LightBlue" />
                        <GradientStop Offset="1.3" Color="AliceBlue" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
 
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2.5*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" /> 
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
 
        <!-- Headers -->
        <Border Style="{StaticResource HeaderBorderStyle}" Grid.Column="0">
            <TextBlock Text="Authors" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
        <Border Style="{StaticResource HeaderBorderStyle}" Grid.Column="1">
            <TextBlock Text="Title" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <Border Style="{StaticResource HeaderBorderStyle}" Grid.Column="2">
            <TextBlock Text="Journal" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <Border Style="{StaticResource HeaderBorderStyle}" Grid.Column="3">
            <TextBlock Text="Categories" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
 
        <!-- Filter ComboBoxes -->
        <ComboBox Grid.Row="1" Grid.Column="0" IsEditable="True" Text="{Binding Path=SelectedAuthor, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding Path=Authors, UpdateSourceTrigger=PropertyChanged}" IsTextSearchEnabled="False" />
        <ComboBox Grid.Row="1" Grid.Column="1" IsEditable="True" Text="{Binding Path=SelectedTitle, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding Path=Titles, UpdateSourceTrigger=PropertyChanged}" IsTextSearchEnabled="False" />
        <ComboBox Grid.Row="1" Grid.Column="2" IsEditable="True" Text="{Binding Path=SelectedJournal, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding Path=Journals, UpdateSourceTrigger=PropertyChanged}" IsTextSearchEnabled="False" />
        <ComboBox Grid.Row="1" Grid.Column="3" IsEditable="True" Text="{Binding Path=SelectedCategory, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding Path=Categories, UpdateSourceTrigger=PropertyChanged}" IsTextSearchEnabled="False" />
 
        <!-- Grid -->
        <ListBox Grid.Row="2" Grid.ColumnSpan="4" 
            ItemsSource="{Binding Path=Papers, UpdateSourceTrigger=PropertyChanged}" 
            SelectedItem="{Binding Path=SelectedPaper, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
            ItemContainerStyle="{StaticResource StretchedContainerStyle}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="2.5*" />
                            <ColumnDefinition Width="*"  />
                            <ColumnDefinition Width="*"  />
                        </Grid.ColumnDefinitions>
 
                        <Border Grid.Column="0" Style="{StaticResource ItemBorderStyle}">
                            <TextBlock Text="{Binding AllAuthors}" VerticalAlignment="Top" />
                        </Border>
 
                        <Border Grid.Column="1" Style="{StaticResource ItemBorderStyle}">
                            <TextBlock Text="{Binding Title}" VerticalAlignment="Top" FontWeight="Bold" />
                        </Border>
 
                        <Border Grid.Column="2" Style="{StaticResource ItemBorderStyle}">
                            <TextBlock Text="{Binding JournalDetails}" VerticalAlignment="Top" />
                        </Border>
 
                        <Border Grid.Column="3" Style="{StaticResource ItemBorderStyle}">
                            <TextBlock Text="{Binding AllCategories}" VerticalAlignment="Top" />
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

When large enough to accomodate all data, the grid looks like this:



Now, when I make the window smaller, the columns resize accordingly (since they use "*" widths), which is correct. However, once a columns gets smaller than the width of the text it is displaying in its data row, then it seems the data row no longer cares about the star resizing and simply retains a minimum width in order to keep displaying all the text:


This is not what I want!


For now, what I would like to see is that the borders/textblocks in the data rows simply become smaller (the same width as the column headers and comboboxes above) and simply cut off the text.

A slightly better approach would be to get text trimming to work (so that the text is not just cut off but shows some ellipsis, "..." instead).

The best approach would be to wrap the text over multiple lines (usually there will be multiple authors / categories so that the data row is already larger than one line, so that is room wasted at the moment).

I have tried every kind of combination I could think of to get the TextBlocks to wrap (TextWrapping) or trim (TextTrimming), but nothing, the behavior remains as in the second screenshot...


How can I do this? I don't understand why this is happening in the first place. I clearly tell the columns to have widths *, 2.5*, * and *. This is the case in the first row (the second column is 2.5 times as wide as the three others), but certainly not in the second row (otherwise the columns would be equally long...). So for some reason the textblocks are overriding these width settings?

Thanks!