当文本换行时更改img边距

本文关键字：img 边距 文本 换行 | 更新日期: 2023-09-27 17:59:21

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

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

所以图像就在文本块旁边。如果文本块的文本太长，则文本将被换行。现在我想让图像也掉一行，这样图像就可以放在文本块的最后一个单词旁边。

我的想法是用if语句来做这件事：

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

但这不起作用，因为当文本被包装时，文本块的实际高度（看起来）不会改变。。。

有人能帮我一下吗？

当文本换行时更改img边距

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

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

如果希望图像始终位于最后一行的"底部"，只需将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。

相关文章：