WPF TextBlock.TextTrimming Not Working With Auto-sized ColumnDefinition

Question

I'm using a WPF Grid as the layout of my window. It has two columns and any number of rows. The first column is used specifically for labels and the second column is used for user-input fields (e.g. TextBox, ComboBox, etc.). My requirements are:

1. The first column must have a minimum width of 50 and maximum width of 180.
2. The first column must size to its contents except when it defies the first requirement.
3. The second column must occupy all the remaining space.

I tried the XAML below:

<Grid>
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" MinWidth="50" MaxWidth="180" />
       <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <TextBlock Text="First Name" TextTrimming="CharacterEllipsis" />
    <TextBox Grid.Column="1" Text="{Binding FirstName}" />

    <TextBlock Grid.Row="1" Text="Family Name" TextTrimming="CharacterEllipsis" />
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding FamilyName}" />

    <TextBlock Grid.Row="2" Text="Label That Won't Fit in 180 units" TextTrimming="CharacterEllipsis" />
    <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Text}" />
</Grid>

I was hoping that the third row label, "Label That Won't Fit in 180 units", will be truncated into something like "Label That Won...". Instead, it just got clipped to "Label That Won't" with half of the "t" missing.

I tried a different approach i found on the web somewhere.

<Grid>
    <Grid.ColumnDefinitions>
       <ColumnDefinition x:Name="LabelColumn" Width="Auto" MinWidth="50" MaxWidth="180" />
       <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <TextBlock Width="{Binding ActualWidth, ElementName=LabelColumn}" Text="First Name" TextTrimming="CharacterEllipsis" />
    <TextBox Grid.Column="1" Text="{Binding FirstName}" />

    <TextBlock Grid.Row="1" Width="{Binding ActualWidth, ElementName=LabelColumn}" Text="Family Name" TextTrimming="CharacterEllipsis" />
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding FamilyName}" />

    <TextBlock Grid.Row="2" Width="{Binding ActualWidth, ElementName=LabelColumn}" Text="Label That Won't Fit in 180 units" TextTrimming="CharacterEllipsis" />
    <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Text}" />
</Grid>

It ended up working on Expression Blend (Sometimes...) but not when running the application. When running, all the labels disappeared completely. I saw through the watch window that all the TextBlocks have an Actual Width of 0 while the LabelColumn.ActualWidth is equal to 80.

What other options are there?

Answer 1

You need to have the MinWidth and MaxWidth set on the TextBlock, as setting MinWidth and MaxWidth on column definitions is not always honored on rendering. Using ActualWidth within binding expressions can be problematic as ActualWidth is set during multiple render passes and can give unpredictable results