在水平堆栈面板或环绕面板中很好地包裹文本？答案

【问题标题】：Wrap text nicely in horizontal stackpanel or wrappanel?在水平堆栈面板或环绕面板中很好地包裹文本？
【发布时间】：2014-02-05 01:45:43
【问题描述】：

我看过其他一些关于此的帖子，但没有看到任何可以解决我的问题的帖子。基本上，我需要在Stackpanel 或Wrappanel 中很好地包含一些文本（粗体和非粗体）。这是一个视觉效果：

我需要你看到的两个TextBlocks 的组合。我有第一个粗体TextBlock，其中包含“标题：”，然后在同一行我需要下一个TextBlock，它可能会或可能不会换行。如果它确实换行，我需要顶行保持在顶行然后换行，就好像它都是一个TextBlock。这是我所需要的现成的视觉效果：

这是我目前得到的代码：

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here " />
</toolkit:WrapPanel>

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</toolkit:WrapPanel>

现在，我不反对在 one TextBlock 中执行此操作（如果可能的话）。我知道使用TextBlock.Inlines 我可以添加一个粗体文本Run，然后添加另一个常规文本。问题在于 Inlines cannot be bound 使用 MVVM（我没有在本演示中使用，但将在最终代码中使用）。

所以无论解决方案是什么，我都需要能够从代码隐藏中设置TextBlocks 的值，以便我知道它可以使用 MVVM 来完成。

有谁知道实现这一目标的方法吗？

【问题讨论】：

那么，您想绑定到单个文本源并且其中一些文本可能是粗体？
可能，是的。我需要标题是粗体的，其余的不需要。如果更容易，标题可以在单独的文本块中。
我建议尽可能使用Run。

标签： xaml windows-phone-8 stackpanel word-wrap wrappanel

【解决方案1】：

使用RichTextBox 控件对每种字体样式进行不同的运行。

<RichTextBox>
    <Paragraph>
        <Run FontWeight="Bold">Title:</Run>
        <Run>More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :(</Run>
    </Paragraph>
</RichTextBox>

您可以将 Run 元素的 Text 属性绑定到您的数据上下文，例如：

    <RichTextBox>
        <Paragraph>
            <Run FontWeight="Bold"
                 Text="{Binding Header}"></Run>
            <Run Text="{Binding Text}"></Run>
        </Paragraph>
    </RichTextBox>

【讨论】：

这非常有效。早些时候我想到 Silverlight 的 RichTextBox 是一个用户可以输入的实际文本框，我一度认为这不起作用。我不知道Windows Phone RichTextBox 更像TextBlock 而不是TextBox。再次感谢！

【解决方案2】：

修复 StackPanel 的 Width 属性。这可能会对您有所帮助。问题是如果您不设置 Width 属性，它会被视为自动宽度。

<StackPanel Orientation="Horizontal" Width="400">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here " />
</StackPanel >

<StackPanel  Orientation="Horizontal" Width="400">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</StackPanel >

【讨论】：

谢谢。我相信我尝试过这样的事情，将StackPanel 的Width 绑定到它的父级的ActualWidth。如果我没记错的话，它几乎起作用了，但是当文本换行时，第二个 TextBlock 的文本不会直接位于第一个文本的下方。不过我今晚会再试一次。谢谢！

【解决方案3】：

这对你有帮助：

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock>       
       <Run FontWeight="Bold" Text="{Binding Header}"></Run>     
        <Run Text="{Binding Text}"></Run>    
    </TextBlock>
</toolkit:WrapPanel>

【讨论】：

你测试过这个吗？ AFAIK，Runs 必须在 <TextBlock.Inlines>（我假设您的意思是 TextBlock 而不是 TextBox）容器内，正如我在帖子中提到的，TextBlock 的 Inlines 不能与 MVVM 绑定.

【解决方案4】：

你试过用这样的结构吗？

<TextBlock>
    <TextBlock.Inlines>
        <Bold>
            <Bold.Inlines>
                <Run Text="Title: "/>
            </Bold.Inlines>
        </Bold>
        <Run Text="{Binding Text}"/>
    </TextBlock.Inlines>
</TextBlock>

如果 text-block 应该只绑定到一个文本块，它就像一个魅力。

【讨论】：