XAML UI布局问题

XAML UI Layout Issues

本文关键字：问题 布局 UI XAML      更新时间：2023-10-16

我最近刚得到Windows 10和Visual Studio 2015，并决定尝试学习如何构建通用应用程序。我已经浏览了windows 10和windows 8通用应用程序的微软指南，但它们似乎没有提到这方面的任何内容。

当我测试HelloWorld应用程序时，我注意到的第一个问题是，如果我调整StackPanel的大小，使其更小，更封闭在它所包含的项目周围，到一定程度，它在运行时覆盖了项目，尽管事实上StackPanel的边界没有跨越任何东西。

另一个问题(与StackPanel问题半相关)必须处理项目放置。在我所做的所有GUI工作中，道具放置似乎从来不是个问题。如果我需要在UI的右侧工作或在小窗口中居中，我可以这样做。一般来说，.xaml设计窗口中项目的位置并不能反映它在运行时的样子。如果我尝试将HelloWorld的StackPanel内容(与StackPanel调整大小或不)放在中心，它只会看起来像它在运行时，如果我最大化窗口(如果不是50像素关闭)。所以这是否意味着所有通用应用ui都需要从左上角开始构建?

编辑:这里有一些图片链接，可以显示我所描述的内容。下面是当我移动stackpanel时发生的情况:

https://goo。gl/photos/D47PHtkd1nTGJTyo8 -> in vs

https://goo。gl/photos/wVH1uPdB43a9oSdf7 -> running

我想张贴链接到我的其他图像，但我还没有代表。

编辑:xaml代码:

    <StackPanel  Margin="120,30,0,0">
        <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
        <TextBlock Text="What's your name?"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput"/>
    </StackPanel>

我只是把这些粘贴到代码块中，这些都是直接从windows 10通用应用程序的hello world教程中获得的。我从来没有对代码本身做过任何改变，我只是用UI设计器做了一些改变。

理想情况下，你应该发布你的XAML，但从屏幕截图我可以看到，你依赖于设置Margin -我假设你拖放控件在设计器，并使用UI来执行布局。更好的方法是使用HorizontalAlignment和VerticalAlignment属性以您想要的方式布局您的UI，并依靠Margin实际的"边距"(控件周围的额外空白)。

相关文章：