Telerik blogs

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.”


jesseLiberty
About the Author

Jesse Liberty

 has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter

Comments

Comments are disabled in preview mode.