换行时更改 img 边距答案

【问题标题】：Change img margin when text is wrapped换行时更改 img 边距
【发布时间】：2014-06-05 10:26:48
【问题描述】：

我在堆栈面板中有一个文本块和一个图像，如下所示：

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

所以图像在文本块旁边。如果 textblock 的文本太长，文本将被换行。现在我希望图像也下降一行，因此图像保持在文本块的最后一个单词旁边。

我的想法是使用 if 语句来做到这一点：

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

但这不起作用，因为文本块的实际高度（显然）在文本被换行时不会改变......

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： c# windows-phone-7 windows-phone-8 margin stackpanel

【解决方案1】：

检查文本长度，如果长度大于您指定的值，则更改边距

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

【讨论】：

我不明白这是如何回答这个问题的。除非它是固定宽度的字体（这不太可能），否则您无法使用文本长度根据字体宽度做出可靠的决定。此外，还有多种屏幕尺寸、方向等需要考虑。

【解决方案2】：

如果您希望图像始终位于最后一行的“底部”，只需将VerticalAlignment 属性设置为Bottom：

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

这将导致图像始终与底部对齐，无论 TextBlock 使用了多少行文本。

此外，应该设置ActualHeight 属性，但根据您尝试读取该值的时间，它可能不可用。

您也可以使用RichTextBox（在电话上实际上是只读的）：

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

这样，您可以直接在内容中嵌入Image。

【讨论】：