开发者社区> nomasp> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【万里征程——Windows App开发】SemanticZoom视图切换

简介:
+关注继续查看

相信用过Windows Phone或者Windows 8/8.1/10的朋友对下面这张截图肯定不陌生。这就是通过SemanticZoom来实现的,当数据过多时,这种控件尤其适用。它有一个放大视图ZoomedInView和一个缩小试图ZoomedOutView,前者主要用来显示当前页面的详细信息,后者则致力于快速导航。

这里写图片描述

那么我就自己来动手实践咯,首先我们在XAML中添加大致的界面,就像画画要先画轮廓一样。

<Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Center" HorizontalAlignment="Center">   
            <SemanticZoom.ZoomedOutView>

            </SemanticZoom.ZoomedOutView>

            <SemanticZoom.ZoomedInView>

            </SemanticZoom.ZoomedInView>

        </SemanticZoom>
    </Grid>

然后分别在这两个视图中添加你想要加入的东西。这里的核心就是,ZoomedOutView和ZoomedInView都是使用的同一个CollectionViewSource对象作为自己的数据集的。而这个属性我们在上一节谈到过:【万里征程——Windows App开发】ListView&GridView之分组

我们先把后台代码写好。我就像一篇那样装模作样写一个类吧^_^

    public class Alarm
    {
        public string Title { get; set; }
        public DateTime AlarmClockTime { get; set; }
        public string Description { get; set; }         
    }

然后用一个函数来添加一大堆数据……一大堆数据。

private Alarm[] AddAlarmData()
{
     return new Alarm[]
     {
          new Alarm {Title="Alarm 1",AlarmClockTime=globalTime.AddHours(17),Description="First Alarm for Study" },
          new Alarm {Title="Alarm 2",AlarmClockTime=globalTime.AddHours(2),Description="Second Alarm for Study" },
         new Alarm {Title="Alarm 3",AlarmClockTime=globalTime.AddHours(7),Description="Third Alarm for Study" },
         new Alarm {Title="Alarm 4",AlarmClockTime=globalTime.AddHours(4),Description="4th Alarm for Study" },
         new Alarm {Title="Alarm 5",AlarmClockTime=globalTime.AddHours(5),Description="First Alarm for Fun" },
         new Alarm {Title="Alarm 6",AlarmClockTime=globalTime.AddHours(1),Description="First Alarm for Fun" },
         new Alarm {Title="Alarm 7",AlarmClockTime=globalTime.AddHours(15),Description="Second Alarm for Fun" },
         new Alarm {Title="Alarm 8",AlarmClockTime=globalTime.AddHours(9),Description="Third Alarm for Fun" },
         new Alarm {Title="Alarm 9",AlarmClockTime=globalTime.AddHours(20),Description="4th Alarm for Fun" },
         new Alarm {Title="Alarm 10",AlarmClockTime=globalTime.AddHours(14),Description="Second Alarm for Sleep" },
         new Alarm {Title="Alarm 11",AlarmClockTime=globalTime.AddHours(9),Description="First Alarm for Sleep" }
     };
}

因为我们最后要把放大视图变成缩小视图,记得缩小视图上面有一些ABCD之类的字母么,这里我们用的是时间,就分成中午晚上等好啦。就通过下面这样的一个函数来搞定。其用了一个键值对,用time作为参数。后面再将这些数据筛选出来,绑定到新添加的CollectionViewSource中。至于gridView1和gridView2是即将添加到XAML中,这里可以先不填,一回再补上。

Func<int, string> SwitchTime = (time) =>
{
    if (time <= 10 && time >= 6)
         return "上午";
    else if (time > 10 && time < 14)
         return "中午";
    else if (time >= 14 && time <= 20)
         return "下午";
    else
         return "晚上";      
};
var varTime = from t in AddAlarmData()
              orderby t.AlarmClockTime.Hour
              group t by SwitchTime(t.AlarmClockTime.Hour);
CollectionViewSource collectionVS = new CollectionViewSource();
collectionVS.IsSourceGrouped = true;
collectionVS.Source = varTime;
this.gridView1.ItemsSource = collectionVS.View.CollectionGroups;
this.gridView2.ItemsSource = collectionVS.View;

我们先来写主视图(也就是放大视图)。

