Die Gruppierung der GridView in Windows 8 Metro-App

Kann mir jemand einige Hinweise, wie das zu erreichen ist die Gruppierung
innerhalb eines GridView-für Metro-Apps, wie in der Abbildung unten gezeigt.

Dieser Screenshot ist aus der Entwickler-Ressourcen für Windows Metro Apps,
aber leider gibt es keine Beschreibung, wie um es zu erreichen.

Ich habe den folgenden code-snippet:

Xaml:

    ...

    <Page.Resources>
        <CollectionViewSource x:Name="cvs" IsSourceGrouped="true"/>
    </Page.Resources>

    <Grid Background="{StaticResource DefaultBackground}">

        <GridView x:Name="DefaultGridView" ItemsSource="{Binding Source={StaticResource cvs}}">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Fill="{Binding}" Width="100" Height="100" Margin="0 0 5 0"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>

            <GridView.GroupStyle>
                <GroupStyle>

                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>

                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>

                </GroupStyle>
            </GridView.GroupStyle>


            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                   <StackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>


        </GridView>

    </Grid>

...

C#:

In der Code-Behind-ich den folgenden Code in die OnNavigateTo-Methode:

        List<string> strList = new List<string>() { 
        "Red", "Red", "Red", "Red", "Red", "Red", 
        "Green", "Green","Green","Green","Green",
        "Blue","Blue","Blue","Blue" };

    var groupedList = from s in strList
                      group s by s into g
                      orderby g.Key
                      select g;


    cvs.Source = groupedList;

Egal was ich mache, ich bin nicht in der Lage, um die Gruppierung der Elemente in einer Liste weiter, wie in der
Screenshot. Der Code der die Ergebnisse in separaten Listen gruppiert nebeneinander.

InformationsquelleAutor Edmond Simbari | 2012-03-25

c#gridview grouping microsoft-metro wpf

Ich möglicherweise eine Lösung. In meinem projet habe ich eine Liste der Kontakte in alphabetischer Reihenfolge, wie die Kontakte-app.

Habe ich eine GridView (mit diesem Beispiel), ein CollectionViewSource und ein wrappanel fand ich in der WinRT XAML Toolkit (erhalten Sie mit der NuGet-Paket oder kopieren/fügen Sie den source-code). Es ermöglicht Ihnen, Ihre Elemente in den Spalten.

Beispiel

Die Gruppierung der GridView in Windows 8 Metro-App

ViewModel

class ContactListViewModel
    {

        public ContactListViewModel()
        {
            ContactSource = new CollectionViewSource();
            Contacts = new ObservableCollection<Contact>();

            Contacts.Add(new Contact("Gates","Bill"));
            Contacts.Add(new Contact("Bush","Georges"));
            Contacts.Add(new Contact("Obama","Barack"));
            Contacts.Add(new Contact("Hollande","François"));
            Contacts.Add(new Contact("Affleck","Ben"));
            Contacts.Add(new Contact("Allen","Woody"));
            Contacts.Add(new Contact("Hendrix","Jimi"));
            Contacts.Add(new Contact("Harrison", "Georges"));

            Contacts = new ObservableCollection<Contact>(Contacts.OrderBy(c => c.Name));
            ContactSource.Source = GetGroupsByLetter();
            ContactSource.IsSourceGrouped = true;

        }

        #region Contacts
        public ObservableCollection<Contact> Contacts
        {
            get;
            protected set;
        }

        public CollectionViewSource ContactSource
        {
            get;
            protected set;
        }
        #endregion


        internal List<GroupInfoList<object>> GetGroupsByLetter()
        {
            List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();

            var query = from item in Contacts
                        orderby ((Contact)item).Name
                        group item by ((Contact)item).Name[0] into g
                        select new { GroupName = g.Key, Items = g };
            foreach (var g in query)
            {
                GroupInfoList<object> info = new GroupInfoList<object>();
                info.Key = g.GroupName;
                foreach (var item in g.Items)
                {
                    info.Add(item);
                }
                groups.Add(info);
            }

            return groups;
        }

        public class GroupInfoList<T> : List<object>
        {

            public object Key { get; set; }


            public new IEnumerator<object> GetEnumerator()
            {
                return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
            }
        }
}

Ansicht

 <DataTemplate x:Key="contactTemplate">
    <Grid Width="225" Height="75" Background="#55FFFFFF">
        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="20">
                <Run Text="{Binding FirstName}"/>
                <Run Text="{Binding Name}"/>
            </TextBlock>
            <TextBlock Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Email}" FontSize="13" Foreground="#FFDDDDDD"/>
        </Grid>
    </Grid>
</DataTemplate>

<DataTemplate x:Key="letterTemplate">
    <Grid Margin="5,0,0,5" Width="225">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding Key}" Style="{StaticResource GroupHeaderTextStyle}"  VerticalAlignment="Center"/>
        <Rectangle Grid.Row="1" Fill="#BBEEEEEE" Height="1" Margin="0,7,0,0"/>
    </Grid>
</DataTemplate>
</Page.Resources>



<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Back button and page title -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Click="GoBack" Style="{StaticResource BackButtonStyle}" Opacity="0"/>
        <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Manager" Style="{StaticResource PageHeaderTextStyle}"/>
    </Grid>

    <GridView Grid.Row="1"
        ItemsSource="{Binding Path=ContactSource.View}"
        SelectionMode="Multiple"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        Padding="116,10,40,46"
        ItemTemplate="{StaticResource contactTemplate}">

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <local:WrapPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource letterTemplate}">
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>
</Grid>

Sie vergessen, <Controls1:WrapPanel Orientation="Vertical" /> aber nicht Aussehen wie das Bild.
Ja, my bad, ich habe mehrere WrapPanel und ich vergaß hinzuzufügen, die Orientierung für diese ein. Was meinst du mit "sieht nicht so aus dem Bild" ? Wenn Sie eine Menge von Kontakten mit dem gleichen ersten Buchstaben, ja es wird eine getrennte colomn. Wenn Sie möchten, dass genau das Bild der Frage, die Sie brauchen, es zu tun mit der hand, wie Jmix90 sagt.

InformationsquelleAutor Max

2

http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

Das MSDN-Beispiel ist nicht das gleiche wie der Benutzer aufgefordert werden, für die...

InformationsquelleAutor Xyroid
1

Es nicht getan werden kann mit der Standard-grid-Ansicht Stile.

Müssen Sie möglicherweise verwenden Sie eine keine-gruppiert-posten-Liste und fügen Sie spezielle Elemente mit unterschiedlichen Element-Vorlage ...

Sorry

InformationsquelleAutor Jonatha ANTOINE
1

Möchte ich hinzufügen, den Header, die als Elemente für das gridview-Steuerelement, und verwenden Sie einen TemplateSelector-display, um die Elemente dem richtigen Weg...

InformationsquelleAutor Ripityom

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.