An example showing how to create a slide show using a
PageControlallows the user to navigate between several pages. It's basic structure is:
<PageControl ux:Name="slides" ClipToBounds="true"> 4x <Page/> ... </PageControl>
Only one page is displayed at a time. A basic swipe navigation is used to move between the pages. The name
thePages is used later to refer to this control.
You can put whatever content you'd like into the
Page elements. In the example one of our pages looks like this:
<Page> <Info> <Header>Juicer be juiciiiier!</Header> <Body>Look at that thing. It takes fruit and vegetables and turns it into juice. It's like magic.</Body> </Info> <BackgroundImage File="Assets/page_1.jpg" /> </Page>
Description are defined to ensure a consistent look across pages without duplicating code.
PageIndicatorIt's often nice to show the user how many pages there are, and what page they are currently on. In the example we use the
PageIndicatorto do this.
<PageIndicator Dock="Bottom" Alignment="Center" Margin="5" Navigation="slides"> <Circle ux:Template="Dot" Width="10" Height="10" Margin="4"> <SolidColor ux:Name="dotStrokeBody" Color="#0000" /> <Stroke ux:Name="dotStroke" Width="2"> <SolidColor ux:Name="dotStrokeColor" Color="#bbb" /> </Stroke> <ActivatingAnimation> <Change dotStrokeBody.Color="#aaa" /> <Change dotStrokeColor.Color="#aaa" /> </ActivatingAnimation> </Circle> </PageIndicator>
PageIndicator itself is merely the series of dots, so we've centered it in a panel and given it some padding blend into the app.
Navigation="thePages" is how we connect this indicator to a particular
PageControl. This allows you to put the indicator wherever you'd like in your application; it doesn't need to be directly beside the pages.
You can also set
Orientation="Vertical"on the indicator to give it a vertical layout instead of horizontal.