CODEWITHSUNDEEP
xamlwindows-10uwpuwp-xaml
user3911053
user3911053

Reputation:

Horizontal / Vertical Alignment Not Working in RelativePanel

I am trying to create a RelativePanel (for reflow purposes) with two Image's and a StackPanel in it. When in a "small screen" view, I want it to lay out vertically in a column: Image, StackPanel, Image. It does this just fine, but the problem is that the StackPanel has a height of 0, so the bottom Image is smack up against it. I want the Image to snap to the bottom of the screen. However, VerticalAlignment="Bottom" refuses to work. After a little more testing, I've found that HorizontalAlignment doesn't work, either. Does aligning not work properly in a RelativePanel? Or is there a special way to do it?

Here is the full 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>

Upvotes: 1

Views: 1539

Answers (1)

Vijay Chavda
Vijay Chavda

Reputation: 862

Check out this reference for various Attached Properties of Relative Panel, that will help you do things like alignments.

You can do basic Horizontal alignments this way:

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

And above code will show the RelativePanel something like this:

Alignment in RelativePanel

Upvotes: 1

Related Questions