时间戳

首页 > 解决方案 > 我不明白 xaml 对齐方式

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>

这部分稍后将是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 将不可见，因为它太低了，而弹出高度太低了）。

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

标签： c#xamluwpalignmentuwp-xaml

解决方案

您应该能够使用 aGrid和三个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属性调整控件之间的间距。

推荐阅读