UWP基础教程 - RelativePanel

在Windows10 UWP开发中,新增和改变了很多特性,这次给大家介绍下RelativePanel,这个控件其实和RelativeLayout基本一种使用方式,大大方便Android开发人员转行做UWP开发哈。

来看下官方的例子

<RelativePanel BorderBrush="Gray" BorderThickness="10"> 
<Rectangle x:Name="RedRect" Fill="Red" MinHeight="100" MinWidth="100"/> 
<Rectangle x:Name="BlueRect" Fill="Blue" MinHeight="100" MinWidth="100" RelativePanel.RightOf="RedRect" /> 
<!-- Width is not set on the green and yellow rectangles. It's determined by the RelativePanel properties. --> 
<Rectangle x:Name="GreenRect" Fill="Green" MinHeight="100" Margin="0,5,0,0" RelativePanel.Below="RedRect" RelativePanel.AlignLeftWith="RedRect" RelativePanel.AlignRightWith="BlueRect"/> 
<Rectangle Fill="Yellow" MinHeight="100" RelativePanel.Below="GreenRect" RelativePanel.AlignLeftWith="BlueRect" RelativePanel.AlignRightWithPanel="True"/</RelativePanel>

具体的用法大家可以参考下各个属性的介绍。

用法

描述

RelativePanel.Above

设置当前element为目标element的上方

RelativePanel.AlignBottomWith

设置当前element与目标element底部对齐

RelativePanel.AlignBottomWithPanel

设置当前element与RelativePanel底部对齐

RelativePanel.AlignHorizontalCenterWith

设置当前element与目标element水平中心对齐

RelativePanel.AlignHorizontalCenterWithPanel

设置当前element与RelativePanel水平中心对齐

RelativePanel.AlignLeftWith

设置当前element与目标element左边框对齐

RelativePanel.AlignLeftWithPanel

设置当前element与RelativePanel左边框对齐

RelativePanel.AlignRightWith

设置当前element与目标element右边框对齐

RelativePanel.AlignRightWithPanel

设置当前element与RelativePanel右边框对齐

RelativePanel.AlignTopWith

设置当前element与目标element顶部对齐

RelativePanel.AlignTopWithPanel

设置当前element与RelativePanel顶部对齐

RelativePanel.AlignVerticalCenterWith

设置当前element与目标element垂直中心对齐

RelativePanel.AlignVerticalCenterWithPanel

设置当前element与RelativePanel垂直中心对齐

RelativePanel.Below

设置当前element为目标element的下方

RelativePanel.LeftOf

设置当前element为目标element的左边

RelativePanel.RightOf

设置当前element为目标element的右边

这个控件相比Grid更加灵活,比较麻烦的地方是使用该控件布局需要对里面的子元素都加上{x:Name}扩展标记,对于我这种不爱命名的程序员,还是更喜欢用Grid。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网开发者交流社区

HTML超文本标记语言-基础标签整理

31140
来自专栏angularejs学习篇

jQuery 图片轮播的代码分离

以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号。

37820
来自专栏用户画像

图片 垂直居中

9320
来自专栏九彩拼盘的叨叨叨

移动端页面使用rem来做适配

rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位。 假设根元素的字体大小是10px, 则...

13830
来自专栏Android小菜鸡

自定义View学习之路(五)————彩虹环

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的彩虹环为例。开始系统的学习View的绘制。 彩虹环需求:

11220
来自专栏jiajia_deng

Qt 用画笔对图片实现马赛克效果

最近接了一个用 Qt 做跨平台截图工具的任务,主要功能有截图、绘制图案、马赛克、毛玻璃、文字能效果,其中马赛克功能时参考网上的文献并自己研究制作出来的,这里特意...

29110
来自专栏九彩拼盘的叨叨叨

Grid 布局写法示例

Grid 可以简便、完整、响应式地实现各种页面布局。它比 Flex 布局功能更强大。

8620
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:HoverBackColor属性的简单介绍

BarcodeButton、Button、CameraButton、ImageButton、OfflineCameraButton、OfflineVoiceRe...

9930
来自专栏cnblogs

深入理解及应用Position

position俗称定位,主要取值及作用如下: static 默认值。没有定位,出现在正常文档流中 absolute 绝对定位,相...

21160
来自专栏Python小屋

Python数据可视化案例一:自定义曲线频率、颜色与线型

下面的代码运行后,可以通过左侧的三组单选钮来设置正弦曲线的频率、颜色和线型,并根据新的设置来绘制正弦曲线,每次单击图形下方的按钮,由系统随机设置频率、颜色和线型...

349100

扫码关注云+社区

领取腾讯云代金券