C# 我不懂xaml对齐

所以我对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>

这部分是

搜索栏

和

搜索按钮

，应该完全对齐。我该怎么做

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

最后是“关闭”按钮。我想它已经有点完美了

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

现在是它的外观和我希望它的外观的屏幕截图：

事实就是这样：

这就是我想要的：

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

---

抱歉发了这么长的邮件。我希望有人能在这里帮助我。

您应该能够使用带有三个

行定义的
网格。大概是这样的：

<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
属性调整控件之间的间距。
这似乎是
网格的工作。。。在您的边框内，我使用了一个网格。对于更复杂的布局，它们更容易一些，但是更详细
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>

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