locked
Design a screen like all apps in windows 8 RRS feed

  • Question

  • Hi All, 

                I'm trying to implement a screen like the search results, say if you search for an app from the start screen of windows 8 you'll see a list of apps for the search results, if you clear your search query then an All apps screen is displayed, like the one i'm attaching here.

    I've tried to implement the same by a grouped grid view, but the items are not wrapped properly. Say in the image above, group "C" has more items which gets wrapped to the next column and also group "D" fills the existing space with its items as much as possible in the same column. 

    Any idea on how to implement this and which control should be used?  Thanks in advance for your help. 

    Thanks

    - Ram 


    Friday, May 17, 2013 9:09 AM

Answers

  • Hi Ramprasath,

    - I would introduce a property that tells whether 'Item' is a 'dummy' one and display (using DataTemplateSelector) an empty UIELement.

    I understand the drawback is that the number of items per column is a known/fixed number.

    ---

    To alleviate the latter,
    - I would have the above triggered on SizeChanged of the GridView WrapGrid [even as a non UI thread task if one needs optimization UI thread + UI Thread resync of course upon ObsColl update] to add/remove the dummy Item(s) in the ObsColl. - The modulo number would result from a simple Tree walk of the WrapGrid whereby you detect the 'X' position of each GridViewItem with respect to the GridView [*]

    (*)

    foreach (GridViewItem r in wrapGrid)
        Debug.WriteLine("Coordinates in wrapGrid of element[{0}] are [{1}]",
            r.GetType().Name,
            r.TransformToVisual(wrapGrid).TransformPoint(new Point(0, 0))
        );


    • Edited by ForInfo Sunday, May 19, 2013 6:34 PM
    • Proposed as answer by Jesse Jiang Wednesday, May 22, 2013 2:59 AM
    • Marked as answer by Ramprasath R Wednesday, May 22, 2013 5:48 PM
    Sunday, May 19, 2013 6:32 PM

All replies

  • Visual Studio provides a Search Contract item template that will give you most of the scaffolding for this. Are you using that? There's a QuickStart here.

    Rebecca M. Riordan

    Friday, May 17, 2013 10:15 AM
  • I believe you need to set GridView ItemsPanel to WrapGrid.

            <GridView>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>

    I think default ItemsPanel is StackPanel (the way groups are positioned matches StackPanel layout) but I don't know how to verify that.

    Friday, May 17, 2013 10:16 AM
  • Well, lemme explain you clearly, I've just created a project with Grid app template in VS. Here is the screen shot of the same. 

    so if you look at the groups, each group is placed in separate columns. what I want to do is, the Group 1 should be in the first column, group 2 should also be wrapped on the 1 column as i've more space under group 1. Hope i'm clear this time. 

    Here is the Grouped GridView's XAML:

    <GridView x:Name="itemGridView"
                      Grid.RowSpan="2"
                      AutomationProperties.AutomationId="ItemGridView"
                      AutomationProperties.Name="Grouped Items"
                      IsItemClickEnabled="True"
                      IsSwipeEnabled="false"
                      ItemClick="ItemView_ItemClick"
                      ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
                      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                      Padding="116,137,40,46"
                      SelectionMode="None">
    
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="1,0,0,6">
                                    <Button AutomationProperties.Name="Group Title"
                                            Click="Header_Click"
                                            Style="{StaticResource TextPrimaryButtonStyle}">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Margin="3,-7,10,10"
                                                       Style="{StaticResource GroupHeaderTextStyle}"
                                                       Text="{Binding Title}" />
                                            <TextBlock Margin="0,-7,0,10"
                                                       FontFamily="Segoe UI Symbol"
                                                       Style="{StaticResource GroupHeaderTextStyle}"
                                                       Text="{StaticResource ChevronGlyph}" />
                                        </StackPanel>
                                    </Button>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Margin="0,0,80,0" Orientation="Vertical" />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>



    - Ram 

    Friday, May 17, 2013 11:06 AM
  • @Jernej: Tried the way you suggested, but not working like the way i explained.

    - Ram 

    Friday, May 17, 2013 11:22 AM
  • Can someone help me to figure out a different way to achieve similar design?

    - Ram 

    Sunday, May 19, 2013 4:23 PM
  • Given the constraints of your scenario:

    - ignore the letter headings for a momemnt
    - implement a GridView with a Virtualizing WrapGrid
    - that will display all the items of an ObservableCollection<Item> in the manner you expect [assuming you sort them on letter]

    - now mentally introduce the Group concept as follows:
    - each time you add/remove [use CollectionChanged event] an Item in the ObservableCollection<Item> that starts with a letter ensure to addenforce or remove a corresponding 'Header' record in front of the series of Items with that letter.

    Technically:
    - you'll have to maintain a sorted ObservableCollection<Item>
    - the 'Item' will have a bool property that tells whether it is an actual 'Item' or in fact a 'Header' item [whose letter is displayed].
    - display wise, the distinction will be done using the classical DataTemplateSelector (*) mechanism based on that property.
    - note that the WrapGrid has fixed width items whose width is based on the one of the first item [a letter in your case] being displayed. Ensure its width is 'sufficient' with respect to the detailed items themselves. If performance is not critical [few items] you can opt for a non virtualized VariableSizedWrapGrid.

    In summary, the price to pay for your GridView layout is to maintain a sorted and dual-type Item ObservableCollection<...> by yourself and use the DatatemplateSelector mechanism.

    (*) See 'DataTemplateSelector' in Samples

    Sunday, May 19, 2013 5:13 PM
  • Thanks ForInfo, I was expecting you here :)
    I tried the way you've explained. But the problem is, some times, the group title itself stands alone in the bottom. Say a column can hold 10 items, 8 items along with its group header item fills the 9 spaces. i've one more at the bottom, now, only the title/header of the next group stays back in the same column, but i want the next group title to wrap to the next column as it doesn't have any items within its present column. If i'm not clear, you can refer the below image with highlighted columns:

    The Microsoft Silverlight group header wraps to the next column even the previous column has an item space. Hope the image can explain you clearly.

    Please let me know if you need more details.


    - Ram

    Sunday, May 19, 2013 5:48 PM
  • Hi Ramprasath,

    - I would introduce a property that tells whether 'Item' is a 'dummy' one and display (using DataTemplateSelector) an empty UIELement.

    I understand the drawback is that the number of items per column is a known/fixed number.

    ---

    To alleviate the latter,
    - I would have the above triggered on SizeChanged of the GridView WrapGrid [even as a non UI thread task if one needs optimization UI thread + UI Thread resync of course upon ObsColl update] to add/remove the dummy Item(s) in the ObsColl. - The modulo number would result from a simple Tree walk of the WrapGrid whereby you detect the 'X' position of each GridViewItem with respect to the GridView [*]

    (*)

    foreach (GridViewItem r in wrapGrid)
        Debug.WriteLine("Coordinates in wrapGrid of element[{0}] are [{1}]",
            r.GetType().Name,
            r.TransformToVisual(wrapGrid).TransformPoint(new Point(0, 0))
        );


    • Edited by ForInfo Sunday, May 19, 2013 6:34 PM
    • Proposed as answer by Jesse Jiang Wednesday, May 22, 2013 2:59 AM
    • Marked as answer by Ramprasath R Wednesday, May 22, 2013 5:48 PM
    Sunday, May 19, 2013 6:32 PM
  • Thanks, I'll give it a try.

    - Ram

    Tuesday, May 21, 2013 1:34 PM