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

瑞安·巴兰坦

我有一个包含几个 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>

目前,这表现出两个不受欢迎的特性:

  1. 当文本太长时,它会被省略号截断。(我看到此行为是由 TextTrimming 属性指定的。我应该将其设置为“无”以获得自动收缩行为吗?)
  2. 当网格变得太窄时(比如缩小窗口),它会剪裁文本的边缘而不是缩小它。

我希望文本在变长时缩小以适应,并且如果空间变窄。似乎应该有一个简单的方法来做到这一点,但到目前为止,我的谷歌搜索已经提出了使用网格(已经这样做)和视图框(在我的测试中什么也没做)的建议。

说到UWP开发,我还是个孩子,我大部分时间都在iOS上,所以请原谅这个愚蠢的问题。

Nico Zhu - MSFT

当文本太长时,它会被省略号截断。(我看到此行为是由 TextTrimming 属性指定的。我应该将其设置为“无”以获得自动收缩行为吗?)

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

CharacterEllipsis中介绍。在字符边界处修剪文本。将绘制省略号 (...) 来代替剩余的文本。

Clip中介绍。在像素级别修剪文本,从视觉上剪裁多余的字形。

None 文本未修剪。

WordEllipsis文本在单词边界处被修剪。将绘制省略号 (...) 来代替剩余的文本。

如果你设置它None,文本将不会被修剪。TextWrapping用于换行长字。但是,它可用于缩小文本。目前,您可以将解决方法插入TextblockViewbox. 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>

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章