Create a page indicator in wp8 - xaml

Question

Hi i am trying to implement the slider as shown in the figure below. It is really easy in web using jquery. But the problem is that i have to implement it in wp8. So any idea how do i make circular rings as marked and then on swipe to the right the ring should get marked. Any code snippet if you have any would be great.
thanks

Answer 1

You may try this way. This is just a sample.
MainPage.xaml
<Grid>
<Hub Name="hub" SectionsInViewChanged="Hub_SectionsInViewChanged" >
<HubSection Tag="0" Background="Red" />
<HubSection Tag="1" Background="Blue" />
<HubSection Tag="2" Background="Green" />
<HubSection Tag="3" Background="Aqua" />
</Hub>
<Grid Width="80" Height="30" VerticalAlignment="Bottom" Margin="20,20,20,20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Ellipse Name="circle1" Margin="5,0,5,0" Fill="White" Width="10" Height="10" Grid.Column="0" Opacity="1"/>
<Ellipse Name="circle2" Margin="5,0,5,0" Fill="White" Width="10" Height="10" Grid.Column="1" Opacity="0.5"/>
<Ellipse Name="circle3" Margin="5,0,5,0" Fill="White" Width="10" Height="10" Grid.Column="2" Opacity="0.5"/>
<Ellipse Name="circle4" Margin="5,0,5,0" Fill="White" Width="10" Height="10" Grid.Column="3" Opacity="0.5"/>
</Grid>
</Grid>
and the function for event SectionsInViewChanged in MainPage.xaml.cs
private void Hub_SectionsInViewChanged(object sender, SectionsInViewChangedEventArgs e)
{
circle1.Opacity = 0.5;
circle2.Opacity = 0.5;
circle3.Opacity = 0.5;
circle4.Opacity = 0.5;
var tag = hub.SectionsInView[0].Tag.ToString();
switch(tag)
{
case "0":
circle1.Opacity = 1;
break;
case "1":
circle2.Opacity = 1;
break;
case "2":
circle3.Opacity = 1;
break;
case "3":
circle4.Opacity = 1;
break;
default :
circle1.Opacity = 1;
break;
}
}