locked
Grouping Grid View Items with Semantic Zoom and existing code

    Question

  • I'm trying to find the quickest and most efficient way to implement some GridView Items for my Windows 8.1 app.

    Below is my XAML:

    <Page
        x:Class="Exits_Expert_London.Victoria_line"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Exits_Expert_London"
        xmlns:common="using:Exits_Expert_London.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <UserControl.Resources>
            <CollectionViewSource x:Name="viewSource" IsSourceGrouped="True"/>
        </UserControl.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 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                            Style="{StaticResource NavigationBackButtonNormalStyle}"
                            VerticalAlignment="Top"
                            AutomationProperties.Name="Back"
                            AutomationProperties.AutomationId="BackButton"
                            AutomationProperties.ItemType="Navigation Button"/>
                <TextBlock x:Name="pageTitle" Text="Victoria line" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40" Foreground="#FF0099CC"/>
            </Grid>
            <GridView x:Name="Victoria_line" Grid.Row="1" Margin="20,0,0,0">
                <SemanticZoom x:Name="semanticZoom">
                    <SemanticZoom.ZoomedOutView>
                        <GridView x:Name="wideView">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapGrid ItemWidth="150" ItemHeight="150" MaximumRowsOrColumns="1" VerticalAlignment="Center"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock Text="{Binding Path=GroupTitle}" FontSize="56"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedOutView>
    
                    <SemanticZoom.ZoomedInView>
                        <GridView x:Name="detailView" ItemsSource="{Binding Source={StaticResource viewSource}}">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <ItemsControl.GroupStyle>
                                <GroupStyle HidesIfEmpty="True">
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Path=Key.GroupTitle}" FontSize="26"/>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <VariableSizedWrapGrid Orientation="Vertical"/>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </ItemsControl.GroupStyle>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Width="450" Tapped="VictoriaItem_Tap">
                                        <TextBlock Text="{Binding Title}" FontSize="32"/>
                                        <TextBlock Text="{Binding Zone}" FontSize="20"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedInView>
                </SemanticZoom>
            </GridView>
        </Grid>
    </Page>

    The code below is what I used for my WP8.x app. I know the same thing can't be reused for Windows 8.1 but I'm unsure what I would need to change for the sake of Windows 8.1

        Public Sub New()
            InitializeComponent()
    
            Dim source As New List(Of Victoria)()
            source.Add(New Victoria("Blackhorse Road", "Fare zone 3", "/Lines and Stations/Victoria/BHO_(Victoria).xaml"))
    
            source.Add(New Victoria("Seven Sisters", "Fare zone 3", "/Lines and Stations/Victoria/SVS_(Victoria).xaml"))
    
            Dim DataSource As List(Of AlphaKeyGroup(Of Victoria)) = AlphaKeyGroup(Of Victoria).CreateGroups(source, System.Threading.Thread.CurrentThread.CurrentUICulture, Function(s As Victoria)
                                                                                                                                                                                Return s.Station
                                                                                                                                                                            End Function, True)
            VictoriaLine.ItemsSource = DataSource
    
        End Sub



    The code below I have also included in my project, but I'm unsure if the code is correct for the items to appear.

        Public Class Victoria
            Public Property Station() As String
                Get
                    Return m_Station
                End Get
                Set(value As String)
                    m_Station = value
                End Set
            End Property
            Private m_Station As String
    
            Public Property FareZone() As String
                Get
                    Return m_FareZone
                End Get
                Set(value As String)
                    m_FareZone = value
                End Set
            End Property
            Private m_FareZone As String
    
            Public Property Link() As String
                Get
                    Return m_Link
                End Get
                Set(value As String)
                    m_Link = value
                End Set
            End Property
            Private m_Link As String
    
            Public Sub New(station As String, farezone As String, link As String)
                Me.Station = station
                Me.FareZone = farezone
                Me.Link = link
            End Sub
        End Class
    


    This is what I'm trying to achieve.

    Friday, May 23, 2014 1:05 PM

Answers

  • Hi,

    There are different ways that you can group data coming into your app. The data source might be a list of items where each item also contains a list of items. For example, you could display a list of projects, where each project has a property that is a list of activities. Or you might use a LINQ query that returns  grouped items. You can refer to the link to get more information about How to group items in a list or grid .

    And refer to the XAML GridView grouping and SemanticZoom sample

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, May 26, 2014 1:28 AM