像 UWP People App 一样的语义缩放答案

【问题标题】：Semantic Zoom Like UWP People App像 UWP People App 一样的语义缩放
【发布时间】：2017-11-08 16:30:09
【问题描述】：

我正在开发 UWP 应用。我想在我的应用程序中实现语义缩放。我有一组分组数据，并按字母顺序排序。我想在 ZoomOut 视图中表示我的组标题，就像 Windows 10 的人员应用程序所表示的那样。这是一张可以帮助您理解我的概念的图片。

我该怎么做？
如何防止用户点击 D、J、K、L 项目（因为我 GridView的ZoomInView中没有D，J，K，L的任何项目。

这是我构建的示例。我需要进一步的帮助来实现高级语义缩放。

Semantic Zoom Sample

【问题讨论】：

标签： c# uwp

【解决方案1】：

我该怎么做？

如果您想按字母从 A ~ Z 对组标题进行排序。

您只需在将组绑定到 ListView 的 ItemsSource 之前对其进行排序。

var gpData = Contacts.GroupBy(a => a.Name[0], (key, con) => new GroupData() { HeaderTitle = key, Items = con.ToList() }).OrderBy(o=>o.HeaderTitle);

如何防止用户点击 GridView 的 D、J、K、L 项（因为我在 ZoomInView 中没有 D、J、K、L 项）。

基本原理是需要将ListViewItem的IsEnabled属性设置为false。

<SemanticZoom.ZoomedOutView>
            <ListView ItemsSource="{x:Bind CVS.View.CollectionGroups}" SelectionMode="None" GotFocus="ListView_GotFocus">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="IsEnabled" Value="False"></Setter>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="wuxdata:ICollectionViewGroup">
                        <TextBlock Text="{x:Bind Group.(data:GroupData.HeaderTitle)}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
</SemanticZoom.ZoomedOutView>

对于您的情况，您需要动态设置IsEnable 属性。

【讨论】：

非常感谢您的回复