StackPanel не отображается при запуске приложения UWP (C #)

Question

Я делаю свои первые шаги в разработке приложений UWP, так как устал от любой не-веб-разработки (например, WinForms), похожей на что-то с 1995 года, независимо от того, как я пытаюсь это сделать.

Я слонялся вокруг и создавал, используя дизайнер, страницу с изображением и панель стека, заполненную кнопками.Представление конструктора показывает панель штрафа отлично

И это мой 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>

Однако, когда я запускаю приложение,панель стека не отображается (равно как и кнопки внутри нее).Я в тупике.Я попытался установить панель стека "На фронт" с точки зрения порядка, но без кубиков.Ясно, что мои начинающие навыки показывают.

Помогите?

Answer 1

Ваша проблема здесь:

Margin="200,86,1113,247"

Дизайнер считает, что целевое устройство имеет гораздо больше пикселей, чем фактическое устройство, на котором оно работает.Не забывайте, что это «эффективные пиксели», потому что ваш экран может иметь размер 4 Кбайт, это не означает, что его ширина составляет 4000 пикселей в терминологии UWP.

Для получения дополнительной информации попробуйте здесь

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 2

есть некоторый редактируемый код, который я разделяю с помощью "<- ((**)) ->":

<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>

Answer 3

Это может быть связано с тем, что вы устанавливаете положение элементов управления с помощью атрибута margin.

Попробуйте немного прочитать различные типы макетов, такие как Grid StackPanel или RelativePanel.

Хорошее введение можно найти здесь .

Просто вы можете сделать что-то вроде этого:

<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.