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?)
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,
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,
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,
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.
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.”