I have two text blocks horizontally placed next to each other. I would like it so that text block 1 truncates using TextTrimming="CharacterEllipsis"
, but text block 2 stays as is. The parent component can easily change widths, so it should adapt to this (see "Goals" in diagram below).
I have tried using two columns in a Grid
with:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
HorizontalAlignment="Left"
Text="Text box 1"
TextTrimming="CharacterEllipsis">
</TextBlock>
<TextBlock Grid.Column="1"
HorizontalAlignment="Left"
Text="Text Box 2">
</TextBlock>
But this causes "Result 1" below, where column 0 fills up the space in between - even with both text blocks having HorizontalAlignment="Left"
.
When changing the Width to be Auto
for both, I get result two, where though the two columns are next to each other as desired, the first text block doesn't get truncated - instead clipping the second text box as "Result 2" shows.
I had also attempted using DockPanel
:
<DockPanel Grid.Column="1">
<TextBlock
DockPanel.Dock="Right"
Text="Text box 2"/>
<TextBlock
DockPanel.Dock="Left"
Text="Text box 1"
TextTrimming="CharacterEllipsis"/>
</DockPanel>
Where I tried to give Text box 2 precedence, while keeping it to the Dock.Right
. This resulted in Result 1. Similarly, I tried it without specifying a Dock property on Text box 2, but once again this did not truncate Text box 1, giving me Result 2.
Is there a way to do this in a relatively simple way?
In the markup, the third example is with left alignment, since it is not entirely clear what result should be obtained.
<Window x:Class="SOTopics2025.SO.monadoboi.question79664779.TwoTextBlocksWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SOTopics2025.SO.monadoboi.question79664779"
mc:Ignorable="d"
Title="TwoTextBlocksWindow" Height="150" Width="320">
<StackPanel>
<Border Width="300" HorizontalAlignment="Left"
BorderThickness="1" BorderBrush="Red" Padding="1" Margin="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="1" BorderBrush="Black" Padding="1">
<TextBlock
HorizontalAlignment="Left"
Text="Text box 1 Text box 1"
TextTrimming="CharacterEllipsis">
</TextBlock>
</Border>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<TextBlock
HorizontalAlignment="Left"
Text="Text Box 2 Text Box 2">
</TextBlock>
</Border>
</Grid>
</Border>
<Border Width="200" HorizontalAlignment="Left"
BorderThickness="1" BorderBrush="Red" Padding="1" Margin="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="1" BorderBrush="Black" Padding="1">
<TextBlock
HorizontalAlignment="Left"
Text="Text box 1 Text box 1"
TextTrimming="CharacterEllipsis">
</TextBlock>
</Border>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<TextBlock
HorizontalAlignment="Left"
Text="Text Box 2 Text Box 2">
</TextBlock>
</Border>
</Grid>
</Border>
<Border Width="300" HorizontalAlignment="Left"
BorderThickness="1" BorderBrush="Red" Padding="1" Margin="5">
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="1" BorderBrush="Black" Padding="1">
<TextBlock
HorizontalAlignment="Left"
Text="Text box 1 Text box 1"
TextTrimming="CharacterEllipsis">
</TextBlock>
</Border>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<TextBlock
HorizontalAlignment="Left"
Text="Text Box 2 Text Box 2">
</TextBlock>
</Border>
</Grid>
</Border>
</StackPanel>
</Window>