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

发表于:2018-7-03 16:19  作者:UniversalAIPlatform   来源:博客园

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: 业务知识 UWP

  不知道有人注意过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>
  后台绑定测试数据:
  1         private void MainPage_Loaded(object sender, RoutedEventArgs e)
  2         {
  3             this.left.ItemsSource = Enumerable.Range(1, 10).ToList();
  4         }
  运行起来看看效果,有点乱啊,不急,我们慢慢调。
    

上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。

Python+Selenium大型电商项目(京东商城)实战直播,优惠名额抢占中>>
21/212>

评 论

论坛新帖

顶部 底部


建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海瀛东律师事务所 张楠律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2018, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道