Сетка не занимает всю страницу UWP

Вот мой XAML для страницы UWP.

<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>

But the StackPanel doesn't occupy the whole page(width).. Even though I set the HorizontalContentAlignment and HorizantalAlignment as Strech, it's not working.. I even tried grid in place of StackPanel but the issue still persists. Please see the image


layout xaml width uwp-xaml stackpanel
person Anurag    schedule 19.11.2016    source источник
comment
Избавьтесь от маржи. Вот что вызывает проблему   -  person AbsoluteSith    schedule 19.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, ваша 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.

person James Croft    schedule 20.11.2016