用UWP实现一个和win10设置页面类似的布局

不知道有人注意过Win10中的设置页面的布局没？那个页面会根据不同的窗口宽度来调节显示的内容，甚至来后退按钮的操作在不同的宽度也是不同的，看图：

是不是有点cool呢，这篇文章，我们就来做一个类似的布局。

首先将我们需要展示出来的东西都添加到页面上，页面如下：

 1   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 2     <Grid.RowDefinitions> 3       <RowDefinition Height="30"></RowDefinition> 4       <RowDefinition Height="*"></RowDefinition> 5     </Grid.RowDefinitions> 6  7     <!--大标题，后退按钮--> 8     <StackPanel Grid.Row="0" Orientation="Horizontal" x:Name="fullPanel"> 9       <Button Content="Back" x:Name="full_back" Click="full_back_Click"></Button>10       <TextBlock Margin="10, 0, 0, 0">这是一个大标题</TextBlock>11     </StackPanel>12 13 14     <!--副标题，后退按钮，只在desktop上宽度小于500时显示-->15     <StackPanel Grid.Row="0" Orientation="Horizontal" x:Name="detailPanel" >16       <Button x:Name="detail_back" Content="Back" Click="detail_back_Click"></Button>17       <TextBlock Margin="10, 0, 0, 0">这是一个副标题</TextBlock>18     </StackPanel>19 20     <!--内容-->21     <RelativePanel Grid.Row="1">22       <!--左半部分的list-->23       <ListView x:Name="left" IsItemClickEnabled="True" ItemClick="left_ItemClick" SelectedIndex="-1">24         <ListView.ItemTemplate>25           <DataTemplate>26             <StackPanel Margin="10">27               <TextBlock>28                 <Run Text="Item: "></Run>29                 <Run Text="{Binding}"></Run>30               </TextBlock>31             </StackPanel>32           </DataTemplate>33         </ListView.ItemTemplate>34       </ListView>35 36       <!--右半部份的详细信息-->37       <Grid x:Name="right" >38         <StackPanel>39           <TextBlock>队长，别开枪。。</TextBlock>40           <TextBlock >41             <Run Text="Item:"></Run>42             <Run Text="{Binding SelectedItem, ElementName=left}" Foreground="Red"></Run>43           </TextBlock>44         </StackPanel>45       </Grid>46     </RelativePanel>47   </Grid>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：用UWP实现一个和win10设置页面类似的布局

关键词：win