Создать индикатор страницы в wp8

Question

Привет, я пытаюсь реализовать слайдер, как показано на рисунке ниже. Это действительно легко в Интернете, используя jquery. Но проблема в том, что я должен реализовать его в wp8. Итак, любая идея, как сделать круговые кольца как отмеченные, а затем проведите по экрану вправо, кольцо должно быть отмечено. Любой фрагмент кода, если у вас есть, был бы замечательным. спасибо

Answer 1

Вы можете попробовать этот путь. Это всего лишь образец.

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> 

и функция для события SectionsInViewChanged в 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; 
     } 
}