你的位置:首页 > ASP.net教程

[ASP.net教程]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决定)。

<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}"/>

整个模版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>