我不明白 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>

最后是 "Close" 按钮。我想它已经很完美了？:

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

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

是这样的：

这就是我想要的样子：

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

抱歉这么久 post。我希望有人能帮助我。

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 属性在控件之间调整 space。

我不明白 xaml 对齐方式

I dont understand xaml alignment

c#

xaml

alignment

uwp

uwp-xaml