<GridView x:Name="gridView2" IsSwipeEnabled="True" HorizontalAlignment="Center" VerticalAlignment="Center" ScrollViewer.IsHorizontalScrollChainingEnabled="False" Width="1800" Height="1000">
     <GridView.ItemTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" Background="White">
                  <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Foreground="Red"  FontFamily="Harrington"
Width="150" Height="100" FontSize="26" FontWeight="Light"/>
                  <TextBlock Text="{Binding AlarmClockTime}"  Foreground="Red" TextWrapping="Wrap" Width="150"  Height="100"      FontFamily="Harrington" FontSize="26" FontWeight="Light"/>
                  <TextBlock Text="{Binding Description}"  Foreground="Red" TextWrapping="Wrap" Width="150"  Height="100"       FontFamily="Harrington" FontSize="26" FontWeight="Light"/>
              </StackPanel>
          </DataTemplate>
      </GridView.ItemTemplate>
      <GridView.ItemsPanel>
           <ItemsPanelTemplate>
                <ItemsWrapGrid MaximumRowsOrColumns="8"/>
           </ItemsPanelTemplate>
      </GridView.ItemsPanel>
      <GridView.GroupStyle>
           <GroupStyle>
                 <GroupStyle.HeaderTemplate>
                      <DataTemplate>
                           <TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" Margin="12" FontSize="30" FontFamily="华文彩云" FontWeight="ExtraBold" />
                      </DataTemplate>
                 </GroupStyle.HeaderTemplate>
            </GroupStyle>
      </GridView.GroupStyle>
</GridView>

相信大家都能看得懂,另外稍后我会在截图中添加一些注释的哦。然后是缩小视图。

<GridView Name="gridView1" Background="Wheat" ScrollViewer.IsHorizontalScrollChainingEnabled="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="200">
    <GridView.ItemTemplate>
        <DataTemplate>
            <TextBlock Width="100" Height="100" Text="{Binding Group.Key}" FontFamily="华文行楷" FontWeight="Normal" FontSize="24" />
         </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
         <ItemsPanelTemplate>
              <ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="2"/>
          </ItemsPanelTemplate>
     </GridView.ItemsPanel>
     <GridView.ItemContainerStyle>
          <Style TargetType="GridViewItem">
              <Setter Property="Margin" Value="12" />
              <Setter Property="Padding" Value="3" />
              <Setter Property="BorderThickness" Value="1" />
              <Setter Property="Background" Value="Green"/>
          </Style>
     </GridView.ItemContainerStyle>
</GridView>

那么代码就到这里为止了,接下来自然就是截图了。

这里写图片描述

这里写图片描述

(这种图片如果看不清的话可以保存到电脑上再看。)

那么这篇博客就结束啦,再次感谢大家的支持!关于这些字体呢,大家可以看这篇:【万里征程——Windows App开发】使用华丽丽的字体

为使本文得到斧正和提问,转载请注明出处:
http://blog.csdn.net/nomasp

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web---创建Servlet的3种方式、简单的用户注册功能(1)
Web---创建Servlet的3种方式、简单的用户注册功能
40 0
《CUDA高性能并行计算》----第0章 本 书 导 读 0.1 什么是CUDA
欢迎阅读本书。本书的目标是让你亲身参与个人高性能计算(Personal High-Performance Computing,PHPC)。如果你跟随我们的CUDA世界之旅,只需一台基本的游戏级计算机,你就可以执行大规模并行计算并从中获益。
1881 0
推荐一下我的个人博客:业余草-www.xttblog.com
<p style="margin-top:15px; margin-bottom:15px; padding:8px; font-size:14px; color:white; font-family:宋体,Calibri; background-color:rgb(128,128,128)"><span style="line-height:28.8px">牢骚:</span></p> <p
1764 0
重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom
原文:重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom [源码下载] 重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom 作者:webabcd介绍重新想象 Windows 8 Store Apps ...
724 0
webapp开发时问题2-选点子和选创意与坚持
问题1:我要做什么? 问题1.2:这个创意都做的泛滥了,我还做吗? 问题1.3:这个东西国外已经火了,赶紧做吧,谁做谁火 开发APP是首先会遇到上面三个问题,我现在只做了一个APP,貌似也不会有很多人用,但我认为我的应用是个三好应用,满足3个条件 PS:这里的...
740 0
+关注
542
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载