您的问题

Question

我对UWP应用程序开发迈出了第一步，因为我对我所做的任何非Web开发（例如WinForms）感到厌倦，无论我如何尝试使其美观。

我一直在使用设计器，带有图像的页面以及填充有按钮的堆栈面板进行生产。设计器视图显示stackpanel很好

这是我的XAML

<Page
    x:Class="TestBed.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestBed"
    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 Margin="48,10,0,0">
        <Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
        <StackPanel Orientation="Vertical" Margin="200,86,1113,247" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        </StackPanel>
    </Grid>
</Page>

但是，当我运行该应用程序时，堆栈面板不显示（其中的任何按钮也不显示）。我很沮丧我尝试将堆栈面板的顺序设置为“ To Front”，但没有骰子。显然我的新手技能正在展现。

有帮助吗？

Answer 1

可能是因为您正在使用margin属性设置控件的位置。

尝试读一些不同的布局类型，例如Grid StackPanel或RelativePanel。

here是很好的介绍。

您可以做的最基本的事情就是这样：

<Grid>
<Grid.RowDefinitions>
    <Rowdefinition Height="*"> //The * just fills in the remaining Screen space.
    <Rowdefinition Height="500"> //This Row is 500px high
    <Rowdefinition Height="*"> //Fills the rest of the screen (same as first row)
<Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Height="*">
    <ColumnDefinition Height="500">
    <ColumnDefinition Height="2*"> //Using 2* fills double the screen as *
<Grid.ColumnDefinitions>

<StackPanel Grid.Row="1"
            Grid.Column="1"> //Row and Column are 0-indexed
    //Elements to stack go in here
</StackPanel>

如果您需要更多信息或更详细的示例，请告诉我。我只需要等到我回家才能访问UWP代码。

Answer 2

您的问题在这里：

Margin="200,86,1113,247"

设计人员认为目标设备的像素要比其运行的实际设备多得多。不要忘记这些是“有效像素”，仅仅是因为您的屏幕可能是4k，并不表示其UWP术语中的像素为4000像素。

在此处尝试以获取更多信息

https://docs.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro#effective-pixels-and-scaling

要在页面XAML中解决此问题，您需要指定设计图面的宽度和高度（d：DesignHeight =“ ...” d：DesignWidth =“ ...”）-像这样：

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

Answer 3

我正在用“ <-（（**））->”分割一些可编辑的代码：

<Grid Margin="48,10,0,0" >
        <Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
        <StackPanel Orientation="Vertical" <--((Margin="200,86,1113,247"))--> HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        </StackPanel>
    </Grid>

您的问题

您正在设计（开发）的分辨率大于目标设备（窗口）

尝试一下：

<Grid Margin="48,10,0,0" >
        <Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        </StackPanel>
    </Grid>

运行UWP应用（C＃）时StackPanel不显示

3 个答案:

您的问题