C# 符合windows应用商店应用程序的布局

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

在页眉部分，建议页眉的基线距离窗口顶部100px 5个单位。但是，我尝试使用文本块，垂直对齐到100px网格行的底部，似乎没有合理的方法获得100px的基线，因为没有方法控制文本块的基线偏移

---

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

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

栅格高度定义

<Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> 为textblock定义的样式为

<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，并在行定义中从140变为100，我将按照以下公式获得100：

---

在App Builder的第1周设计指南中有一些很棒的设计链接，您还可以获得免费的设计审查

结果是，框中的文本必须偏移，才能放置在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>

---

这与当前在100个网格行和底部对齐中使用textblock的方法有什么不同？我看不出来，只是解释了目前在Microsoft提供的符合布局规范的模板中是如何实现的。textblock的左下角坐标确实是由边距控制的。当我将模板更改为100而不是140，并将边距更改为零时，基线将移动到100。请参见上面的图像添加。我注意到，这里真正的魔法是您的示例基于的样式“HeaderTextStyle”，在该样式中，基线是通过“RenderTransform”实现的，否则文本不会对齐。很高兴知道，一个好的起点始终是模板，以确保您拥有所有样式。但是，同意，知道到底发生了什么更好。啊，有趣。你仍然需要我在下面提到的一切。