Change img margin when text is wrapped

Question

I have a textblock and an image inside a stackpanel like this:

<StackPanel Height="Auto" Name=stackPanel" Width="Auto" Orientation="Horizontal" >
    <TextBlock Height="Auto" Name="textBlock" Width="Auto" TextWrapping="Wrap" MaxWidth="168" />
    <Image Margin="10,10,0,0" Name="image" />
</StackPanel>

So the image is next to the textblock. If the text of textblock is to long, the text will be wrapped. Now I want the image to drop a row too, so the image stays next to the last word of the textblock.

My idea was to do this with an if-statement:

if (textblockBlock.ActualHeight > 35)
    {
        // change margin
    }

But this doesn't work, as the actual height of the textblock (appearently) doesn't change when the text is wrapped...

Could someone help me out with this?

score 0 · Accepted Answer · answered Apr 21 '14 at 11:07

0

Check for text length, if length is greater than your specified value then change margin

if (textblock.Text.Length>40)
    { 
     //change margin
    }

answered Apr 21 '14 at 11:07

Pradeep Kesharwani

1,480
1
12
21

I don't understand how this answers the question. Unless it's a fixed width font (which is unlikely), you can't make a reliable decision based on font width using the length of text. Further, there are multiple screen sizes, orientation, etc. to consider. – WiredPrairie Apr 21 '14 at 12:06

WiredPrairie · Answer 2 · 2014-04-21T12:17:30.480

If you want the image to always be at the "bottom" of the last row, just set the VerticalAlignment property to Bottom:

   <Image Margin="10,10,0,0" Name="image" VerticalAlignment="Bottom" />

This will cause the Image to always be aligned to the bottom, regardless of how many lines of text are used by the TextBlock.

Also, the ActualHeight property should be set, but depending on when you've attempted to read the value, it may not be available.

You could also use a RichTextBox (which on the Phone is actually read-only):

<RichTextBox MaxWidth="168" IsReadOnly="True">
    <Paragraph>
        <Run Text="This is the text from a question on Stack Overflow."/>
        <InlineUIContainer>
            <Image Source="Assets/circle.png" Width="20" Height="20" />                        
        </InlineUIContainer>
    </Paragraph>
 </RichTextBox>

With that, you can embed an Image directly in the content.

Change img margin when text is wrapped

2 Answers2