Win10系列:C#应用控件基础20
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的更多相关文章
- Win10系列:JavaScript 控件的使用
向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...
- WPF从我炫系列4---装饰控件的用法
这一节的讲解中,我将为大家介绍WPF装饰控件的用法,主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollView ...
- 【转】PyQt5系列教程(七)控件
PyQt5系列教程(七)控件 软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...
- WPF 模仿 UltraEdit 文件查看器系列一 用户控件
WPF 模仿 UltraEdit 文件查看器系列一 用户控件 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-10 章节: 起步 添加用户控件 ...
- C#控件系列--文本类控件
C#控件系列--文本类控件 文本类控件主要包含Label.LinkLabel.Button.TextBox以及RichTextBox. Label 功能 Label用来 ...
- 重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree
原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...
- 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...
- WPF编游戏系列 之四 用户控件
原文:WPF编游戏系列 之四 用户控件 在上一篇<WPF编游戏系列 之三 物品清单>中,对物品清单进行了演示,其中反复用到了同一组控件(如下图),而且 颜昌钢也指出在3.2. ...
- Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView、TTreeViewItem
Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView.TTreeViewItem TScrollBox -> TCustomTreeView -> ...
随机推荐
- 7个管理和优化网站资源的 Python 工具
前一篇:
- python使用grpc调用rpc接口
proto文件: syntax = "proto3"; package coupon; // //message UnsetUseC2URequest { // int64 bid ...
- Servlet Analysis
@WebServlet("/cdiservlet") //url映射 public class NewServlet extends HttpServlet { private M ...
- #WEB安全基础 : HTTP协议 | 0x8 HTTP的Cookie技术
说道Cookie,你喜欢吃饼干吗? 这里的Cookie不是饼干=_= HTTP不对请求和响应的通信状态进行保存,所以被称为无状态协议,为了保持状态和协议功能引入了Cookie技术 Cookie技术在请 ...
- Oracle时间日期函数
ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 ...
- MySQL8.0 优化
参考 https://dev.mysql.com/doc/refman/8.0/en/insert-optimization.html https://dev.mysql.com/doc/refman ...
- CSS 层级选择器
CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...
- Docker Weave 命令整理
Docker Weave 命令整理 # 查看weave状态 weave status # 查看状态详情 weave status connections # 查看weave相互之间节点建立的关系 we ...
- Python 简单soket例子
简单的soket例子 Python 2.0 客户端服务端传输 1.可发字符串,可发字节 bys类型 Python 3.0 客户端服务端传输 1.只能发bys,比特流的类型. 2.bys类型只能接收 ...
- Python socket文件传送md5校验
soket_server import socket,os,hashlib server = socket.socket() server.bind(('0.0.0.0',9999)) server. ...