Windows 8+VS 开发教程SemanticZoom缩放视图

nice熟悉的街角

nice熟悉的街角

2016-02-19 19:11

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是Windows 8+VS 开发教程SemanticZoom缩放视图,一起来学习了解下吧!

在Windows 8中SemanticZoom缩放视图支持对GridView和ListView控件的视图效果进行缩放,它提供一个详细信息视图(ZoomedInView)以让用户查看详细信息,另外提供一个缩小索引视图(ZoomedOutView)让用户快速定位想要查看信息的大概范围。

一.想要实现这种效果我们需要使用SemanticZoom控件和CollectionViewSource控件配合使用:

SemanticZoom控件:

SemanticZoom.ZoomedOutView

!--此处填充缩小索引视图的GridView,一般情况下绑定Group.Title--

/SemanticZoom.ZoomedOutView

SemanticZoom.ZoomedInView

!--此处填充平常普通的GridView,显示详细信息--

/SemanticZoom.ZoomedInView

CollectionViewSource是一个和前台UI控件进行互动的集合源。

Source:源数据绑定属性

IsSourceGrouped:是否允许分组

View:获取当前与 CollectionViewSource 的此实例关联的视图对象

View.CollectionGroups:返回该视图关联的所有集合组。

二.现在通过一个实例来看如何使用SemanticZoom实现缩放视图,本实例接前一篇文章实例。

1.前台设置CollectionViewSource控件

Grid.Resources

CollectionViewSourcex:Name="itemcollectSource"IsSourceGrouped="true"ItemsPath="ItemContent"/

/Grid.Resources

2.前台绘制ZoomedInView视图和ZoomedOutView视图GridView

SemanticZoomx:Name="semanticZoom"VerticalAlignment="Center"

SemanticZoom.ZoomedOutView

GridViewScrollViewer.IsHorizontalScrollChainingEnabled="False"

GridView.ItemTemplate

DataTemplate

!--注意此处绑定的是实体集的GroupTitle属性--

TextBlockText="{BindingGroup.GroupTitle}"FontSize="24"/

/DataTemplate

/GridView.ItemTemplate

GridView.ItemsPanel

ItemsPanelTemplate

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/diannaorumen/)

WrapGridItemWidth="150"ItemHeight="75"MaximumRowsOrColumns="1"VerticalChildrenAlignment="Center"/

/ItemsPanelTemplate

/GridView.ItemsPanel

GridView.ItemContainerStyle

StyleTargetType="GridViewItem"

SetterProperty="Margin"Value="4"/

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/diannaorumen/)

SetterProperty="Padding"Value="10"/

SetterProperty="BorderBrush"Value="Gray"/

SetterProperty="BorderThickness"Value="1"/

SetterProperty="HorizontalContentAlignment"Value="Center"/

SetterProperty="VerticalContentAlignment"Value="Center"/

/Style

/GridView.ItemContainerStyle

/GridView

/SemanticZoom.ZoomedOutView

SemanticZoom.ZoomedInView

!--设置ScrollViewer.IsHorizontalScrollChainingEnabled="False"--

GridViewName="gv_Item"ItemsSource="{BindingSource={StaticResourceitemcollectSource}}"

SelectedItem="{BindingItemContent,Mode=TwoWay}"ScrollViewer.IsHorizontalScrollChainingEnabled="False"

Margin="20,140,40,20"IsSwipeEnabled="True"

GridView.ItemTemplate

DataTemplate

GridWidth="250"Height="200"Background="#33CCCCCC"

Grid.ColumnDefinitions

ColumnDefinitionWidth="110"/ColumnDefinition

ColumnDefinition/ColumnDefinition

/Grid.ColumnDefinitions

ImageGrid.Column="0"Margin="5,0,0,0"Source="{BindingImageUrl}"Stretch="None"/Image

TextBlockGrid.Column="1"Margin="15,15,0,0"Foreground="Black"Text="{BindingtxtTitle}"

FontWeight="Bold"FontSize="16"TextWrapping="Wrap"/

TextBlockGrid.Column="1"Margin="15,40,0,0"Foreground="Black"Text="{BindingtxtContent}"

FontWeight="Light"FontSize="14"TextWrapping="Wrap"/

/Grid

/DataTemplate

/GridView.ItemTemplate

GridView.ItemsPanel

ItemsPanelTemplate

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/diannaorumen/)

VariableSizedWrapGridOrientation="Vertical"MaximumRowsOrColumns="3"/

/ItemsPanelTemplate

/GridView.ItemsPanel

GridView.GroupStyle

GroupStyle

GroupStyle.HeaderTemplate

DataTemplate

GridMargin="1,0,0,6"

ButtonAutomationProperties.Name="组名称"Content="{BindingGroupTitle}"/

/Grid

/DataTemplate

/GroupStyle.HeaderTemplate

GroupStyle.Panel

ItemsPanelTemplate

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/diannaorumen/)

VariableSizedWrapGridOrientation="Vertical"Margin="0,0,50,0"/

/ItemsPanelTemplate

/GroupStyle.Panel

/GroupStyle

/GridView.GroupStyle

/GridView

/SemanticZoom.ZoomedInView

/SemanticZoom

展开更多 50%)
分享

猜你喜欢

Windows 8+VS 开发教程SemanticZoom缩放视图

电脑入门
Windows 8+VS 开发教程SemanticZoom缩放视图

AutoCAD如何缩放视图

cad教程 autocad教程 CAD
AutoCAD如何缩放视图

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AutoCAD2024缩放视图如何使用

cad教程 autocad教程 CAD
AutoCAD2024缩放视图如何使用

视图的缩放的完整论述

C语言教程 C语言函数
视图的缩放的完整论述

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Windows 8系统下ATI显卡如何调整缩放?

电脑入门
Windows 8系统下ATI显卡如何调整缩放?

Windows8系统下ATI显卡如何调整缩放

windows系统
Windows8系统下ATI显卡如何调整缩放

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Java技巧:实例讲解Servlet的图象处理

Java技巧:实例讲解Servlet的图象处理

本机游戏怎么添加到Win10 Xbox中

本机游戏怎么添加到Win10 Xbox中
下拉加载更多内容 ↓