locked
Struggling with Hub Page Implementation

    Question

  • Hi!  There's some great Hub Page inspiration in articles like:

    http://blogs.msdn.com/b/windowsappdev/archive/2012/07/11/creating-metro-style-apps-that-stand-out-from-the-crowd.aspx

    http://msdn.microsoft.com/en-US/library/windows/apps/hh868264

    ... HOWEVER these articles lack concrete examples of implementation.

    Suppose I want 5 or 6 distinct sections on a hub page.  Each section contains different information for different scenarios.  

    The first article seems to suggest that you can use a GridView as a starting point for this purpose, and provides this screenshot:

    Screenshot from first article ...

    However, it doesn't explain how to:

    (1) Bind dramatically different types of data to a single GridView
    (2) Provide dramatically different layouts for each section of the GridView

    So, I've tried to cobble this together myself taking several different approaches but with little luck.  They all take a similar tack:

    <Page ...>
    
        <ScrollViewer HorizontalScrollMode="Enabled">
            <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="500" />
                    <ColumnDefinition Width="500" />
                    <ColumnDefinition Width="500" />
                    <ColumnDefinition Width="500" />
                    <ColumnDefinition Width="500" />
                    <ColumnDefinition Width="500" />                
                </Grid.ColumnDefinitions>
    
                <TextBlock Grid.Column="0" Style="{StaticResource GroupHeaderTextStyle}">Column 0</TextBlock>
                <TextBlock Grid.Column="1" Style="{StaticResource GroupHeaderTextStyle}">Column 1</TextBlock>
                <TextBlock Grid.Column="2" Style="{StaticResource GroupHeaderTextStyle}">Column 2</TextBlock>
                <TextBlock Grid.Column="3" Style="{StaticResource GroupHeaderTextStyle}">Column 3</TextBlock>
                <TextBlock Grid.Column="4" Style="{StaticResource GroupHeaderTextStyle}">Column 4</TextBlock>
                <TextBlock Grid.Column="5" Style="{StaticResource GroupHeaderTextStyle}">Column 5</TextBlock>
            </Grid>
        </ScrollViewer>
    </Page>

    This approach doesn't yield any scrolling whatsoever.  Furthermore, I haven't figure out the correct incantation of attributes in the <ScrollViewer> to get this to work as I would expect, so I feel I'm headed in a totally wrong direction.

    (1) At a high level, what are the components / parts of implementing a hub page?  Which basic controls must be involved to get that "off the page" horizontal scrolling to work?

    (2) If you say "Use a scrollviewer" then please, kind soul, point out to me why the example above is not working.  I'm not sure what else to try.

    Thank you kindly!

    Tuesday, October 2, 2012 3:27 PM

Answers

All replies

  • first, i used the scrollviewer technique a couple of times and then used the scrollviewer  indeed with a great like you got and this was my scrollviewer:

    <ScrollViewer HorizontalScrollMode="Auto"  HorizontalScrollBarVisibility="Auto"
                          VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden"
                          ZoomMode="Disabled"

    maybe this helps a bit. the other implementation i did is with a gridview

    there i made a class HubGroup that contains the group name and a list of HubGroupItems of the type HubGroupItem. But i filled the collection with classes that where extending the HubGroupItem. With a DataTemplateSelector i could return the right template for the class to render and getting different views in the GridView

     
    Tuesday, October 2, 2012 3:40 PM
  • Hi Dave, and thank you for the great reply (!!!).  I didn't try your solution.  I *did* find another solution (and just came back here to post it).  The solution I found is really simple even though it is EXTREMELY OBSCURE:

        <ScrollViewer HorizontalScrollMode="Enabled" Style="{StaticResource HorizontalScrollViewerStyle}">
     

    The HorizontalScrollViewerStyle is the key here ... the HorizontalScrollMode makes the scroll bar visible at all times, clueing the user in that there's more (hopefully they see it!)  Here's a post with a few other options:

    http://stackoverflow.com/questions/12133725/is-preparing-windows-8-xaml-hubpages-from-several-gridviews-inside-scrollviewer

    The second technique you described is also "on the table" but seems like a lot more work, especially when the content could vary greatly (even if it does give you Semantic Zoom capabilities out of the box).  I've not found a complete example online, but this was helpful:

    http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/8d4d8410-23e2-44bd-b582-2f636e4e54d4

    Thank you again!

     

    • Marked as answer by BobTabor Tuesday, October 2, 2012 4:01 PM
    Tuesday, October 2, 2012 3:59 PM
  • There's a downside with the technique of using the <Scrollviewer> around a Grid, each "cell" of the grid containing a GridView or ListView that I just mentioned above ... the ListItems of those controls will get the mouse-wheel scrolling event instead of the <ScrollViewer>.  It looks like a GridView with sections and a DataTemplateSelector is really the way to go.
    • Edited by BobTabor Tuesday, October 2, 2012 4:40 PM clarify
    Tuesday, October 2, 2012 4:40 PM
  • if you want to use a GridView in the scrollviewer bad idea indeed. Use scrollviewer when having your own layout with ItemsControls and such things (there i used it)
    Tuesday, October 2, 2012 5:05 PM
  • For the sake of anyone else who ever wants to create a hub page style app, here's the simplest example I could create using a GridView and a DataTemplateSelector.  It's rough around the edges, but you'll be able to find everything you need in the comments.  

    https://dl.dropbox.com/u/693501/HubPageSample.zip

    I've not been able to find a complete example anywhere else online (just fragments and I had to piece it all together).  Hope that helps!


    • Edited by BobTabor Tuesday, October 2, 2012 9:17 PM hyperlink
    Tuesday, October 2, 2012 9:16 PM
  • Hi Bob,

    I would like to try out the example that you provide. However, the hyperlink indicates a 404 error. Do you still have the example? 

    Thanks. 

    Monday, May 27, 2013 7:10 AM
  • Unfortunately, in an attempt to save space, I stupidly deleted that file from Dropbox.  :(
    Monday, May 27, 2013 1:07 PM