Prevent wrapping TextBlock from affecting layout

Question

I've run into this issue a few times and have yet to find a simple solution. When a TextBlock (with TextWrapping="Wrap") is embedded inside another element that doesn't specify its width, the TextBlock expands as large as its parent allows instead of first trying to wrap its text. For example, I'm currently working on a TextBlock ValidationTemplate. Here's how the template currently handles text longer than the width of the TextBox:

which is obviously not optimal. Here's how I'd like it to appear:

Here's the XAML for the ControlTemplate that's producing the first layout:

<ControlTemplate>
  <DockPanel LastChildFill="True">
    <Border DockPanel.Dock="Top" BorderBrush="Red" BorderThickness="1">
      <DockPanel>
        <AdornedElementPlaceholder x:Name="TargetTextBox" />
        <Grid x:Name="WarningBoxContainer" Background="Red" Width="{Binding ElementName=TargetTextBox, Path=ActualHeight}" Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}">
            <Path Margin="5" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
        </Grid>
      </DockPanel>
    </Border>
    <Border DockPanel.Dock="Top" Margin="0,2,0,0">
      <TextBlock Text="Something very terrible has happened" TextWrapping="Wrap"/>
    </Border>
  </DockPanel>
</ControlTemplate>

Does anyone know how to make a TextBlock wrap before trying to expand?

Answer 1

Of course, minutes after I post, I find the answer.

I got the idea of using a binding to enforce the width of the TextBlock from this post.

In my case, binding the TextBlock's width to the ActualWidth of the AdornedElementPlaceholder element did it:

<ControlTemplate>
  <DockPanel LastChildFill="True">
    <Border DockPanel.Dock="Top" BorderBrush="Red" BorderThickness="1">
      <DockPanel>
        <AdornedElementPlaceholder x:Name="TargetTextBox" />
        <Grid x:Name="WarningBoxContainer" Background="Red" Width="{Binding ElementName=TargetTextBox, Path=ActualHeight}" Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}">
            <Path Margin="5" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
        </Grid>
      </DockPanel>
    </Border>
    <Border DockPanel.Dock="Top" Margin="0,2,0,0">
      <TextBlock Text="Something very terrible has happened" TextWrapping="Wrap" HorizontalAlignment="Left" Width="{Binding ElementName=TargetTextBox, Path=ActualWidth}" Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}"/>
    </Border>
  </DockPanel>
</ControlTemplate>

The end product: