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控件上进行转换即可。

查看效果即可看到

示例代码链接