Win8中缩放视图(SemanticZoom控件)
1.首先来说一下SemanticZoom控件是什么？
SemanticZoom控件可以让用户缩放具有相同内容的两个不同视图。其中有一个是主视图。另外一个视图可以让用户进行快速导航。例如，当用户查看地址簿时，用户可以放大某个字母以查看与该字母相关的内容。还有其他等等的一些例子。
2.如何使用SemanticZoom控件
SemanticZoom控件需要包含两个其它控件(GridView或ListView)：一个控件提供放大视图，另外一个提供缩小视图。
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<!-- 在这里放置GridView(或ListView)以表示放大视图 -->
<GridView/>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<!-- 在这里放置GridView(或ListView)以表示缩小视图 -->
<GridView/>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>3.示例如下 一个省市关联。外视图为省份的列表。内部为城市列表的相关信息。
此为两个图的效果。
接下来我们来看一下数据源。
Province[] Pros = {
new Province{ProID=1,Name="山东省"},
new Province{ProID=2,Name="广东省"},
new Province{ProID=3,Name="湖北省"},
new Province{ProID=4,Name="广西省"}
};
////然后再添加几个省下面对应的城市的，随便来几个
City[] Citys = {
new City{CityID=11,ProID=1,CityName="威海市"},
new City{CityID=12,ProID=1,CityName="烟台市"},
new City{CityID=13,ProID=1,CityName="济南市"},
new City{CityID=21,ProID=2,CityName="广州市"},
new City{CityID=22,ProID=2,CityName="深圳市"},
new City{CityID=31,ProID=3,CityName="武汉市"},
new City{CityID=32,ProID=3,CityName="武昌市"},
new City{CityID=33,ProID=3,CityName="汉口市"},
new City{CityID=34,ProID=3,CityName="汉阳市"},
new City{CityID=35,ProID=3,CityName="宜昌市"},
new City{CityID=41,ProID=4,CityName="西宁市"},
new City{CityID=42,ProID=4,CityName="桂林市"}
};先准备数据，接下来通过linq将数据进行转换。
// 将省份和城市进行关联，对数据源进行分组，此处用到linq
var res = (from p in Pros
join c in Citys on p.ProID equals c.ProID
into g
select new
{
p.Name,
CityList=g.ToList()
}).ToList<dynamic>();4然后接下来要用到Windows.UI.Xaml.Data命名空间下的CollectionViewSource。
CollectionViewSource是专为数据绑定有UI视图互动而设的，尤其是对于要实现分组的情况下，更需要它。CollectionViewSource的几个重要的属性：
Source是设置分组后的数据源，数据源就是通过上面的Linq进行转换处理。
IsSourceGrouped属性指示是否允许分组，我试过只有设置允许分组才能看到前面的截图效果。
ItemsPath是分组后，组内部所包含列表的属性路径，即上面Linq中CityList.可以查看它的类型PropertyPath.
View属性就是获取其视图数据.
// 实例化CollectionViewSource对象
CollectionViewSource cvs = new CollectionViewSource();
cvs.IsSourceGrouped = true; //支持分组
// 分组后集合项的路径，本例中为CityList
cvs.ItemsPath = new PropertyPath("CityList");
// 设置数据来源，就是我们刚才分好组的动态列表
cvs.Source = res;
// 分别对两个视图进行绑定
gvList.ItemsSource = cvs.View.CollectionGroups;
lvlist.ItemsSource = cvs.View;这就是缩略视图绑定数据 其中gvList是GridView，绑定的是外部视图。lvlist是ListView 绑定内部视图。 当然如果对CollectionViewSource还是不太熟悉，那就多调试几次。
foreach (var item in cvs.View.CollectionGroups)
{
ICollectionViewGroup vg = (ICollectionViewGroup)item;
dynamic ent = vg.Group as dynamic;
}可以通过这个循环。总之我也不太清楚，不过多试几次多用几次就好了。
5.介绍一下刚学习到的一个值转换器。
首先需要定义转换器类，转换器要实现IValueConverter接口。其中Convert方法用于把绑定模型的属性类型转换为被绑定UI元素的数据类型，value为转换前数据把转换后数据以返回值形式返回。ConvertBack方法用于当TwoWay绑定的时候UI值发生变化反向修改Model属性值的时候做转换。如果不做TwoWay绑定可以简单抛出“未实现异常”即可。
namespace Zoom.Common
{
public class StrUtils : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
///此处value为Model中的数据,返回值为UI中的数据
return string.Format("中国 ：{0}", value);
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
///此处是有UI到Model中的转换
return null;
}
}
}在Xaml中进行调用
首先引用命名空间 xmlns:StrConverter="using:Zoom.Common"
<Page.Resources>
<StrConverter:StrUtils x:Name="strForMat"/>
<Style x:Key="gvStyle" TargetType="GridViewItem">
<Setter Property="Background" Value="YellowGreen"></Setter>
</Style>
</Page.Resources>然后在Page.Resources中调用此类，并做标识
<TextBlock Text="{Binding Path=Group.Name,Converter={StaticResource strForMat}}" FontSize="25" FontFamily="宋体"></TextBlock>再在绑定Model的UI控件上进行转换即可。
查看效果即可看到
腾讯云开发者
