为什么 UWP 应用程序运行时我的页面顶部和底部是空的 space? XAML 设计视图也不显示为空 space
Why is there empty space at the top & bottom of my page when the UWP app runs? XAML nor Design view shows empty space
为什么我的 UWP(通用 Windows 平台)应用程序在我的应用程序的顶部和底部强制执行额外的 space,即使那里什么也没有?
这是它的样子:
即使在Visual Studio2013(设计模式)你可以看到页面底部的蓝色边框显示如下:
外面的灰色是它运行所在的设备。
XAML 如下所示:
<Page
x:Class="CYaPass.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CYaPass"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="515" Width="570" Background="LightGray" Loaded="Page_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="320"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock FontSize="16" HorizontalAlignment="Center">1. Select a Site/Key</TextBlock>
<ListView BorderThickness="2" BorderBrush="Aquamarine"
x:Name="SiteListBox" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="251"
Margin="10,10,0,0" Width="Auto" SelectionChanged="SiteListBox_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="5,0,0,0" />
</Style>
</ListView.ItemContainerStyle>
<ListViewItem Content="Item 2"/>
</ListView>
<StackPanel Margin="10,0,0,0" Orientation="Horizontal" Grid.Column="0">
<Button x:Name="DeleteSiteButton" Content="Delete Site"
HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top" Click="DeleteSiteButton_Click"/>
<Button x:Name="AddSiteButton" Content="Add Site" HorizontalAlignment="Right"
Margin="10,0,0,0" VerticalAlignment="Top" Click="AddSiteButton_Click"/>
</StackPanel>
</StackPanel>
<TextBox x:Name="passwordTextBox" HorizontalAlignment="Left" Margin="7,150,0,0" Grid.Row="1" Grid.ColumnSpan="2"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="560"/>
<StackPanel HorizontalAlignment="Left" Height="128" Margin="10,0,0,0" Grid.Column="0" Grid.Row="1"
VerticalAlignment="Top" Width="285">
<Grid Margin="0,0,-11,0">
<Grid.RowDefinitions>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="addUppercaseCheckbox" Grid.Row="0" Grid.Column="0" Content="Add Uppercase" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="254" Click="addUppercaseCheckbox_Click" Margin="7,0,3,0"/>
<CheckBox x:Name="addSpecialCharscheckBox" Grid.Row="1" Grid.Column="0" Content="Add Special Chars" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<TextBox x:Name="specialCharsTextBox" Grid.Column="1" Grid.Row="1" Margin="7,0,3,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.RowSpan="1" TextWrapping="NoWrap" Text="#"/>
<CheckBox x:Name="setMaxLengthCheckBox" Grid.Row="2" Grid.Column="0" Content="Set Max Length" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<local:NumericUpDown Grid.Column="1" HorizontalAlignment="Left" Margin="7,0,3,0" Grid.Row="2" VerticalAlignment="Center" Width="64"/>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="1" Grid.Row="0" FontSize="16" HorizontalAlignment="Center">2. Draw a pattern</TextBlock>
<Canvas HorizontalAlignment="Center" x:Name="MainCanvas"
Height="252" Width="252" Margin="7,10,0,0" VerticalAlignment="Top" Background="AliceBlue" Tapped="MainCanvas_Tapped" PointerMoved="MainCanvas_PointerMoved"/>
<Button x:Name="ClearGridButton" Content="Clear"
Margin="50,0,10,0" VerticalAlignment="Center" Click="ClearGridButton_Click" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Page>
您可以看到页面的宽度比高度宽,但是当应用程序在桌面或模拟器设备(如 7" pad)上运行时,额外的 space 被推入顶部和底部.
UWP 强制最小值?
这是因为某些最小尺寸还是 UWP 对应用程序强制执行的某些操作?
当 运行
时无法缩小尺寸
即使我在应用 运行 时抓取表单的底部或顶部边界框,我也无法将其缩小。
默认内容对齐设置为 Center
因为您设置了页面的 Height
和 Width
,所以您的页面位于中心并且没有填充整个屏幕。
一个可能的解决方案是将这段代码添加到 Page
xaml 属性中:
VerticalAlignment="Top"
。
要将 HorizontalAlignment
设置到左侧,请添加以下内容:
HorizontalAlignment="Left"
.
还有一个建议:当您不需要在屏幕上显示多个 xaml 页面时,将页面 Height
和 Width
保留为默认值。
为什么我的 UWP(通用 Windows 平台)应用程序在我的应用程序的顶部和底部强制执行额外的 space,即使那里什么也没有?
这是它的样子:
即使在Visual Studio2013(设计模式)你可以看到页面底部的蓝色边框显示如下:
外面的灰色是它运行所在的设备。
XAML 如下所示:
<Page
x:Class="CYaPass.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CYaPass"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="515" Width="570" Background="LightGray" Loaded="Page_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="320"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock FontSize="16" HorizontalAlignment="Center">1. Select a Site/Key</TextBlock>
<ListView BorderThickness="2" BorderBrush="Aquamarine"
x:Name="SiteListBox" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="251"
Margin="10,10,0,0" Width="Auto" SelectionChanged="SiteListBox_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="5,0,0,0" />
</Style>
</ListView.ItemContainerStyle>
<ListViewItem Content="Item 2"/>
</ListView>
<StackPanel Margin="10,0,0,0" Orientation="Horizontal" Grid.Column="0">
<Button x:Name="DeleteSiteButton" Content="Delete Site"
HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top" Click="DeleteSiteButton_Click"/>
<Button x:Name="AddSiteButton" Content="Add Site" HorizontalAlignment="Right"
Margin="10,0,0,0" VerticalAlignment="Top" Click="AddSiteButton_Click"/>
</StackPanel>
</StackPanel>
<TextBox x:Name="passwordTextBox" HorizontalAlignment="Left" Margin="7,150,0,0" Grid.Row="1" Grid.ColumnSpan="2"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="560"/>
<StackPanel HorizontalAlignment="Left" Height="128" Margin="10,0,0,0" Grid.Column="0" Grid.Row="1"
VerticalAlignment="Top" Width="285">
<Grid Margin="0,0,-11,0">
<Grid.RowDefinitions>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="addUppercaseCheckbox" Grid.Row="0" Grid.Column="0" Content="Add Uppercase" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="254" Click="addUppercaseCheckbox_Click" Margin="7,0,3,0"/>
<CheckBox x:Name="addSpecialCharscheckBox" Grid.Row="1" Grid.Column="0" Content="Add Special Chars" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<TextBox x:Name="specialCharsTextBox" Grid.Column="1" Grid.Row="1" Margin="7,0,3,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.RowSpan="1" TextWrapping="NoWrap" Text="#"/>
<CheckBox x:Name="setMaxLengthCheckBox" Grid.Row="2" Grid.Column="0" Content="Set Max Length" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<local:NumericUpDown Grid.Column="1" HorizontalAlignment="Left" Margin="7,0,3,0" Grid.Row="2" VerticalAlignment="Center" Width="64"/>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="1" Grid.Row="0" FontSize="16" HorizontalAlignment="Center">2. Draw a pattern</TextBlock>
<Canvas HorizontalAlignment="Center" x:Name="MainCanvas"
Height="252" Width="252" Margin="7,10,0,0" VerticalAlignment="Top" Background="AliceBlue" Tapped="MainCanvas_Tapped" PointerMoved="MainCanvas_PointerMoved"/>
<Button x:Name="ClearGridButton" Content="Clear"
Margin="50,0,10,0" VerticalAlignment="Center" Click="ClearGridButton_Click" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Page>
您可以看到页面的宽度比高度宽,但是当应用程序在桌面或模拟器设备(如 7" pad)上运行时,额外的 space 被推入顶部和底部.
UWP 强制最小值?
这是因为某些最小尺寸还是 UWP 对应用程序强制执行的某些操作?
当 运行
时无法缩小尺寸即使我在应用 运行 时抓取表单的底部或顶部边界框,我也无法将其缩小。
默认内容对齐设置为 Center
因为您设置了页面的 Height
和 Width
,所以您的页面位于中心并且没有填充整个屏幕。
一个可能的解决方案是将这段代码添加到 Page
xaml 属性中:
VerticalAlignment="Top"
。
要将 HorizontalAlignment
设置到左侧,请添加以下内容:
HorizontalAlignment="Left"
.
还有一个建议:当您不需要在屏幕上显示多个 xaml 页面时,将页面 Height
和 Width
保留为默认值。