我不明白xaml对齐

Question

所以我与XAML对齐有点挣扎，我希望有人可以帮助我通过它。

这是守则。我将在下面分解：

<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
    <StackPanel>
        <Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
        <Image Source="Assets/images/icon_thumbnail.png"></Image>
    </StackPanel>
    <Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
            BorderThickness="2" Width="300" Height="350">
            <StackPanel >
                <TextBlock>
                    <Run x:Name="MyRun" Text=""/>
                </TextBlock>
                <StackPanel Orientation="Horizontal">
                    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
                        <TextBox x:Name="searchTextBox" Width="200" Height="30"   />
                    </StackPanel>
                    <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
                        <Button x:Name="firstSearch"  Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
                            <Image Source="Assets/images/view_search.png"/>
                        </Button>
                    </StackPanel>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                        <Image Source="/Assets/images/left_arrow.png"/>
                    </Button>
                    <Button x:Name="next" Style="{StaticResource AppBarButtonStyle}"  Tapped="OnOptionItemTapped">
                        <Image Source="/Assets/images/right_arrow.png"/>
                    </Button>
                </StackPanel>
                <Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

这部分将是MyRun文本稍后：

<TextBlock>
    <Run x:Name="MyRun" Text=""/>
</TextBlock>

这部分是SearchBar和search-button应该是完美的排队。我该怎么做呢？

<StackPanel Orientation="Horizontal">
    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
        <TextBox x:Name="searchTextBox" Width="200" Height="30"   />
    </StackPanel>
    <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
        <Button x:Name="firstSearch"  Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
            <Image Source="Assets/images/view_search.png"/>
        </Button>
    </StackPanel>
</StackPanel>

这是下一个和上一个按钮。它应该与MyRun完全一致。我该怎么办？

<StackPanel Orientation="Horizontal">
    <Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
        <Image Source="/Assets/images/left_arrow.png"/>
    </Button>
    <Button x:Name="next" Style="{StaticResource AppBarButtonStyle}"  Tapped="OnOptionItemTapped">
        <Image Source="/Assets/images/right_arrow.png"/>
    </Button>
</StackPanel>

最后将是“关闭”按钮。我想它有点完美了吗？：

<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>

现在截图显示它的外观以及我希望它看起来如何：

这是这样的：

这就是我想要的方式：

我知道我可以改变弹出窗口的高度。但是当我改变高度时，一些东西消失了（例如，当弹出高度太低时，关闭Botton将不可见，因为它太远了。）

对不起，很长的帖子。我希望有人可以帮助我。

Answer 1

你应该能够使用Grid与三个RowDefinitions。像这样的东西：

<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
    <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
                Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                BorderThickness="2" Width="300" Height="350">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <!-- row 1 -->
            <StackPanel Orientation="Horizontal">
                <TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
                <Button x:Name="firstSearch"  Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
                    <Image Source="Assets/images/view_search.png"/>
                </Button>
            </StackPanel>

            <!-- row 2 -->
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                        <Image Source="/Assets/images/left_arrow.png"/>
                    </Button>
                    <Button x:Name="next" Style="{StaticResource AppBarButtonStyle}"  Tapped="OnOptionItemTapped">
                        <Image Source="/Assets/images/right_arrow.png"/>
                    </Button>
                </StackPanel>
                <TextBlock Grid.Column="1" HorizontalAlignment="Center">
                    <Run x:Name="MyRun" Text=""/>
                </TextBlock>
            </Grid>

            <!-- row 3 -->
            <Button Grid.Row="2" 
                    Content="Close" Click="ClosePopupClicked" 
                    HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
        </Grid>
    </Border>
</Popup>

您可以使用Margin属性调整控件之间的空间。