Question

我做了以下事情：

我创建了一个BlankPage
将白色画布放大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）使用模拟器模式运行应用程序

问题：

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

左下和右下不可见

问题：

为什么所有按钮都放在白色画布中，而不是所有按钮都可见？

需要做什么？下面是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）更改窗口/页面大小不会影响按钮位置 - 因为它们的位置基于边距 - 距离左侧和顶部的距离 - 在此场景中永远不会更改

正确地完成它（如果你想在窗户的四个角上放置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>

现在，当窗口/页面大小发生变化时，它们的位置将会更新 - 因为网格大小将会更改，并且其内部的所有子位置都将更新 - 因为位置现在相对设置

Answer 2

对于我自己热衷于RelativePanel，只使用边距进行小推和拉动。

<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说的是，请选择一些教程，UWP for win 10是一个很好的布局开始以及如何使用它。

如何确保所有Control在WhiteCanvas中可见

2 个答案: