SemanticZoom配合GridView组件的使用关键点

1，SemanticZoom 有两个重要属性默认值ZoomedInView（不设置的话，默认显示，包括分类名和分类成员）和ZoomedOutView(这个是缩小后的目录，只要包括分类名，点击跳到对应分类位置)。

2，绑定数据使用CollectionViewSource

要注意：1)IsSourceGrouped属性一定要设置为true，2）ItemsPath设置为child的名字，3）ZoomedInView和CollectionViewSource的View属性绑定，ZoomedOutView和View.CollectionGroups属性绑定。

代码如下：

CollectionViewSource ViewSource = new CollectionViewSource();
            ViewSource.IsSourceGrouped = true;
            ViewSource.ItemsPath = new PropertyPath("Datas");//对应Datas属性
            ViewSource.Source = GetItems();//所有的数据

            // 绑定数据
            ViewDetails.ItemsSource = ViewSource.View; // 全部数据
            ViewSummary.ItemsSource = ViewSource.View.CollectionGroups; // 关联的组数据集合
///绑定的对象类
public class Source
        {
            private string _Title;
            public string Title
            {
                get { return _Title; }
                set { _Title = value; }
            }
            private List<Data> _Datas;//不一定是Data类，可以是别的类
            public List<Data> Datas
            {
                get { return _Datas; }
                set { _Datas = value; }
            }
        }
public class Data
        {
            private string _Name;
            public string Name
            {
                get { return _Name; }
                set { _Name = value; }
            }
        }

3，模版的绑定问题。

ZoomedOutView可以简单的设置ItemTemplate模版即可，但是要注意，绑定的对象不是原来的值了。

不如原来的绑定为 {Binding Title}现在应该改为 {Binding Group.Title}，Group对象为View（View.CollectionGroups）自动生成的对象。

ZoomedInView的子模版即ItemTemplate同ZoomedOutView一样。主要的不同在于GridView.GroupStyle。

GridView.GroupStyle有三个重要属性：HeaderTemplate(即分类名{Binding Title}不用加 Group)，Panel（设置子元素的排布），ContainerStyle（一个分类对应的模版,可以不自定义）

ContainerStyle必须包含两个重要的对象：header(下面的ContentPresenter )和items(ItemsControl 注意它的绑定{Binding GroupItems}这个是写死的由View决定)。

整个模版xaml如下,注意标红的地方：

<SemanticZoom HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center" Width="auto" Height="auto">
            <SemanticZoom.ZoomedInView>
                <GridView x:Name="ViewDetails" Width="1920" Height="1080" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
                    <!--分组后，details 的数据模板-->
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="#022a56" Width="200" Height="65">
                                <TextBlock TextWrapping="Wrap" FontSize="16" Foreground="Red" Padding="5 0"  HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Name}"/>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <!--分组的样式-->
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <!--分组后，header 的数据模板-->
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Title}" FontSize="26.67" Height="30" Foreground="Yellow" Margin="0 0 0 20" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <!--分组后，每组数据（包括 header 和 details）的样式-->
                            <GroupStyle.ContainerStyle>
                                <Style TargetType="GroupItem">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="GroupItem">
                                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                                    <Grid>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="Auto"/>
                                                            <RowDefinition Height="*"/>
                                                        </Grid.RowDefinitions>
                                                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
                                                        <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
                                                    </Grid>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </GroupStyle.ContainerStyle>
                            <!--分组后，每组数据（包括 header 和 details）的 panel-->
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Horizontal" Margin="0 0 50 0" ItemHeight="75"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                    <!--整体数据（一组数据算一个元素）的 panel-->
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="ViewSummary" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
                    <!--分组后，details 的数据模板-->
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="#022a56" Width="200" Height="65">
                                <TextBlock TextWrapping="Wrap" FontSize="16" Foreground="Red" Padding="5 0"  HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Group.Title}"/>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

秒客网

SemanticZoom配合GridView组件的使用关键点

相关文章