I am trying to build Windows-10(UWP) app. My app has 4 buttons which appear at the bottom of the screen.
Button1, 2 & 4 are in their intended position. I want to place Button3 in between Button2 & Button4. How can I achieve that with RelativePanel in UWP?
My xaml code snippet for Button3 is
<Button Name="BtnTextSearchLaunch" Content="Text Search" RelativePanel.AlignVerticalCenterWith="Button2" Width="60" Background="#FF291313" Height="30" RelativePanel.RightOf="Button2" >
<Button.Template>
<ControlTemplate>
<Image Source="/Assets/textSearch@2x.png"/>
</ControlTemplate>
</Button.Template>
</Button>
I can place Button3 in the required position by specifying the position as in Margin="a,b,c,d", but that doesnt work well if I run the app on mobile. Hence I want to achieve this with RelativePanel, since that would scale the UI dynamically & give me the ability to deploy my app on Local Machine as well as Mobile.
<Grid HorizontalAlignment="Stretch" >
<RelativePanel VerticalAlignment="Center" HorizontalAlignment="Stretch" >
<Button x:Name="btn1" Content="btn1" RelativePanel.AlignLeftWithPanel="True" HorizontalAlignment="Left" />
<Button x:Name="btn2" Content="btn2" RelativePanel.AlignHorizontalCenterWithPanel="True" HorizontalAlignment="Center" />
<Button x:Name="btn3" Content="btn3" RelativePanel.RightOf="btn2" RelativePanel.LeftOf="btn4" HorizontalAlignment="Center" />
<Button x:Name="btn4" Content="btn4" RelativePanel.AlignRightWithPanel="True" HorizontalAlignment="Right" />
</RelativePanel>
</Grid>
As you can see from the solution you just need to make sure you place the button relative to both the btn2 and btn4 and don't forget to specify HorizontalAlignment="Center"
.