[UWP] [XAML]排版指南或样式有误 [英] [UWP][XAML] Typography guidelines or styles are wrong

问题描述

我正在构建一个UWP应用程序，并认为我应该遵守Microsoft有关绘制文本的指导原则。完整的排版指南可以在位置找到。
指南指定了各种不同文本样式的文本大小和行高。行高总是应该是4的倍数，以便在设备和屏幕尺寸之间实现良好的缩放行为。

以下是字幕文本的指南风格： -

可以看出，文字大小为20像素，行高为24. 

但如果您创建 TextBlock 并使用提供的使用新UWP项目定义的 SubtitleTextBlockStyle ，它无法正确绘制。

以下是要测试的代码： -

 
< TextBlock Style = " {ThemeResource SubtitleTextBlockStyle}" 
 Text =" SubtitleTextBlockStyle SubtitleTextBlockStyle SubtitleTextBlockStyle SubtitleTextBlockStyle" /> 
 
 

实际上你的文字空间是26和27像素交替： -

< img alt =""src ="https://social.msdn.microsoft.com/Forums/getfile/1082571">

我尝试设置保证金
TextBlock 的填充为零，并明确将 LineHeight 设置为24.这没有任何区别。

您将两个 TextBlock 实例放置在垂直 StackPanel 中，然后再次获得不同的间距，文本基线之间为28像素。

对我看来，指南实际上无法实现。当然我不是唯一一个注意到这一点的人吗？

解决方案

Hello Phil Wright，

如果您想严格遵守指南，请指定LineHeight并设置LineStackingStrategy =" BaselineToBaseline"。

< TextBlock Style =" {ThemeResource SubtitleTextBlockStyle}"  LineHeight =" 24"   LineStackingStrategy =" BaselineToBaseline" > 
< Run> SubtitleTextBlockStyle< / Run>< LineBreak /> 
< Run> SubtitleTextBlockStyle< / Run>< LineBreak /> 
< Run> SubtitleTextBlockStyle< / Run>< LineBreak /> 
< Run> SubtitleTextBlockStyle< / Run>< LineBreak /> 
< / TextBlock> 

或者，如果您想使用StackPanel，请明确设置TextBlock.Height。

< pre class ="prettyprint">< StackPanel>
< StackPanel.Resources>
< Style TargetType =" TextBlock" BasedOn =" {StaticResource SubtitleTextBlockStyle}">
< Setter Property =" Height"值= QUOT; 24英寸; />
< / Style>
< /StackPanel.Resources>
< TextBlock Text =" SubtitleTextBlockStyle" />
< TextBlock Text =" SubtitleTextBlockStyle" />
< TextBlock Text =" SubtitleTextBlockStyle" />
< TextBlock Text =" SubtitleTextBlockStyle" />
< / StackPanel>

I am building a UWP application and thought I should honor the Microsoft guidelines with respect to drawing my text. The full typography guidelines can be found at this location. The guidelines specify the text size and line height for various different text styles. The line height is always supposed to be a multiple of 4, to enable good scaling behavior across device and screen sizes.

Here is the guideline for the Subtitle text style: -

As can be seen, the text size is 20 pixels and the line height 24. 

But if you create a TextBlock and use the provided SubtitleTextBlockStyle that is defined with a new UWP project it does not draw correctly.

Here is the code to test: -

<TextBlock Style="{ThemeResource SubtitleTextBlockStyle}"
           Text="SubtitleTextBlockStyle SubtitleTextBlockStyle SubtitleTextBlockStyle SubtitleTextBlockStyle"/>

You actually get text space at 26 and 27 pixels alternating: -

I tried setting the Margin and Padding of the TextBlock to zero and explicitly setting the LineHeight to be 24. It makes no difference.

It you place two TextBlock instances in a vertical StackPanel then you get a different spacing again, 28 pixels between the base lines of the text.

To me it looks like the guidelines are impossible to actually implement. Surely I cannot be the only one to notice this?

解决方案

Hello Phil Wright,

If you'd like to strictly compy with the guidelines, specify LineHeight and set LineStackingStrategy="BaselineToBaseline".

    <TextBlock Style="{ThemeResource SubtitleTextBlockStyle}" LineHeight="24" LineStackingStrategy="BaselineToBaseline">
        <Run>SubtitleTextBlockStyle</Run><LineBreak/>
        <Run>SubtitleTextBlockStyle</Run><LineBreak/>
        <Run>SubtitleTextBlockStyle</Run><LineBreak/>
        <Run>SubtitleTextBlockStyle</Run><LineBreak/>
    </TextBlock>

Or otherwise, if you'd like to use StackPanel, set TextBlock.Height explicitly.

    <StackPanel>
        <StackPanel.Resources>
            <Style TargetType="TextBlock" BasedOn="{StaticResource SubtitleTextBlockStyle}">
                <Setter Property="Height" Value="24"/>
            </Style>
        </StackPanel.Resources>
        <TextBlock Text="SubtitleTextBlockStyle"/>
        <TextBlock Text="SubtitleTextBlockStyle"/>
        <TextBlock Text="SubtitleTextBlockStyle"/>
        <TextBlock Text="SubtitleTextBlockStyle"/>
    </StackPanel>

这篇关于[UWP] [XAML]排版指南或样式有误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！