符合Windows商店应用程序的布局

Question

我有一个问题，让我的应用程序符合Microsoft的布局指导建议：

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

在页面标题部分中，如果窗口顶部有100px（5个单位），则建议标题的基线。但是，我正在尝试使用垂直对齐到100px网格行底部的文本块，似乎没有理由将基线设置为100px，因为无法控制文本块的基线偏移。

有没有人想出该怎么做，或者我应该使用哪些备用控件？

Answer 1

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

网格高度定义

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

为文本块定义的样式是

<Style 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"/>
</Style> 

140 - 40 =您正在寻找的令人垂涎的100：）

如果我将边距更改为0并在RowDefinition中从140更改为100，则按以下方式实现100：

在http://aka.ms/stackbuilder的App Builder的第1周（设计指导）下有一些很棒的设计链接（你也可以获得免费的设计评审）

Answer 2

事实证明，框中的文本必须偏移才能使其位于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>