作者：啊哈哈 | 来源：互联网 | 2023-10-10 17:01
RelativePanel也是Win10UWP新增的控件，和上篇提到的SplitView一样在UWP的UI布局起到非常重要的作用。说句实在话，这货其实就是为了UWP的AdaptiveUI而特意
RelativePanel也是Win10 UWP新增的控件，和上篇提到的SplitView一样在UWP的UI布局起到非常重要的作用。说句实在话，这货其实就是为了UWP的Adaptive UI而特意增加的，由于他的功能和DockPanel有相当的重叠，以至于DockPanel被从Win10 SDK中被撸掉了……太惨了……
为什么说RelativePanel可以替代DockPanel，我们可以先从几个比较重要的属性看起：AlignLeftWithPanel,AlignRightWithPanel,AlignTopWithPanel,AlignBottomWithPanel。这几个属性如果是True的话，看上去的效果分明就是原先的DockPanel.Left,Right,Top,Bottom。我们先来看原先可以用DockPanel实现的下图，采用RelativePanel是如何编写的：
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<Button x:Name="ButtonHamburger" FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE700;" RelativePanel.AlignLeftWithPanel="True">Button>
<TextBlock Text="类别" RelativePanel.RightOf="ButtonHamburger" RelativePanel.AlignVerticalCenterWith="ButtonHamburger" Margin="10,0,0,0">TextBlock>
<Button FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE11A;" RelativePanel.LeftOf="ButtonAdd"/>
<Button x:Name="ButtonAdd" FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE710;" RelativePanel.AlignRightWithPanel="True"/>
RelativePanel>
RelativePanel中共有三个Button，一个TextBlock。分别靠左右对齐，用到了RelativePanel的几个附加属性：AlignLeftWithPanel，RightOf，LeftOf，AlignRightWithPanel。这里还有一点要注意一下，TextBlock为了实现纵向的居中对齐，使用了AlignVerticalCenterWith，有兴趣的同学可以试一下，在RelativePanel里VerticalAlignment优先级较低，仅在空间不足以显示控件时才起到居中对齐的作用。
有的童鞋会说以上的效果即使用Grid也是可以实现的，话是没有错啦，但在UWP开发中，RelativePanel一般都是要配合AdaptiveTrigger来实现自适应布局的，比如下面两张图对比：
在平板或者桌面模式，采用左右的菜单布局，而在手机则变成上下菜单布局，在UWP中实现这种动态变化的效果，完全可以通过纯XAML来实现：
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="401" />
VisualState.StateTriggers>
VisualState>
<VisualState >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RelativeNavigation.(RelativePanel.AlignTopWithPanel)" Value="False">Setter>
<Setter Target="RelativeNavigation.(RelativePanel.AlignRightWithPanel)" Value="True">Setter>
<Setter Target="ButtonHome.(RelativePanel.AlignTopWithPanel)" Value="False">Setter>
<Setter Target="ButtonHome.(RelativePanel.AlignLeftWithPanel)" Value="True">Setter>
<Setter Target="ButtonMessage.(RelativePanel.Below)" Value="">Setter>
<Setter Target="ButtonMessage.(RelativePanel.RightOf)" Value="ButtonHome">Setter>
<Setter Target="ButtonAdd.(RelativePanel.Below)" Value="">Setter>
<Setter Target="ButtonAdd.(RelativePanel.RightOf)" Value="ButtonMessage">Setter>
<Setter Target="ButtonFind.(RelativePanel.Below)" Value="">Setter>
<Setter Target="ButtonFind.(RelativePanel.RightOf)" Value="ButtonAdd">Setter>
<Setter Target="ButtonMe.(RelativePanel.Below)" Value="">Setter>
<Setter Target="ButtonMe.(RelativePanel.RightOf)" Value="ButtonFind">Setter>
<Setter Target="GridContent.(RelativePanel.AlignBottomWithPanel)" Value="False">Setter>
<Setter Target="GridContent.(RelativePanel.AlignLeftWithPanel)" Value="True">Setter>
<Setter Target="GridContent.(RelativePanel.AlignBottomWith)" Value="RelativeNavigation">Setter>
VisualState.Setters>
VisualState>
VisualStateGroup>
VisualStateManager.VisualStateGroups>
<RelativePanel x:Name="RelativeNavigation" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" Background="LightGray">
<Button x:Name="ButtonHome" FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE10F;" RelativePanel.AlignTopWithPanel="True"/>
<Button x:Name="ButtonMessage" FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE119;" RelativePanel.Below="ButtonHome"/>
<Button x:Name="ButtonFind" FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE11A;" RelativePanel.Below="ButtonMessage"/>
<Button x:Name="ButtonMe" FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE13D;" RelativePanel.Below="ButtonFind"/>
<Button x:Name="ButtonAdd" FontFamily="{ThemeResource SymbolThemeFontFamily}" Content="&＃xE710;" Background="Orange" RelativePanel.Below="ButtonMe"/>
RelativePanel>
<Grid x:Name="GridContent" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" RelativePanel.RightOf="RelativeNavigation" >
<TextBlock Text="我是一个水印" Foreground="LightGray" VerticalAlignment="Center" HorizontalAlignment="Center">TextBlock>
Grid>
RelativePanel>
看上去啰里啰唆写了一大堆，主要还是为了展示RelativePanel的用法，并不是最优的写法，如果能提供各位一丝丝的灵感，那俺就很满意了。
京公网安备 11010802041100号