如何确保所有控件在 WhiteCanvas 中可见

Question

我做了以下事情：

我创建一个空白页面
将白色 canvas 放大 66.67% 以便我可以更清楚地看到控件的位置
我从工具箱中拖出按钮，每个角放置4个按钮

问题：

a) 运行具有 LocalMachine 模式的应用程序

3 个按钮不可见，

except this button.

 <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="47,69,0,0" VerticalAlignment="Top" Height="70" Width="193"/>

b) 运行具有模拟器模式的应用程序

问题：

只有左上角和右上角可见。

左下角和右下角不可见

问题：

为什么所有的按钮都放在白色内Canvas，不是所有的都可见？

需要做什么？下面是BlankPage，你可以试试让我知道我做错了什么。

感谢您的帮助。

<Page
    x:Class="w10QMgmt.BlankPage3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:w10QMgmt"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="1201,88,0,0" VerticalAlignment="Top" Height="60" Width="151"/>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="47,69,0,0" VerticalAlignment="Top" Height="70" Width="193"/>
        <Button x:Name="button2" Content="Button" HorizontalAlignment="Left" Margin="1139,832,0,0" VerticalAlignment="Top" Height="88" Width="183"/>
        <Button x:Name="button3" Content="Button" HorizontalAlignment="Left" Margin="58,844,0,0" VerticalAlignment="Top" Height="52" Width="143"/>

    </Grid>
</Page>

Answer 1

1) 您已将所有按钮放入 Grid 控件中，没有使用 Canvas

2) 您已经根据边距设置了所有按钮位置 - 通过用鼠标放置它们 - 永远不要这样做，除非您知道自己在做什么以及生成的代码意味着什么

3) 更改 window/page 大小不会影响按钮位置 - 因为它们的位置基于边距 - 与左侧和顶部的距离 - 在这种情况下永远不会更改

正确地做到这一点（如果你想在 windows 的四个角放置 4 个按钮）只需删除边距 - 并将水平和垂直对齐设置为适当的角：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="button" Content="Button" HorizontalAlignment="Left"  VerticalAlignment="Top" Height="60" Width="151"/>
    <Button x:Name="button1" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Top" Height="70" Width="193"/>
    <Button x:Name="button2" Content="Button" HorizontalAlignment="Left"  VerticalAlignment="Bottom" Height="88" Width="183"/>
    <Button x:Name="button3" Content="Button" HorizontalAlignment="Right"  VerticalAlignment="Bottom" Height="52" Width="143"/>
</Grid>

现在它们的位置会在 window/page 尺寸改变时更新 - 因为 Grid 尺寸会改变，它里面的所有子位置都会更新 - 因为位置现在是相对设置的

Answer 2

就我自己而言，我热衷于 RelativePanel，仅将 Margins 用于小推拉。

<Grid>
    <RelativePanel>
        <Button Name="1"
                RelativePanel.AlignTopWithPanel="True"
                RelativePanel.AlignLeftWithPanel="True"/>
        <Button Name="2"
                RelativePanel.AlignTopWithPanel="True"
                RelativePanel.AlignRightWithPanel="True"/>
        <Button Name="3"
                RelativePanel.AlignBottomWithPanel="True"
                RelativePanel.AlignLeftWithPanel="True"/>
        <Button Name="4"
                RelativePanel.AlignBottomWithPanel="True"
                RelativePanel.AlignRightWithPanel="True"/>
    </RelativePanel>
</Grid>

还有 @RTdev 所说的，请获取一些教程，适用于 win 10 的 UWP 是布局和如何使用它的良好开端。

如何确保所有控件在 WhiteCanvas 中可见

How to make sure all Control are visible in the WhiteCanvas

uwp

uwp-xaml