Question

I have 2 textblocks inside a wrap panel. One of the textbox is bound to my view model and the other contains a static text “:”. The behaviour what I want is if the first textbox content grows over a specific width, it wraps the text to the next line. This is possible with TextWrapping=wrap. But what I want is while the textblock grows it pushes the next textblock also along with it to the second row.

For example if TextblockOne has text 1111111222222222 and textblock2 has text : then I should be getting something like

111111

222222:

rather than

1111111:

2222222

The following is my code:

<Grid >

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <WrapPanel Orientation="Horizontal" Grid.Column="0">

                <TextBlock Text="11111111111111111111112222222222222222222222222222" TextWrapping="WrapWithOverflow" />       
                <TextBlock Text=":"/>
            </WrapPanel>
</Grid>

Note: I cannot append the : to viewmodel property.Can you please help?

Answer 1

Not sure if this is exactly what you want, but give this a try:

<WrapPanel Orientation="Horizontal" Grid.Column="0">
    <TextBlock  TextWrapping="Wrap">
        <Run Text="11111111111111111111112222222222222222222222222222"/>
        <Run Text=":"/>
    </TextBlock>
</WrapPanel>

This will output:

111111
222222: