wpf

Two text blocks next to each other, and only truncate the first one


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). enter image description here

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.
enter image description here

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?


Solution

  • 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>
    

    enter image description here