定制的XAML Spinner

Question

我正在尝试为Windows Phone 8.1 App制作一个Spinner。我希望Spinner有两个轮子：一个数字列表和一个单词列表（不是AM / PM）。类似于TimePicker的东西：

我没有看到任何以这种方式工作的选项。 （ComboBox是我找到的最接近的，但它不会旋转。）

有没有办法自定义TimePicker？或者像这样创建一个Spinner？

Answer 1

如果您查看DatePicker的sources，您会看到它们使用Microsoft.Phone.Controls.Primitives.LoopingSelector作为轮子。它是公共类，您可以从Windows Phone Toolkit中使用它。

您还可以在DatePicker源中看到使用示例。

Answer 2

这里是使用ScrollViewer和VerticalSnapPointsType="Mandatory"的起点 当ScrollViewer.ViewChanged使用ScrollViewer.VerticalOffset和容器的高度来计算所选项目时。抱歉，Stackpanel不支持itemssource绑定，因此您可能必须在后面的代码中添加元素。

XAML

<ScrollViewer Width="70"
                  Loaded="ScrollViewer_OnLoaded"
                  VerticalContentAlignment="Center"
                  VerticalSnapPointsType="Mandatory"
                  VerticalSnapPointsAlignment="Center">
        <StackPanel Margin="0,200" x:Name="StackPanel">
            <Grid Height="80"
                  Width="70">
                <Border BorderBrush="Aqua"
                        BorderThickness="1"
                        Height="74"
                        Width="70">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="30"
                               Text="1"></TextBlock>
                </Border>
            </Grid>
            <Grid Height="80"
                  Width="70">
                <Border BorderBrush="Aqua"
                        BorderThickness="1"
                        Height="74"
                        Width="70">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="30"
                               Text="2"></TextBlock>
                </Border>
            </Grid>
            <Grid Height="80"
                  Width="70">
                <Border BorderBrush="Aqua"
                        BorderThickness="1"
                        Height="74"
                        Width="70">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="30"
                               Text="3"></TextBlock>
                </Border>
            </Grid>
            <Grid Height="80"
                  Width="70">
                <Border BorderBrush="Aqua"
                        BorderThickness="1"
                        Height="74"
                        Width="70">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="30"
                               Text="4"></TextBlock>
                </Border>
            </Grid>
            <Grid Height="80"
                  Width="70">
                <Border BorderBrush="Aqua"
                        BorderThickness="1"
                        Height="74"
                        Width="70">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="30"
                               Text="5"></TextBlock>
                </Border>
            </Grid>
            <Grid Height="80"
                  Width="70">
                <Border BorderBrush="Aqua"
                        BorderThickness="1"
                        Height="74"
                        Width="70">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="30"
                               Text="6"></TextBlock>
                </Border>
            </Grid>
        </StackPanel>
    </ScrollViewer>

背后的代码

 private void ScrollViewer_OnLoaded(object sender, RoutedEventArgs e)
    {
        ScrollViewer sv = sender as ScrollViewer;
        sv.ChangeView(0, 200, null, true);
        sv.ViewChanged += sv_ViewChanged;
    }

    void sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        if (e.IsIntermediate)
        {
            return;
        }
        else
        {
            ScrollViewer sv = sender as ScrollViewer;

            double offset = sv.VerticalOffset;
            double stackpanelMargin = 200;
            double itemHeight = 80;
            int selectedIndex = (int)Math.Round((offset + stackpanelMargin) / itemHeight);
            //int selectedIndex = int.Parse(indexOfSelectedItem.ToString());
            //get selected item
            var StackpanelChildren = StackPanel.Children;
            int i = 0;
            foreach (var stackpanelChild in StackpanelChildren)
            {
                if (i == selectedIndex)
                {
                    stackpanelChild.Opacity = 1;
                }
                else
                {
                    stackpanelChild.Opacity = .5;
                }
                i++;
            }

        }
    }