1

我在让我的应用程序符合 Microsoft 此处建议的布局指南时遇到问题:

http://msdn.microsoft.com/en-us/library/windows/apps/hh872191.aspx

页眉部分中,如果距窗口顶部 100 像素(5 个单位),则建议页眉的基线。但是,我正在尝试使用一个文本块,垂直对齐到 100px 网格行的底部,并且似乎没有合理的方法来获得 100px 的基线,因为无法控制文本块的基线偏移量。

有没有人知道该怎么做,或者我应该使用哪些替代控件?

4

2 回答 2

0

查看默认的 Grid View 模板,它是 100px 的。这是通过将网格行定义为 140 像素,然后将文本块的边距定义为距底部 40 像素来实现的。

网格高度定义

<Grid.RowDefinitions>
  <RowDefinition Height="140"/>
  <RowDefinition Height="*"/>
</Grid.RowDefinitions>

为文本块定义的样式是

<样式 x:Key="PageHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource HeaderTextStyle}">
  <Setter Property="TextWrapping" Value="NoWrap"/>
  <Setter Property="VerticalAlignment" Value="Bottom"/>
  <Setter Property="Margin" Value="0,0,30,40"/>
</样式>

140 - 40 = 您正在寻找的令人垂涎的 100 :)

如果我将边距更改为 0 并在 RowDefinition 中从 140 变为 100,我会按照以下方式达到 100: 100 像素基线 测量

在http://aka.ms/stackbuilder的第 1 周(设计指南)下有一些很棒的 App Builder 设计链接(您还可以获得免费的设计评论)

于 2013-04-25T22:11:14.377 回答
0

事实证明,框中的文本必须偏移才能使其位于 100px 上。指南中提到的基线。最简单的方法是使用基于解决方案“Common”文件夹中 StandardStyles.xaml 文件中的“BaselineTextStyle”或“HeaderTextStyle”的样式。

如果您查看这些定义,您会看到正在使用 RenderTransform 将文本与基线对齐,ala;

<Style x:Key="BaselineTextStyle" ...>
    ...
    <!-- Properly align text along its baseline -->
    <Setter Property="RenderTransform">
        <Setter.Value>
            <TranslateTransform X="-1" Y="4"/>
        </Setter.Value>
    </Setter>
    ...
</Style>
于 2013-04-28T16:27:40.623 回答