Question

您好我正在尝试实现滑块，如下图所示。使用jquery在web中非常容易。但问题是我必须在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中创建一个页面指示器

1 个答案: