Question

我正在尝试创建一个RelativePanel（用于重排），其中包含两个Image和一个StackPanel。当在＆＃34;小屏幕＆＃34;查看，我希望它在列中垂直排列：Image，StackPanel，Image。它做得很好，但问题是StackPanel的高度为0，因此底部Image会对它产生影响。我希望Image能够捕捉到屏幕底部。但是，VerticalAlignment="Bottom"拒绝工作。经过一些测试后，我发现HorizontalAlignment也不起作用。对齐在RelativePanel中无法正常工作吗？或者有一种特殊的方法吗？

这是完整的XAML：

<RelativePanel>
    <Image Width="100" x:Name="AppleImage" Source="/Assets/Images/apple.png" Margin="10" Tapped="Add_Apple" VerticalAlignment="Center"/>
    <StackPanel x:Name="TotalStackPanel" Margin="10" Orientation="Vertical" HorizontalAlignment="Center">
        <TextBlock Text="Total" Margin="10" HorizontalAlignment="Center"/>
        <GridView x:Name="TotalFruitGrid" SelectionChanged="Remove_Fruit">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Path=image.Source}" Height="50"/>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </StackPanel>
    <Image Width="100" x:Name="OrangeImage" Source="/Assets/Images/orange.png" Margin="10" Tapped="Add_Orange" VerticalAlignment="Bottom"/>
</RelativePanel>

Answer 1

查看this reference了解相对面板的各种附加属性，这将有助于您进行对齐等操作。

您可以这样做基本的水平对齐：

<RelativePanel Background="Black">
    <Rectangle x:Name="RedRect" Width="100" Height="100" 
               RelativePanel.AlignRightWithPanel="True" 
               Fill="Red" />
    <Rectangle x:Name="BlueRect" Height="100"
               RelativePanel.AlignLeftWithPanel="True" 
               RelativePanel.AlignRightWithPanel="True" 
               Fill="Blue"
               RelativePanel.Below="RedRect"/>
    <Rectangle x:Name="YellowRect" Width="100" Height="100" 
               RelativePanel.AlignLeftWithPanel="True" 
               RelativePanel.Below="BlueRect"
               Fill="Yellow" />
</RelativePanel>

以上代码将显示RelativePanel之类的内容： Alignment in RelativePanel

水平/垂直对齐在RelativePanel中不起作用

1 个答案: