网格不占用整个页面 UWP答案

【问题标题】：Grid not occupying whole page UWP网格不占用整个页面 UWP
【发布时间】：2017-04-03 01:41:08
【问题描述】：

这是我用于 UWP 页面的 XAML。

<Page
x:Class="App.AddComment"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" HorizontalContentAlignment="Stretch"  HorizontalAlignment="Stretch"
>
<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.Content>
            <Grid/>
        </CommandBar.Content>
        <AppBarButton Icon="PostUpdate" Label="Post"/>
    </CommandBar>
</Page.BottomAppBar>

<StackPanel Margin="5,10,5,50" BorderBrush="Black" BorderThickness="3" Background="White" HorizontalAlignment="Stretch">
    <TextBlock Name="Title" HorizontalAlignment="Stretch" Margin="10" MinHeight="50" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Foreground="{StaticResource SystemControlBackgroundAccentBrush}" FontWeight="Normal" FontSize="20"/>
    <TextBox Name="CommentBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,20,10,20" AcceptsReturn="True" TextWrapping="Wrap" FontWeight="Thin" FontSize="18" VerticalContentAlignment="Stretch" Height="200" Header="Comment" PlaceholderText="Enter your comment here.."/>
</StackPanel>

但是 StackPanel 并没有占据整个页面（宽度）.. 即使我将 HorizontalContentAlignment 和 HorizantalAlignment 设置为 Strech，它也不起作用.. 我什至尝试使用网格代替 StackPanel，但问题仍然存在。 Please see the image

【问题讨论】：

去掉边距。这就是造成问题的原因

标签： xaml layout width uwp-xaml stackpanel

【解决方案1】：

看起来包装页面内容的 StackPanel 上有一个 Margin 。

Margin 会导致控件在控件外部添加一个间隙，使其看起来像这样：

如果不需要，您可能想要做的是删除边距，或者将其更改为 Padding。

<StackPanel Padding="5,10,5,50" BorderBrush="Black" BorderThickness="3" Background="White" HorizontalAlignment="Stretch">
    <TextBlock Name="Title" HorizontalAlignment="Stretch" Margin="10" MinHeight="50" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Foreground="{StaticResource SystemControlBackgroundAccentBrush}" FontWeight="Normal" FontSize="20"/>
    <TextBox Name="CommentBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,20,10,20" AcceptsReturn="True" TextWrapping="Wrap" FontWeight="Thin" FontSize="18" VerticalContentAlignment="Stretch" Height="200" Header="Comment" PlaceholderText="Enter your comment here.."/>
</StackPanel>

填充会导致间隙出现在控件内部，如下所示：

这为您提供了与内部内容相同的布局，但将具有您想要的 StackPanel/Grid 的边缘到边缘外观。

【讨论】：