WPF StackPanel with one Textbox trimming

Question

I have a grid with a text bar on top. This text bar shall show an error text and a "Close" link behind it. As soon as there is enough space, the "Close" text shall follow the error text immediately (upper image). If the grid's width decreases, the error text shall be trimmed, so that the "Close" text is still visible (lower image).

I tried all kinds of things: StackPanels, Grids, DockPanels, Width, MaxWidth,... and it's easy to have the "Close" text at the right edge of the grid, but I didn't succeed with just this requirement.

Here is an example of what I tried:

<DockPanel
    <TextBlock
        DockPanel.Dock="Left"
        FontWeight="Bold"
        Text="{Binding ErrorText}"
        TextTrimming="CharacterEllipsis">
    </TextBlock>
    <TextBlock>
        <Hyperlink Command="{Binding CloseCmd}">Close</Hyperlink>
    </TextBlock>
</DockPanel>

The last element is supposed to fill the remaining space, but the upper textbox does not leave any space left for the "Close" element.

Answer 1

This should give you what you are after:

        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock
                FontWeight="Bold"
                Text="This is some text that shall be trimmed if there is not enough room"
                TextTrimming="CharacterEllipsis" />
            <TextBlock Grid.Column="1">
                <Hyperlink>Close</Hyperlink>
            </TextBlock>
        </Grid>

Answer 2

A colleague has given me a good solution:

<WrapPanel>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>                
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis" Margin="5" Text="{Binding ErrorText}" />
    <TextBlock Grid.Column="1" Margin="5" Text="Close" Foreground="Blue" />            
</Grid>

The trick seems to be the WrapPanel, although nothing gets wrapped here. I have no clue why this works, but it does.

Answer 3

Try using a WrapPanel with orientation set to vertical:

    <Grid>
    <WrapPanel Orientation="Vertical">
        <TextBlock TextTrimming="CharacterEllipsis">Some sample text</TextBlock>
        <Button>Close</Button>
    </WrapPanel>
</Grid>

Answer 4

If I understand all requirements correctly, you should first put the close with dock=right like so:

<DockPanel>
    <TextBlock DockPanel.Dock="Right">
        <Hyperlink Command="{Binding CloseCmd}">Close</Hyperlink>
    </TextBlock>
    <TextBlock

        FontWeight="Bold"
        Text="{Binding ErrorText}"
        TextTrimming="CharacterEllipsis">
    </TextBlock>
</DockPanel>