UWP/XAML: 使Grid内的TextBlock自动缩小

Question

我有一个包含几个 TextBlock 的网格：

 <Grid x:Name="TopToolBarTitleGrid"
          Grid.Row="1"
          Grid.Column="1"
          HorizontalAlignment="Center"
          VerticalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock AutomationProperties.AutomationId="Aid_MainPage_TextBlock_ViewTitle"
                   Grid.Row="0"
                   Grid.Column="0"
                   FontSize="21" 
                   FontWeight="SemiBold" 
                   Foreground="{Binding ScreenLocked, Converter={StaticResource BooleanForegroundBrushDisabledConverter}}"
                   ManipulationCompleted="OnInfoTabManipulationCompleted" 
                   ManipulationDelta="OnInfoTabManipulationDelta"
                   ManipulationMode="TranslateY"
                   ManipulationStarted="OnInfoTabManipulationStarted"
                   Margin="0,0,5,0" 
                   Tapped="OnInfoTabTapped"
                   Text="{Binding ViewTitle}" 
                   TextAlignment="Right" 
                   TextTrimming="WordEllipsis" 
                   TextWrapping="NoWrap" 
                   VerticalAlignment="Center"
                   Visibility="{Binding ElementName=This, Path=Title, Converter={StaticResource NTVC}, ConverterParameter=-}"/>
        <TextBlock AutomationProperties.AutomationId="Aid_MainPage_TextBlock_SelectedFleetName"
                   Grid.Row="0"
                   Grid.Column="1"
                   FontSize="21" 
                   Foreground="{Binding ScreenLocked, Converter={StaticResource BooleanForegroundBrushDisabledConverter}}"
                   ManipulationCompleted="OnInfoTabManipulationCompleted" 
                   ManipulationDelta="OnInfoTabManipulationDelta"
                   ManipulationMode="TranslateY"
                   ManipulationStarted="OnInfoTabManipulationStarted"
                   Margin="5,0,0,0"
                   Tapped="OnInfoTabTapped"
                   Text="{Binding Path=TailoredEnrouteSelectedFleetInfo}"
                   TextAlignment="Left" 
                   VerticalAlignment="Center"
                   Visibility="{Binding Path=TailoredEnrouteFleetsAvailable, Converter={StaticResource BTVC}}" />

    </Grid>

目前，这表现出两个不良特性：

当文本太长时，会被省略号截断。（我看到这种行为是由 TextTrimming 属性指定的。我应该将它设置为 "None" 以获得自动收缩行为吗？）
当网格变得太窄时（例如，缩小 window），它会剪裁文本的边缘而不是缩小它。

我希望文本在变得太长时缩小以适合，如果 space 变窄。似乎应该有一个简单的方法来做到这一点，但我的谷歌搜索到目前为止已经提出了使用 Grid（已经这样做）和 Viewbox（在我的测试中什么也没做）的建议。

我是UWP开发的小白，大部分时间都花在了iOS上，所以请原谅这个愚蠢的问题。

Answer 1

When text is too long, it is truncated with an Ellipsis. (I see this behavior is specified by the TextTrimming property. Should I set it to "None" to get auto-shrinking behavior?)

TextTrimming 属性用于获取或设置内容溢出内容区域时要采用的文本修剪行为。

CharacterEllipsis Introduced in . Text is trimmed at a character boundary. An ellipsis (...) is drawn in place of remaining text.

Clip Introduced in . Text is trimmed at a pixel level, visually clipping the excess glyphs.

None Text is not trimmed.

WordEllipsis Text is trimmed at a word boundary. An ellipsis (...) is drawn in place of remaining text.

如果设置None，文本将不会被裁剪。而 TextWrapping 用于换行长字。但是，它可用于缩小文本。目前，有一种解决方法，您可以将 Textblock 插入 Viewbox。 TextBolck 将缩放整个事物以适合父对象。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Viewbox Grid.Row="0" Stretch="Uniform"  Width="200" Height="50">
        <TextBlock  Text="I would like the text "   />
    </Viewbox>

    <Viewbox Grid.Row="1" Stretch="Uniform"  Width="200" Height="50">
        <TextBlock  Text="I'm a baby when it comes to UWP development, ."   />
    </Viewbox>
</Grid>

UWP/XAML: 使Grid内的TextBlock自动缩小

UWP/XAML: Make TextBlock inside Grid automatically shrink

uwp

uwp-xaml