XAML data binding is pretty powerful. One of the benefits of XAML data binding is that it lets different elements on one UI use the same data. The WinRT-XAML FlipView inherits from ItemsControl, the base class for all XAML repeaters. It shows a single record at a time.
But how many records are before the current record? How many records are after it? Without some type of page or context indicator, the FlipView is a mystery to the user. And, that’s what we’re after today – building our own page indicator for the FlipView control.
On an Apple device, the main screen (the equivalent to the Start Screen on Windows Phone) doesn’t scroll vertically or horizontally. Instead, the pages horizontally – more like the Pivot control on Windows Phone or the FlipView control in WinRT-XAML. The number of available pages is indicated by a small strip of circles that depicts both the number of pages and the current page index. It’s nice.
The solution
To create your own indicator you will need to bind an ItemsControl on top of and toward the bottom of your FlipView control. What are you repeating? Instead of records (though that is an option), you will be repeating page indicators (like little circles). You will also be repeating them horizintally, default orientation for an ItemsControl is vertical. It’s easy enough to change.
Source code
In the video you will see me use the “basic” snippet that has a baseline implementation of MVVM for a demo-ready project. If you are interested in this snippet, then you can get it here. You’ll notice a lot of great code in there. A navigation service, the relay command, a design-time repository, some base classes – several lines of boilerplate code that needs to be broken up into separate folders and files. You don’t have to use any of it, by the way. But, this code is going to be part of most of my future demos. I just think it’s time to get things closer to real world best practices. Make sense?
You might also like to see the XAML I used. There wasn’t any “crazy” XAML here, just the standard functionality. But if I moved too fast or you wanted to copy/paste a little, get it here. Same thing with the code behind. If you want that code, get it here.
Let’s get coding!
Best of luck!