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

发布于 2024-12-04 07:15:56 字数 1022 浏览 0 评论 0原文

我有一个 wpf 窗口,其中有一个堆栈面板,其中有两个视口 - 每个视口中都有一个文本块。

<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% - 无论字体有多大。

i have a wpf window where i have a stackpanel with two viewports in it - each Viewport with a textblock in it.

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

What i would like to achieve is that the top textblock is the heading with a bigger text. The second textblock is the sub heading with a smaller text. No matter how much text there is for either the heading or the subheading the font should dynamic become smaller/bigger. My problem is that i would like the subheading to be fixed width. This means that, the font should be a percentage (70%) of the heading and wrap to multiple lines, depending on how much text i have. I enclosed the code I have thus far... im missing something with that subheading, cant figure out what. Cheers

Edit
Basically what i want achieve is that the sub header wraps the text so it can expand it downwards with the font being a 70% of the heading - no matter how big that font is.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

吖咩 2024-12-11 07:15:56

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

Nesting a stackpanel will cause the textbox to wrap properly:

<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>
欢你一世 2024-12-11 07:15:56

使用 TextBlock 元素的属性 TextWrapping

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

Use the property TextWrapping of the TextBlock element:

<TextBlock Text="StackOverflow Forum"
           Width="100"
           TextWrapping="WrapWithOverflow"/>
ヅ她的身影、若隐若现 2024-12-11 07:15:56

使用换行符:

<TextBlock>
        <Run Text="Line1"/>
        <LineBreak/>
        <Run Text="Line2" FontStyle="Italic" FontSize="9"/>
        <LineBreak/>
        <Run Text="Line3"/>
    </TextBlock>

请参阅:https://social.msdn.microsoft.com/Forums/vstudio/en-US/51a3ffe4-ec82-404a-9a99-6672f2a6842b/how-to-give-multiline-in-textblock?forum= wpf

谢谢,

RDV

Use Linebreak:

<TextBlock>
        <Run Text="Line1"/>
        <LineBreak/>
        <Run Text="Line2" FontStyle="Italic" FontSize="9"/>
        <LineBreak/>
        <Run Text="Line3"/>
    </TextBlock>

Refer this: https://social.msdn.microsoft.com/Forums/vstudio/en-US/51a3ffe4-ec82-404a-9a99-6672f2a6842b/how-to-give-multiline-in-textblock?forum=wpf

Thanks,

RDV

ま昔日黯然 2024-12-11 07:15:56

这已经完成了。没有 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();
        }
    } 

This gets part way there. There is no ActualFontSize property but there is an ActualHeight and that would relate to the FontSize. Right now this only sizes for the original render. I could not figure out how to register the Converter as resize event. Actually maybe need to register the FontSize as a resize event. Please don't mark me down for an incomplete answer. I could not put code sample in a comment.

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

Converter

    [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();
        }
    } 
温柔戏命师 2024-12-11 07:15:56

如果您只是想让标题字体比其他字体大一点,您可以使用 ScaleTransform。所以你不依赖于真实的字体大小。

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

If you just want to have your header font a little bit bigger then the rest, you can use ScaleTransform. so you do not depend on the real fontsize.

 <TextBlock x:Name="headerText" Text="Lorem ipsum dolor">
                <TextBlock.LayoutTransform>
                    <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                </TextBlock.LayoutTransform>
  </TextBlock>
与酒说心事 2024-12-11 07:15:56

上面的所有答案都不能满足我的需求,我很确定这里的大多数人都会遇到类似的问题。
我想要的是将包含换行符的字符串属性绑定到文本块,并使其显示在多行而不是单行中。
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}"/>

并且看起来像这样:

在此处输入图像描述

文本绑定为:

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

All the answers above did not satisfy my need and I am pretty sure most here will have a similar problem.
What i wanted was to bind a string property which contains linefeeds to a textblock and have it display in multible lines rather than in a single line.
WPF does not seem to have an easy solution for this so i found my own little workaround. I use a textbox with a custom style that will disable its editability and makes it look like a Textblock. Works like a charm with the added benefit that people can now copy the text from your textblock, which atleast in all my application is a win!

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

It can be used like this:

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

and will look like this:

enter image description here

Text bound was:

•Update is from server!
•The camera now actually works
•Images are sharp
•Network is great
•Everybody happy
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文