Creating A Win8 App From Scratch–A Scrolling Home Page

In a previous article I discussed the project that I’ll be building in Windows 8.  We started with a couple screen mock-ups and then passed these to the designers who came back with preliminary designs.  While these designs were not ready for Prime Time, they were enough to get me started coding (okay, I would have started coding without them, who can wait?) 

ConferenceBuddyPreliminaryImage

Even if our final design looks nothing like this, it does raise a fascinating question: how do you create pages that slide horizontally like the pages shown here.  Certainly there are lots  of examples of this kind of design: see the Weather or News applications that come with Windows 8.

There are a number of solutions to this problem, though there is no control that is specifically designed to make this work.  One approach, however, which I will explore here today is to use a Flip-view control. 

The typical use of a Flip-view control is to display images. For example, you might take three stock images and copy them into your Assets folder (remembering to add them to the project) and then write code that looks like this,

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <FlipView Name="xFlipView"

              SelectionChanged="xFlipView_SelectionChanged_1">

        <Image Source="Assets/DancingWoman.jpg" />

        <Image Source="Assets/DNA.jpg" />

        <Image Source="Assets/Earth.jpg" />

    </FlipView>

</Grid>

The result, when run, would be to show each of the images in turn, allowing the touch screen user to flip from one to the other with a finger flick, or the mouse user to click on the arrows that appear on the right and left hand side of the screen when you hover the mouse,

screenshot_11272012_132151

You are not restricted to images, however.  You can place any single element into each of the flip viewer “pages” and that gives us the flexibility we need.  For example, we can place a stack panel into one of the flipview pages, and in that stack panel we can place TextBoxes and TextBlocks.  In the next code example, we do just that, providing our TextBoxes and TextBlocks with implicit styles,

<Page.Resources>

    <Style TargetType="TextBlock">

        <Setter Property="FontSize"

                Value="20" />

        <Setter Property="Margin"

                Value="5" />

    </Style>

    <Style TargetType="TextBox">

        <Setter Property="Margin"

                Value="5" />

    </Style>

</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <FlipView Name="xFlipView"

              SelectionChanged="xFlipView_SelectionChanged_1">

        <StackPanel Margin="100">

            <StackPanel>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Text="First Name" />

                    <TextBox Width="200"

                             Height="40"

                             Name="FirstName" />

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Text="Last Name" />

                    <TextBox Width="200"

                             Height="40"

                             Name="LastName" />

                </StackPanel>

            </StackPanel>

        </StackPanel>

        <Image Source="Assets/DancingWoman.jpg" />

        <Image Source="Assets/DNA.jpg" />

        <Image Source="Earth.jpg" />

    </FlipView>

</Grid>

This gives us the beginning of a form, but one which also provides the ability to flick to the images, or, eventually, to a second and third form.

FlipViewData

There is much more to do, of course, but the essential task of having pages we can flip between is accomplished.  In a coming post I’ll look at another way to accomplish this, using the GridView control which will provide less of a “flip” between pages than a “slide.”

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Essentials, Metro, Mini-Tutorial, Patterns & Skills, Windows 8 and tagged . Bookmark the permalink.

2 Responses to Creating A Win8 App From Scratch–A Scrolling Home Page

  1. yas says:

    I want the code for scrolling the page horizontally via mouse without using arrow symbol.

  2. could you use a GridView with SelectionMode=”None” to handle the horizontal sliding? Each GridViewItem could then be composed of your columns (Contact Details, Interests, Subscriptions and Follow Up) and they can notify the app when they are in full view so the “breadcrumbs” on the bottom of the picture can be filled in appropriately.

    I am interested in how you will approach this!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>