在 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>

以及 MainPage.xaml.cs

中事件 SectionsInViewChanged 的函数

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;
        }
}

在 wp8 中创建页面指示器

Create a page indicator in wp8

xaml

uislider

windows-phone-8