如何在我的C＃XAML Windows 8.1应用程序中使我的TextBlocks成为正确的大小？

Question

我是Windows 8.1开发的新手，请原谅我，如果这个问题很明显或很简陋。 我已经尝试过各种各样的属性了，我不能按照我想要的方式使它工作，所以我想也许有人可以帮我一臂之力。

我正在做什么的描述：我创建了一个UserControl，所以我可以为我想要做的这一件事隔离UI，并且我也可以在我的真实UI中的各个地方使用它。 UserControl包含一个带有Grid的Button 。 Grid有3行的定义， 我希望行（以及它们包含的Border元素和TextBlock元素）占据总高度的20％，高度的60％和行0的高度的20％，分别为1和2 。 我还希望Grid占据Button的整个高度。

这是UserControl的XAML标记，颜色鲜艳，所以一切都很明显。

<UserControl
    x:Name="UserControlRoot"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d"
>
    <Grid x:Name="LayoutRoot" Margin="0" Background="Red">
        <Grid.Resources>
            <Style TargetType="TextBlock" x:Key="UCTextBlock">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="TextWrapping" Value="NoWrap" />
            </Style>
        </Grid.Resources>
        <!-- THIS BUTTON HAS SPACING AROUND IT - WHY? -->
        <Button 
            VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch"
            BorderBrush="White"
            BorderThickness="5"
            Background="Green"
            Padding="0"
            Foreground="Blue"
            Margin="0"
        >
            <Grid Background="#ff333333">
                <Grid.RowDefinitions>
                    <RowDefinition Height="2*" />
                    <RowDefinition Height="6*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Border Grid.Row="0" HorizontalAlignment="Stretch">
                    <TextBlock Text="THIS IS MY RED TEXT" Foreground="LightCoral" Style="{StaticResource UCTextBlock}" />
                </Border>
                <Border Grid.Row="1" HorizontalAlignment="Stretch">
                    <TextBlock Text="THIS IS MY WHITE TEXT, NOT TALL" Foreground="White" Style="{StaticResource UCTextBlock}" />
                </Border>
                <Border Grid.Row="2" HorizontalAlignment="Stretch">
                    <TextBlock Text="THIS IS MY BLUE TEXT" Foreground="LightSkyBlue" Style="{StaticResource UCTextBlock}" />
                </Border>
            </Grid>
        </Button>
    </Grid>
</UserControl>

这就是设计师的样子：

请注意，第1行（高度=“6 *”）中的白色文本不是第0行和第2行的3倍。据我所知，高度=“6 *”vs高度=“ 2 *“应该使第1行比第0行和第2行更大。我显然在这里有一些明显的错误，但我不知道它是什么。

关于为什么TextBlocks没有按照我希望的方式调整大小的任何想法？ 没有任何外部DesignTemplates会影响任何元素的样式（据我所知，虽然我不确定是否有办法让我明确/彻底地确定这是否真的如此）。

一个大多数不相关的旁边：如果这有助于其他人，我发现在按钮上放置一个Margin =“0，-10”将摆脱外部Grid中按钮周围的红色区域。 这需要一段时间来解决这个问题，所以希望它能节省一些时间。 可能有一个具有相同效果的ThemeResource，但如果是这样，我从未找到它。

Answer 1

在Button中，将水平和垂直内容对齐设置为Stretch。 这将拉伸内容网格。

<Button HorizontalContentAlignment="Stretch" ...
</Button>

Answer 2

TL; DR：将HorizontalContentAlignment和VerticalContentAlignment设置为Stretch

的ContentPresenter在按钮具有其HorizontalAlignment和VerticalAlignment属性绑定到HorizontalContentAlignment和VerticalContentAlignment分别属性。 您可以在MSDN上找到的默认控件模板中看到这一点。

<Grid>
...
<Border x:Name="Border"
      Background="{TemplateBinding Background}"
      BorderBrush="{TemplateBinding BorderBrush}"
      BorderThickness="{TemplateBinding BorderThickness}"
      Margin="3">
     <ContentPresenter x:Name="ContentPresenter"
                     Content="{TemplateBinding Content}"
                     ContentTransitions="{TemplateBinding ContentTransitions}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     Margin="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                      AutomationProperties.AccessibilityView="Raw"/>
                </Border>
                ...
            </Grid>

因为您的Grid实际上位于内容展示器内部 ，所以它会填充该空间（而不是按钮的整个空间）。 通过将这些属性设置为Stretch您可以使用ContentPresenter填充可用空间， Grid也会这样做，从而为您提供正确的行为。