none
SemanticZoom的样式问题? RRS feed

  • 问题

  • 有三个问题无法解决,希望会的人帮忙解决下!谢谢了!

    1.在SemanticZoon中的GridView中设置ItemContainerStyle,运行时会直接报错。要如何设置SemanticZoon的InView里的GridView的样式?

    2.数据绑定后,显示总是和第一个分组的item个数有关。如果第一个分组只有三个选项,后面的分组即使超过三个也只会显示三个,这个要如何解决。

    3.SemanticZoon的显示,似乎只能横排或者竖排。如何让分组竖排排满后会自动换一列?

    我的模版如下:

    <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom" ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <SemanticZoom.ZoomedOutView>
                            <GridView Foreground="White" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                                <GridView.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock
                                    Text="{Binding Group.Title}"
                                    FontFamily="Segoe UI Light"
                                    FontSize="24"
                                    Foreground="Black" />
                                    </DataTemplate>
                                </GridView.ItemTemplate>
                                <GridView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
                                    </ItemsPanelTemplate>
                                </GridView.ItemsPanel>
                                <GridView.ItemContainerStyle>
                                    <Style TargetType="GridViewItem">
                                        <Setter Property="Margin" Value="4" />
                                        <Setter Property="Padding" Value="10" />
                                        <Setter Property="BorderBrush" Value="Gray" />
                                        <Setter Property="BorderThickness" Value="1" />
                                        <Setter Property="HorizontalContentAlignment" Value="Center" />
                                        <Setter Property="VerticalContentAlignment" Value="Center" />
                                    </Style>
                                </GridView.ItemContainerStyle>
                            </GridView>
                        </SemanticZoom.ZoomedOutView>
                        <SemanticZoom.ZoomedInView>
                            <GridView ItemsSource="{Binding Source={StaticResource source}}" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="GridView_SelectionChanged_1">
                                <GridView.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal"  HorizontalAlignment="Left" Background="White">
                                            <Image Source="../Assets/avatar_b.jpg" Height="60" Width="60" VerticalAlignment="Center" Margin="10"/>
                                            <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="0,10">
                                                <TextBlock TextWrapping="Wrap" Width="250" VerticalAlignment="Center" Foreground="Black" FontSize="24" Text="{Binding Name}" HorizontalAlignment="Left" FontFamily="Segoe UI" />
                                                <TextBlock TextWrapping="Wrap" Width="250" VerticalAlignment="Center" Foreground="Black" FontSize="24" Text="{Binding Mail}" HorizontalAlignment="Left" FontFamily="Segoe UI" />
                                            </StackPanel>
                                        </StackPanel>
                                    </DataTemplate>
                                </GridView.ItemTemplate>
                                <GridView.GroupStyle>
                                    <GroupStyle>
                                        <GroupStyle.HeaderTemplate>
                                            <DataTemplate >
                                                <TextBlock Text='{Binding Title}' Foreground="Gray" Margin="5,50,5,5" FontSize="18" FontFamily="Segoe UI Light" />
                                            </DataTemplate>
                                        </GroupStyle.HeaderTemplate>
                                        <GroupStyle.ContainerStyle>
                                            <Style TargetType="GroupItem">
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="GroupItem">
                                                            <StackPanel Orientation="Vertical">
                                                                <ContentPresenter Content="{TemplateBinding Content}" />
                                                                <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
                                                            </StackPanel>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </GroupStyle.ContainerStyle>
                                        <GroupStyle.Panel>
                                            <ItemsPanelTemplate>
                                                <VariableSizedWrapGrid Orientation="Vertical"/>
                                            </ItemsPanelTemplate>
                                        </GroupStyle.Panel>
                                    </GroupStyle>
                                </GridView.GroupStyle>
                                <GridView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapGrid Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </GridView.ItemsPanel>
                            </GridView>
                        </SemanticZoom.ZoomedInView>
                    </SemanticZoom>

    绑定的数据模版如下:

    ObservableCollection<Group> groups = new ObservableCollection<Group>()
                {
                    new Group(){
                        Title = "Group 1",
                        Items = new ObservableCollection<Item>(){
                            new Item(){Name="Name1",Mail="Mail1@mail.com"},
                            new Item(){Name="Name2",Mail="Mail2@mail.com"},
                            new Item(){Name="Name3",Mail="Mail3@mail.com"},
    
                        }
                    },
                    new Group(){
                        Title = "Group 2",
                        Items = new ObservableCollection<Item>(){
                         new Item(){Name="Name1",Mail="Mail1@mail.com"},
                            new Item(){Name="Name2",Mail="Mail2@mail.com"},
                            new Item(){Name="Name3",Mail="Mail3@mail.com"},
                        }
                    },
                    new Group(){
                        Title = "Group 3",
                        Items = new ObservableCollection<Item>(){
    
                         new Item(){Name="Name1",Mail="Mail1@mail.com"},
                            new Item(){Name="Name2",Mail="Mail2@mail.com"},
                            new Item(){Name="Name3",Mail="Mail3@mail.com"},
                            new Item(){Name="Name4",Mail="Mail4@mail.com"},
                            new Item(){Name="Name5",Mail="Mail5@mail.com"},
                            new Item(){Name="Name6",Mail="Mail6@mail.com"},
                        }
                    }
                };
                source.Source = groups;
                source.ItemsPath = new PropertyPath("Items");
                (semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = source.View.CollectionGroups;
            }
    
    public class Item
        {
            public string Name { get; set; }
            public string Mail { get; set; }
        }
        public class Group
        {
            public string Title { get; set; }
            public ObservableCollection<Item> Items { get; set; }
        }


    2012年8月31日 2:15

