如何在宽度自动列内 TextWrap 文本块? [英] How to TextWrap a TextBlock within a width Auto Column?

问题描述

考虑如下:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="WrapTextBlock" Grid.Column="0" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
    <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
</Grid>

此 XAML 将允许 WrapTextBlock 文本被换行，这样做，WrapTextBlock 将占用所有空间并将 NotWrapTextBlock 推到右侧.

This XAML will allow WrapTextBlock text to be wrap, doing this, WrapTextBlock will take all the space and push NotWrapTextBlock to the right.

但我想要做的是让 WrapTextBlock 占用尽可能少的空间，在 WrapTextBlock 之后立即推送 NotWrapTextBlock 并填充右侧空白的一面.

But what I want to do is to have WrapTextBlock take as less space as possible, pushing NotWrapTextBlock right after WrapTextBlock and fill the right side with empty space.

意思如下:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="WrapTextBlock" Grid.Column="0" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
    <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
</Grid>

但这里的问题是，现在 WrapTextBlock 中的文本不会再换行了.

But the thing here is, now the text in WrapTextBlock wouldn't wrap anymore.

我的意思是这样的:

当文本太长时需要扭曲:

When text is too long it requires to warp:

当文本足够短不需要变形时:

When text is short enough that doesn't requires to warp:

推荐答案

原因是将您的 ColumnDefinition 定义为 Auto 或 * 您没有什么可以限制 TextBlock 消费.因此，文本不换行是预期的行为.因此，您必须直接在 ColumnDefinition 或 TextBlock 上定义 Width 或 MaxWidth.所以例如;

The reason is by defining your ColumnDefinition as Auto or * you have nothing to limit the size available for your TextBlock to consume. So it would be expected behavior for the Text to not Wrap. So you'll have to define a Width or MaxWidth on either the ColumnDefinition or the TextBlock directly. So for instance;

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MaxWidth="50"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="WrapTextBlock" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
        <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
    </Grid>

会给你你的包裹，如果你想说只允许它拿，例如说，网格必须使用的空间的 7%，将 Width 更改为类似;

Will give you your wrap, if you want to say instead only allow it to take for example say, 7% of the space the grid has to use, change the Width to something like;

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="0.07*"/>
  <ColumnDefinition Width="0.93*"/>
</Grid.ColumnDefinitions>

因此第一列将占用可用空间的 7%，而右列将占用剩余空间.希望这会有所帮助.

So the first column will take up 7% of the space available, and the right column will consume the rest. Hope this helps.

编辑添加:

您显示的内容与您的第一个片段几乎一致，其中第一列应该推送，第二列应该只允许足够的空间来显示其内容；

What you're showing pretty much aligns with your first snippet wherein the first column should push, the second one should only allow enough space for its content to show;

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="WrapTextBlock" Grid.Column="0" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
    <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
</Grid>

这篇关于如何在宽度自动列内 TextWrap 文本块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！