Wrapping text within a chain of controls - wpf

Question

Here's an image of what I'm trying to achieve within a grid view column:
The text is wrapping as expected and the closing double-quote image is displayed correctly. But if I reduce the column width fractionally I get this:
Notice how the closing double-quote image is being clipped.
The essence of the XAML I'm using is shown below, although it is merely the latest variant in a set of equally inadequate attempts.
<DockPanel LastChildFill="False" MinWidth="50">
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
MinWidth="16"
DockPanel.Dock="Left" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
VerticalAlignment="Center"
DockPanel.Dock="Left" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
MinWidth="16"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
DockPanel.Dock="Left" />
</DockPanel>
So the question is this: how can I ensure that both (a) the text block wraps in accordance with column width changes, and (b) the closing double-quote symbol is never clipped?
UPDATE
There's one key thing I should have included: the closing double-quote should be flush with the right-hand edge of the TextBlock. It is not acceptable to have the quote image permanently aligned with the right edge of the column.

Answer 1

You could replace the DockPanel with a Grid with 3 columns in a StackPanel:
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
Grid.Column="0" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
Grid.Column="1" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
VerticalAlignment="Bottom"
Grid.Column="2" />
</Grid>
The Width="Auto" setting ensures that the first and third column have the width of the contained element, the middle column would get the rest of the total width.

Answer 2

Reverse the order that you are adding items to your DockPanel so that the last item added is your TextBlock. Then remove the LastChildFill property, and set DockPanel.Dock of your closing quote to Right
<StackPanel>
<DockPanel MinWidth="50">
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
MinWidth="16"
DockPanel.Dock="Left" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
MinWidth="16"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
DockPanel.Dock="Right" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
VerticalAlignment="Center"
DockPanel.Dock="Left" />
</DockPanel>
</StackPanel>
This will make it so the quotes are positioned first, then your Text will take up all remaining space
You could also use a Grid like Clemens' suggested, although I presonally prefer to use a DockPanel because I hate writing column definitions :)