none
关于GRIDVIEW样式的问题 RRS feed

答案

  • 语义缩放有例子的啊:  http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

    好吧,给你写个简单明了的例子:

    XAML:

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <CollectionViewSource x:Name="source" IsSourceGrouped="True"/>
        </Page.Resources>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <SemanticZoom x:Name="semanticZoom">
                <SemanticZoom.ZoomedOutView>
                    <GridView>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Background="Blue">
                                    <TextBlock Text="{Binding Group.Title}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="3"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <GridView ItemsSource="{Binding Source={StaticResource source}}">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Background="Blue">
                                    <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Title}" Foreground="Gray" Margin="5" FontSize="40"/>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.ContainerStyle>
                                    <Style TargetType="GroupItem">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="GroupItem">
                                                    <StackPanel Orientation="Vertical">
                                                        <ContentPresenter Content="{TemplateBinding Content}" />
                                                        <ItemsControl ItemsSource="{Binding GroupItems}" />
                                                    </StackPanel>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </GroupStyle.ContainerStyle>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
        </Grid>
    </Page>

    C#:

        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                ObservableCollection<Group> groups = new ObservableCollection<Group>()
                {
                    new Group(){
                        Title = "Group 1",
                        Items = new ObservableCollection<Item>(){
                            new Item(){Name="Item 1"},
                            new Item(){Name="Item 2"},
                            new Item(){Name="Item 3"},
                            new Item(){Name="Item 4"},
                            new Item(){Name="Item 5"},
                            new Item(){Name="Item 6"},
                            new Item(){Name="Item 7"}
                        }
                    },
                    .... // create the items
                };
                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 class Group
        {
            public string Title { get; set; }
            public ObservableCollection<Item> Items { get; set; }
        }
    sample download: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%211094

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

    2012年8月29日 10:17
    版主

全部回复

  • 这个样式在网上看到过, 但没有具体例子。 求 Bob Bao 现身给点意见
    2012年8月29日 8:41
  • 语义缩放有例子的啊:  http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

    好吧,给你写个简单明了的例子:

    XAML:

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <CollectionViewSource x:Name="source" IsSourceGrouped="True"/>
        </Page.Resources>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <SemanticZoom x:Name="semanticZoom">
                <SemanticZoom.ZoomedOutView>
                    <GridView>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Background="Blue">
                                    <TextBlock Text="{Binding Group.Title}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="3"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <GridView ItemsSource="{Binding Source={StaticResource source}}">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Background="Blue">
                                    <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Title}" Foreground="Gray" Margin="5" FontSize="40"/>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.ContainerStyle>
                                    <Style TargetType="GroupItem">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="GroupItem">
                                                    <StackPanel Orientation="Vertical">
                                                        <ContentPresenter Content="{TemplateBinding Content}" />
                                                        <ItemsControl ItemsSource="{Binding GroupItems}" />
                                                    </StackPanel>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </GroupStyle.ContainerStyle>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
        </Grid>
    </Page>

    C#:

        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                ObservableCollection<Group> groups = new ObservableCollection<Group>()
                {
                    new Group(){
                        Title = "Group 1",
                        Items = new ObservableCollection<Item>(){
                            new Item(){Name="Item 1"},
                            new Item(){Name="Item 2"},
                            new Item(){Name="Item 3"},
                            new Item(){Name="Item 4"},
                            new Item(){Name="Item 5"},
                            new Item(){Name="Item 6"},
                            new Item(){Name="Item 7"}
                        }
                    },
                    .... // create the items
                };
                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 class Group
        {
            public string Title { get; set; }
            public ObservableCollection<Item> Items { get; set; }
        }
    sample download: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%211094

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

    2012年8月29日 10:17
    版主