CODEWITHSUNDEEP
wpfgridviewword-wrap
Chris Ward
Chris Ward

Reputation: 718

Wrapping text within a chain of controls

Here's an image of what I'm trying to achieve within a grid view column:

Screenshot 1

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:

Screenshot 2

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.

Upvotes: 1

Views: 529

Answers (2)

Clemens
Clemens

Reputation: 128061

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.

Upvotes: 2

Rachel
Rachel

Reputation: 132558

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 :)

Upvotes: 2

Related Questions