如何使 WPF 的 TextBlock 在多行显示我的文本?

75

我有一个 WPF 窗口,在其中我有一个包含两个视口的 StackPanel - 每个视口中都有一个 TextBlock。

<Grid>
    <StackPanel VerticalAlignment="Center" Orientation="Vertical" >
        <Viewbox Margin="100,0,100,0">
            <TextBlock x:Name="headerText" 
                       Text="Lorem ipsum dolor" 
                       Foreground="Black"/>
        </Viewbox>
        <Viewbox Margin="150,0,150,0">
            <TextBlock x:Name="subHeaderText" 
                       Text="Lorem ipsum dolor, Lorem ipsum dolor, lorem isum dolor, Lorem ipsum dolor, Lorem ipsum dolor, lorem isum dolor, " 
                       TextWrapping="Wrap" 
                       Foreground="Gray" />
        </Viewbox>
    </StackPanel>
</Grid>
我想要实现的目标是,顶部文本块是带有更大字体的标题。第二个文本块是带有较小字体的子标题。无论标题或子标题的文本量有多少,字体都应该动态变小/变大。我的问题是,我希望子标题是固定宽度的。这意味着,字体应该是标题的百分比(70%),并且根据我拥有的文本量换行成多行。我附上了我目前拥有的代码... 我对子标题缺少一些东西,不知道是什么。谢谢 编辑 基本上我想要实现的是,子标题可以换行文本,因此它可以向下扩展,并且字体是标题的70% - 无论该字体有多大。

动态调整大小的规则/公式是什么?好的,子元素是70%,但如何确定第一个元素的大小?如果您想为第二个TextBlock设置固定宽度,则设置宽度即可。 - paparazzo
这是用于在我不知道屏幕大小/分辨率的环境中使用的。因此,宽度是使用边距设置的,从而使我能够在所有屏幕上表现相同。标题的大小由视口确定,这意味着文本块始终以最大尺寸显示。-再次取决于屏幕分辨率。 - Brian Hvarregaard
6个回答

107

将文本框嵌套在一个 StackPanel 中可以使其正确换行:

<Viewbox Margin="120,0,120,0">
    <StackPanel Orientation="Vertical" Width="400">
        <TextBlock x:Name="subHeaderText" 
                   FontSize="20" 
                   TextWrapping="Wrap" 
                   Foreground="Black"
                   Text="Lorem ipsum dolor, lorem isum dolor,Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet " />
    </StackPanel>
</Viewbox>

6
这解决了你的问题吗?固定宽度和字号似乎与问题描述不一致。 - paparazzo
1
@Blam - 如果您想要文本换行,但不希望在宽度小于最大宽度时出现多余的空间,可以使用MaxWidth。 - Robotnik

52

使用 TextBlock 元素的 TextWrapping 属性:

<TextBlock Text="StackOverflow Forum"
           Width="100"
           TextWrapping="WrapWithOverflow"/>

45

4

这个部分有一定作用。虽然没有ActualFontSize属性,但有一个ActualHeight属性,它与FontSize相关。目前仅为原始渲染大小调整。我无法找出如何将转换器注册为重新调整事件。实际上,可能需要将FontSize注册为重新调整事件。请不要因回答不完整而评价我低。我无法在评论中放置代码示例。

    <Window.Resources>
        <local:WidthConverter x:Key="widthConverter"/>
    </Window.Resources>
    <Grid>
        <Grid>
            <StackPanel VerticalAlignment="Center" Orientation="Vertical" >
                <Viewbox Margin="100,0,100,0">
                    <TextBlock x:Name="headerText" Text="Lorem ipsum dolor" Foreground="Black"/>
                </Viewbox>
                <TextBlock Margin="150,0,150,0" FontSize="{Binding ElementName=headerText, Path=ActualHeight, Converter={StaticResource widthConverter}}" x:Name="subHeaderText" Text="Lorem ipsum dolor, Lorem ipsum dolor, lorem isum dolor, Lorem ipsum dolor, Lorem ipsum dolor, lorem isum dolor, " TextWrapping="Wrap" Foreground="Gray" />
            </StackPanel>
        </Grid>
    </Grid>        

转换器

    [ValueConversion(typeof(double), typeof(double))]
    public class WidthConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            double width = (double)value*.7;
            return width; // columnsCount;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    } 

2

如果你只想让标题字体比其余内容稍微大一些,你可以使用ScaleTransform。这样你就不要依赖于真实的字号大小。

 <TextBlock x:Name="headerText" Text="Lorem ipsum dolor">
                <TextBlock.LayoutTransform>
                    <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                </TextBlock.LayoutTransform>
  </TextBlock>

0
以上所有答案都没有满足我的需求,我相信大多数人在这里也会遇到类似的问题。 我想要的是将包含换行符的字符串属性绑定到文本块上,并使其显示为多行而不是单行。 WPF似乎没有一个简单的解决方案,所以我找到了自己的小技巧。我使用一个带有自定义样式的文本框,它将禁用其可编辑性并使其看起来像一个文本块。在我的所有应用程序中,这个方法非常完美,而且还可以让人们从你的文本块中复制文本,这至少算得上是一种胜利!
<Style  TargetType="{x:Type TextBox}" x:Key="TextBlock">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="IsReadOnly" Value="True"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="VerticalContentAlignment" Value="Left"/>
</Style>

它可以像这样使用:

<TextBox Style="{StaticResource TextBlock}" Text="{Binding UpdateChanglog}"/>

并且会长成这个样子:

enter image description here

文本绑定为:

•Update is from server!
•The camera now actually works
•Images are sharp
•Network is great
•Everybody happy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接