答案

  • 1, ZoomedInView的GridView是要分组显示的,所以你需要设置的是GroupStyle.ContainerStyle 而不是 GridView.ItemContainerStyle

    2, 跟

    <GroupStyle.Panel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </GroupStyle.Panel>

    有关。 你可以换成 VirtualizingStackPanel

    3, .SemanticZoon的显示,似乎只能横排或者竖排。如何让分组竖排排满后会自动换一列?

    具体元素怎么排列与其ItemsPanel 有关,你可以用VirtualizingStackPanel ,也可以用 VariableSizedWrapGrid , 别忘了这两个Panel有些属性比如,

    VirtualizingStackPanel.Orientation 方向性

    VariableSizedWrapGrid.MaximumRowsOrColumns 在一定方向上的最大数量,如果超过则换行。

    所以你可以设置这个属性来规定横向或者竖向最多多少,否则换行。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年8月31日 8:52
    版主

  • 1.GroupStyle.ContainerStyle 绑定的对象和GridView.ItemContainerStyle是否一样?在哪里绑定或者定义?

    不一样,一个是针对GroupItem的样式 一个是针对GridViewItem的样式。

    2, 如果 用了

    <GridView.ItemsPanel>
    	<ItemsPanelTemplate>
    		<VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="4"/>
    	</ItemsPanelTemplate>
    </GridView.ItemsPanel>

     默认每个分组的高度会变成一致,这样只能做到类似,不能做到完全和你要的一样。

    或者你就需要自己去实现自定义的Panel 来自己规定布局规则。

    People 的这个样式由于HTML5的布局灵活性可以实现。




    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us


    2012年9月3日 8:40
    版主

全部回复

  • 1, ZoomedInView的GridView是要分组显示的,所以你需要设置的是GroupStyle.ContainerStyle 而不是 GridView.ItemContainerStyle

    2, 跟

    <GroupStyle.Panel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </GroupStyle.Panel>

    有关。 你可以换成 VirtualizingStackPanel

    3, .SemanticZoon的显示,似乎只能横排或者竖排。如何让分组竖排排满后会自动换一列?

    具体元素怎么排列与其ItemsPanel 有关,你可以用VirtualizingStackPanel ,也可以用 VariableSizedWrapGrid , 别忘了这两个Panel有些属性比如,

    VirtualizingStackPanel.Orientation 方向性

    VariableSizedWrapGrid.MaximumRowsOrColumns 在一定方向上的最大数量,如果超过则换行。

    所以你可以设置这个属性来规定横向或者竖向最多多少,否则换行。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年8月31日 8:52
    版主
  • 谢谢!

    1.GroupStyle.ContainerStyle 绑定的对象和GridView.ItemContainerStyle是否一样?在哪里绑定或者定义?

    2.VariableSizedWrapGrid.MaximumRowsOrColumns 在一定方向上的最大数量,如果超过则换行。这个设置的是分组的数量。但是我想要的效果是这样的

    这样的效果要怎么实现?

    2012年8月31日 9:21
  • 这个很简单啊。。。gridview有两个itempanel。一个是groupstyle里面的,可以设置一列放几组,另外一个是gridview。itempanel,设置一组放几个item
    2012年9月1日 12:57

  • 1.GroupStyle.ContainerStyle 绑定的对象和GridView.ItemContainerStyle是否一样?在哪里绑定或者定义?

    不一样,一个是针对GroupItem的样式 一个是针对GridViewItem的样式。

    2, 如果 用了

    <GridView.ItemsPanel>
    	<ItemsPanelTemplate>
    		<VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="4"/>
    	</ItemsPanelTemplate>
    </GridView.ItemsPanel>

     默认每个分组的高度会变成一致,这样只能做到类似,不能做到完全和你要的一样。

    或者你就需要自己去实现自定义的Panel 来自己规定布局规则。

    People 的这个样式由于HTML5的布局灵活性可以实现。




    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us


    2012年9月3日 8:40
    版主
  • 谢谢!GroupStyle.ContainerStyle 这个的模版要怎么设置?能否给个模板或例子?
    2012年9月4日 3:14
  •                                     <GroupStyle.ContainerStyle>
                                            <Style TargetType="GroupItem">
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="GroupItem">
                                                            <StackPanel Orientation="Vertical">
                                                                <ContentPresenter Content="{TemplateBinding Content}" />
                                                                <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
                                                            </StackPanel>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </GroupStyle.ContainerStyle>
    

    这就是一个例子,一个GroupItem 要有个显示Group Title的地方,所以我们放一个 ContentPresenter  去展示分组标题, 还需要有一个显示每一项的地方,所以还需要一个 ItemsControl, 至于这两者怎么放置,你可以自定义。

     


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年9月4日 3:40
    版主
  • 谢谢!那定义Item鼠标移上去和选中样式呢?

    2012年9月4日 7:36