roryok
roryok

Reputation: 9645

How do I create a two column layout using xaml RelativePanel?

I'd really like to use RelativePanel in a UWP app I'm writing, to simplify visual state.

This is what I want

enter image description here

I've tried to achieve this with the following XAML:

<RelativePanel>

    <TextBlock x:Name="Title" Height="50" Margin="15" FontSize="24"
        RelativePanel.AlignTopWithPanel="True" 
        RelativePanel.AlignLeftWithPanel="True" 
        RelativePanel.AlignRightWithPanel="True">
    </TextBlock>

    <TextBox x:Name="Editor" Margin="15" Padding="20" HorizontalAlignment="Stretch" 
        RelativePanel.AlignLeftWithPanel="True" 
        RelativePanel.Below="Title" 
        RelativePanel.RightOf="FileList">
    </TextBox>  

    <ListView x:Name="FileList" HorizontalAlignment="Stretch" Margin="15"
        RelativePanel.AlignRightWithPanel="True" 
        RelativePanel.Below="Title">
    </ListView>

</RelativePanel>

This isn't working. Editor does not stretch. If I set Editor to RelativePanel.AlignRightWith="FilesList", it stretches past files list and fills the window.

Is there any way to do what I want with RelativePanel? Please don't post suggestions on how to do this in Grid, I can already do that - I want to use RelativePanel in this case

Upvotes: 0

Views: 216

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Your Editor control should have -

RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.LeftOf="FileList"
RelativePanel.AlignBottomWithPanel="True"

Note it should be LeftOf, not RightOf. You will also need AlignBottomWithPanel set to True.

Upvotes: 1

Related Questions