如何使我的 TextBlocks 在我的 C# XAML Windows 8.1 应用程序中具有正确的大小？

Question

我是 Windows 8.1 开发的新手，如果这个问题很明显或很初级，请原谅我。我已经尝试了很多不同的属性，但我无法让它按照我想要的方式工作，所以我想也许这里有人可以帮助我。

我在做什么的描述：我创建了一个 UserControl，这样我就可以为我正在尝试做的这件事隔离 UI，这样我就可以在我真实的 UI 中的各个地方使用它。 UserControl 由一个 Button 和一个 Grid 组成。 Grid 有 3 行的定义， 我希望这些行（以及它们包含的 Border 元素和 TextBlock 元素）占总高度的 20% , 第 0、1 和 2 行分别为高度的 60% 和高度的 20%。我还希望 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 行 (Height="6*") 中的白色文本不是第 0 行和第 2 行的 3 倍高。至于我明白了，Height="6*" 与 Height="2*" 应该使第 1 行大于第 0 行和第 2 行。我显然在这里错过了一些明显的东西，但我不知道它是什么。

关于为什么 TextBlock 没有按照我想要的方式调整大小有什么想法吗？没有影响任何元素样式的外部设计模板（如据我所知，虽然我不确定是否有办法让我 explicitly/exhaustively 确定是否真的如此。

一个几乎不相关的旁白：如果这对其他人有帮助，我发现在 Button 上放置 Margin="0,-10" 将消除红色外网格内按钮周围的区域。花了一段时间才弄明白，所以希望它能为其他人节省一些时间。可能有一个具有相同效果的 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 实际上在内容呈现器中，它会填充 space（不是按钮的整个 space） .通过将这些属性设置为 Stretch，您可以让 ContentPresenter 填充可用的 space，然后 Grid 也会这样做，从而为您提供正确的行为。

如何使我的 TextBlocks 在我的 C# XAML Windows 8.1 应用程序中具有正确的大小？

How do I make my TextBlocks be the correct sizes in my C# XAML Windows 8.1 app?

c#

xaml

winrt-xaml

windows-8.1

windows-phone-8.1