放置在ViewBox中时,TextBlock文本不会换行

时间:2013-07-18 08:07:28

标签: windows-store-apps winrt-xaml textblock textwrapping viewbox

我有一个带有很长文本的TextBlock,我想要包装。我已经将TextBlock放在ViewBox中,期望文本大小在仍然换行时改变,但是这似乎不会发生。 ViewBox只调整TextBox的大小,以便所有文本都适合一行,使文本非常小。

如何在仍使用TextWrapping的同时使用ViewBox调整文本大小。

这是我的代码:

<Viewbox>
    <TextBlock Text="The Option text can also dynamically grow/shrink to fit more content. More text to go here....................." TextWrapping="Wrap"/>
</Viewbox>

这是Windows 8商店应用程序的一部分,因此是WinRT Xaml。

3 个答案:

答案 0 :(得分:21)

只需在TextBlock上设置宽度。

        <Viewbox Width="500">
            <TextBlock Width="100" TextWrapping="Wrap">This is the text that's long and on two lines.</TextBlock>
        </Viewbox>

TextBlock with width 100 in ViewBox with width 500

因此ViewBox会放大/缩小其全部内容。如果您不通过在TextBlock上设置宽度来限制其内容,则ViewBox将为其提供无限扩展空间。您还可以在Grid中添加宽度和高度的根ViewBox并将元素放在其中,然后根据ViewBox的宽度对整个批次进行缩放。

在图片中,TextBlock 100的宽度被缩放为ViewBox的宽度,即500.因此要获得所需的包装,只需调整TextBlock即可。宽度直到它看起来不错。

(显然它应该说三行,但我不是为了那个重新上传)

答案 1 :(得分:0)

我遇到了同样的问题,我有很多按钮,需要一个ViewBox来处理本地化。这样做的原因是Width设置为Infinity,因为按钮或控件的宽度由父控件确定。幸运的是,控件具有一个称为ActualWidth的属性。此属性保存一个呈现的宽度,我可以在绑定中使用它:

<Button>
    <Button.Content>
        <Viewbox StretchDirection="DownOnly">
            <TextBlock Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Button}}" TextWrapping="Wrap" TextAlignment="Center" Text="{Binding }" />
        </Viewbox>
    </Button.Content>
</Button>

因此,文本块将获得Button按钮当前具有的宽度。如果按钮更改宽度,则会自动更新。 Textblock将根据给定的宽度进行换行,并且只有在需要时(如果应用StretchDirection =“ DownOnly”),视图框才会闪烁。

https://docs.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement.actualwidth?view=netframework-4.8

答案 2 :(得分:0)

您不必固定任何控件的宽度或最大值。使用虚拟网格并绑定到它的 ActualWidth。见代码https://github.com/omeraziz/NoTextOverflowWPF

<Window Title="NoTextOverflow"
    x:Class="NoTextOverflow.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="Auto" Height="Auto"
    ResizeMode="CanResize" SizeToContent="WidthAndHeight">

<!--
    There is no fixed width in any of the UI elements including window, Label, TextBlock, TextBox etc.
    Window's SizeToContent grows and shrinks with the contents.
-->

<Grid Margin="10" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Label VerticalAlignment="Center" Content="Type Here:" />
    <TextBox x:Name="LongText"
             Grid.Column="1" Grid.ColumnSpan="2"
             Width="{Binding ElementName=WidthRestrictorGrid, Path=ActualWidth, Mode=OneWay}"
             MinWidth="100"
             Margin="5" HorizontalAlignment="Left" VerticalAlignment="Center"
             Text="Type here a long message and resize this window" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" />

    <!--
        This grid is used to calculate width of middle two columns.
        Remove this and its references to see the effect without this grid.
        Since this is not parent of TextBox and TextBlock so it must have a Name to bind with its Actualwidth
    -->

    <Grid x:Name="WidthRestrictorGrid"
          Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"
          Margin="10,1" HorizontalAlignment="Stretch" />

    <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
               Width="{Binding ElementName=WidthRestrictorGrid, Path=ActualWidth, Mode=OneWay}"
               MinWidth="50"
               Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"
               Background="LightGray"
               Text="{Binding ElementName=LongText, Path=Text}"
               TextWrapping="Wrap" />

    <Button Grid.Row="2" Grid.Column="3"
            Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom"
            Content="Dummy" />

</Grid>