定製的XAML微調器

Question

我正在嘗試爲Windows Phone 8.1應用程序製作微調器。我想Spinner有兩個輪子：一個是數字列表，另一個是單詞列表（而不是AM/PM）。類似的事情在TimePicker：

我沒有看到，工作這樣的任何選項。 （ComboBox是我發現的最接近的，但它不旋轉。）

有沒有辦法自定義TimePicker？或者創建一個Spinner喜歡它？

Answer 1

這裏是一個使用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++; 
      } 

     } 
    } 

Answer 2

代碼如果你通過的DatePicker的sources，你會看到他們使用Microsoft.Phone.Controls.Primitives.LoopingSelector作爲輪。這是公開課，你可以在Windows Phone Toolkit中使用它。

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