C＃UWP按钮与我想要的方式不一致

Question

我在“开始”按钮旁边创建了一个按钮。在我的xaml页面中，该按钮出现在我想要的位置。

但是，当我运行该应用程序时，它会出现在随机位置。

我该如何解决？

StackPanel>
        <TextBlock Text="Description:" Style="{StaticResource SampleHeaderTextStyle}"/>
        <TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" Text="This page is where your exercise starts " FontSize="20"/>
        <TextBlock TextWrapping="Wrap" Margin="0,20,0,0" FontSize="20">
            Follow the instruction and press "Start" to begin the exercise.
        </TextBlock>
        <TextBlock TextWrapping="Wrap" Margin="0,0,0,0" FontSize="15">
            (Ensure the connected BLE device is working before starting the exercise.)
        </TextBlock>
        <TextBlock x:Name="txtClock" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="20"/>
        <Button x:Name="btnStart" Content="Start" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Height="38" Width="106" Click="btnStart_Click_1"/>
        <TextBlock x:Name="txtExercise"  TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
        <TextBlock x:Name="txtAngle"  TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
        <TextBlock x:Name="txtDisplay"  TextWrapping="Wrap" Margin="0,10,0,0"/>
        <TextBlock x:Name="txtAgain" Text="" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
        <Button x:Name="btnRefresh" Content="Refresh" HorizontalAlignment="Left" VerticalAlignment="Top" Height="38" Width="106" Margin="150,-158,0,0" Click="btnRefresh_Click"/>

Answer 1

由于您正在使用按钮的Margin-Property，因此它将弹出在其他位置是有道理的。

说实话，我真的不知道为什么，但是我遇到了同样的问题。

我建议您使用RelativePanel，StackPanel或Grid。

您可以阅读this microsoft page.，以了解有关各种类型之间差异的更多信息。

一个网格看起来像这样： （请注意，网格索引为0）

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="100"/> //For a Row of 100 units height
    <RowDefinition Height="*"/> //For a Row which fills the rest of the available screen space
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/> //For a column of 100 units width
    <ColumnDefinition Width="*"/> //For a column which fills the rest of the screen
  </Grid.ColumnDefinitions>

  <Button x:Name="Button1" Grid.Row="0" Grid.Column="0" />
  <Button x:Name="Button2" Grid.Row="1" Grid.Column="1" />
</Grid> 

Stackpanel看起来像这样： （这里要记住的一点是，当屏幕/窗口大小更改时，Stackpanel不会调整其元素的大小）

<Stackpanel Orientation="horizontal">
  <Button x:Name="Button1"/>
  <Button x:Name="Button2"/>
</Stackpanel>