SemanticZoom控件

SemanticZoom控件由相互关联的缩小视图和放大视图所组成,缩小视图用来显示内容的索引,放大视图可以用来显示内容的详细信息,用户可以根据阅读需要在两种视图之间自由切换。

在XAML文件中,SemanticZoom控件的用法如下所示:

<SemanticZoom ...>

<SemanticZoom.ZoomedOutView>

<!--添加缩小的视图内容-->

</SemanticZoom.ZoomedOutView>

<SemanticZoom.ZoomedInView>

<!--添加放大的视图内容-->

</SemanticZoom.ZoomedInView>

</SemanticZoom>

下面介绍一下SemanticZoom控件的几个常用属性:

  • IsZoomedInViewActive属性,获取或设置SemanticZoom控件的放大视图是否为活动视图。当属性值为True,放大视图为活动视图,运行程序首先显示的将是放大视图内容。当属性值为False,运行程序首先显示的是缩小视图内容。
  • ZoomedInView属性,获取或设置SemanticZoom控件的放大视图内容。
  • ZoomedOutView属性,获取或设置SemanticZoom控件的缩小视图内容。

介绍完常用属性,接着来看一下SemanticZoom控件的常用事件:

  • ViewChangeCompleted事件,当视图改变完成时触发。
  • ViewChangeStarted事件,当视图开始发生改变时触发。

接下来使用SemanticZoom控件设计一个可以显示放大视图和缩小视图的应用,在缩小视图中放置一个索引图片,而放大视图中将放置与缩小视图中的索引图片相关的详细展示图片。

新建一个Windows应用商店的空白应用程序项目,并命名为SemanticZoomDemo,在项目中添加一个名为"Images"的文件夹,并在此文件夹中添加6张蔬菜图片,其中1张用于表示蔬菜类别,另外5张表示与此类别相关的5种不同的蔬菜。双击打开MainPage.xaml文件,在Grid元素中添加如下代码。

<SemanticZoom IsZoomedInViewActive="False">

<SemanticZoom.ZoomedOutView>

张图片-->

<ListView VerticalAlignment="Center" Width="200" ScrollViewer.IsVerticalScrollChainingEnabled="False" HorizontalAlignment="Center">

<Image Source="Images/Vegetables.jpg" Width="180" Height="180"/>

</ListView>

</SemanticZoom.ZoomedOutView>

<SemanticZoom.ZoomedInView>

张图片-->

<ListView VerticalAlignment="Center" ScrollViewer.IsVerticalScrollChainingEnabled="False" HorizontalAlignment="Center">

<StackPanel Orientation="Horizontal">

<Image Source="Images/BaiCai.jpg" Width="80" Height="80"/>

<Image Source="Images/BoCai.jpg" Width="80" Height="80"/>

<Image Source="Images/QinCai.jpg" Width="80" Height="80"/>

<Image Source="Images/SuanMiao.jpg" Width="80" Height="80"/>

<Image Source="Images/YouCai.jpg" Width="80" Height="80"/>

</StackPanel>

</ListView>

</SemanticZoom.ZoomedInView>

</SemanticZoom>

在上面的代码中,添加了一个SemanticZoom控件并设置其IsZoomedInViewActive属性值为False,使SemanticZoom控件先展示缩小视图内容。在SemanticZoom控件的缩小视图元素SemanticZoom.ZoomedOutView内添加一个ListView控件,在ListView控件中放置一个显示蔬菜类别图片的Image控件。

在放大视图元素SemanticZoom.ZoomedInView内添加一个ListView控件,在ListView控件中添加五个表示具体蔬菜图片的Image控件,并使用StackPanel元素对这五个Image控件进行布局,定义StackPanel的Orientation属性值为Horizontal将五张图片以水平方式排列。

运行程序,在屏幕上首先以缩小视图显示蔬菜种类的图片,效果如图4-32所示。单击此图片将以放大视图显示五种不同蔬菜的图片,效果如图4-33所示,单击放大视图中右下角的缩小按钮,将切换回缩小视图。


图4-32 SemanticZoom控件的缩小视图 图4-33 SemanticZoom控件的放大视图

Win10系列:C#应用控件基础20的更多相关文章

  1. Win10系列:JavaScript 控件的使用

    向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...

  2. WPF从我炫系列4---装饰控件的用法

    这一节的讲解中,我将为大家介绍WPF装饰控件的用法,主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollView ...

  3. 【转】PyQt5系列教程(七)控件

    PyQt5系列教程(七)控件   软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...

  4. WPF 模仿 UltraEdit 文件查看器系列一 用户控件

    WPF 模仿 UltraEdit 文件查看器系列一 用户控件 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-10 章节: 起步 添加用户控件 ...

  5. C#控件系列--文本类控件

    C#控件系列--文本类控件         文本类控件主要包含Label.LinkLabel.Button.TextBox以及RichTextBox. Label 功能         Label用来 ...

  6. 重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree

    原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...

  7. 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试

    原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...

  8. WPF编游戏系列 之四 用户控件

    原文:WPF编游戏系列 之四 用户控件        在上一篇<WPF编游戏系列 之三 物品清单>中,对物品清单进行了演示,其中反复用到了同一组控件(如下图),而且 颜昌钢也指出在3.2. ...

  9. Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView、TTreeViewItem

    Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView.TTreeViewItem TScrollBox -> TCustomTreeView -> ...

随机推荐

  1. 7个管理和优化网站资源的 Python 工具

    前一篇:

  2. python使用grpc调用rpc接口

    proto文件: syntax = "proto3"; package coupon; // //message UnsetUseC2URequest { // int64 bid ...

  3. Servlet Analysis

    @WebServlet("/cdiservlet") //url映射 public class NewServlet extends HttpServlet { private M ...

  4. #WEB安全基础 : HTTP协议 | 0x8 HTTP的Cookie技术

    说道Cookie,你喜欢吃饼干吗? 这里的Cookie不是饼干=_= HTTP不对请求和响应的通信状态进行保存,所以被称为无状态协议,为了保持状态和协议功能引入了Cookie技术 Cookie技术在请 ...

  5. Oracle时间日期函数

    ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02   13:45:25为例)           Year:              yy two digits 两位年 ...

  6. MySQL8.0 优化

    参考 https://dev.mysql.com/doc/refman/8.0/en/insert-optimization.html https://dev.mysql.com/doc/refman ...

  7. CSS 层级选择器

    CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...

  8. Docker Weave 命令整理

    Docker Weave 命令整理 # 查看weave状态 weave status # 查看状态详情 weave status connections # 查看weave相互之间节点建立的关系 we ...

  9. Python 简单soket例子

      简单的soket例子 Python 2.0 客户端服务端传输 1.可发字符串,可发字节 bys类型 Python 3.0 客户端服务端传输 1.只能发bys,比特流的类型. 2.bys类型只能接收 ...

  10. Python socket文件传送md5校验

    soket_server import socket,os,hashlib server = socket.socket() server.bind(('0.0.0.0',9999)) server. ...