UWP 应用程序 MainWindow 不显示左侧的第二个按钮

Question

我尝试了各种变体，但是当我运行应用程序时 MainWindow 的第二个按钮没有显示。看来我不太了解应用程序的设计模式。问题：我应该对此处的 XAML 进行哪些更改才能在应用运行时显示第二个按钮（名为 Test2）？

备注：这是一台Windows 10笔记本电脑。我正在使用 VS2019.

XAML

<Page
    x:Class="UWPTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Button x:Name="btnTest" Content="Test" Margin="69,1,0,0" Click="BtnTest_Click" VerticalAlignment="Top"/>
        <Button x:Name="btnGetSelContSrcView" Content="Test2" Margin="69,47,0,921" VerticalAlignment="Stretch" Click="BtnGetSelContSrcView_Click"/>
        <WebView x:Name="wvTest" Margin="130,38,0,10" DOMContentLoaded="WvTest_DOMContentLoaded"/>
    </Grid>
</Page>

设计视图快照

Snaphot Main Window after app 运行s [FULL Screen mode om 17" monitor]

请注意，第二个按钮未显示。

Snaphot Main Window 单击第一个按钮后 [全屏模式 om 17" 显示器]

注意第一个按钮点击事件在右侧显示html（正如预期的那样），但第二个按钮也没有显示在这里。

Answer 1

原因： 你在第二个按钮中使用的外边距 "Margin="69,47,0,921"" 表示距屏幕顶部 47 距离，距屏幕顶部 921 距离screen.When 你运行应用程序的底部，一旦屏幕高度小于968，那么第二个按钮将不会显示，因为它的高度等于 0.So 当你最大化屏幕，将显示第二个按钮。

解决方法：可以试试下面的代码设置第二个按钮

<Button x:Name="btnTest" Content="Test" Margin="69,1,0,0" VerticalAlignment="Top"/>
<Button x:Name="btnGetSelContSrcView" Content="Test2" Margin="69,47,0,0" VerticalAlignment="Top" />

Answer 2

使用 StackPanel 进行正确对齐并使用 Grid ColumnDefinitions 或 Grid RowDefinitions

示例：

<Grid Loaded="Page_Loaded">
    <Grid.RowDefinitions>
        <RowDefinition Height="32"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <StackPanel Orientation="Horizontal">
            <Button Content="Pre page" />
            <Button Content="Next page" />
        </StackPanel>
    </Grid>
    <Grid Grid.Row="1">
        <WebView Source="https://google.com" />
    </Grid>
</Grid>

Screenshot

链接：

https://docs.microsoft.com/en-us/windows/uwp/design/layout/layout-panels

UWP 应用程序 MainWindow 不显示左侧的第二个按钮

UWP app MainWindow not displaying the second button on the left

windows-10

uwp

uwp-xaml