Customized XAML Spinner - xaml

Question

I am trying to make a Spinner for a Windows Phone 8.1 App. I want the Spinner to have 2 wheels: A list of numbers on one, and a list of words (not AM/PM) on the other. Something similar to the TimePicker:
I did not see any options that worked this way. (ComboBox is the closest I found, but it does not spin.)
Is there a way to customize the TimePicker? Or create a Spinner like it?

Answer 1

If you look through sources of DatePicker, you'll see them use Microsoft.Phone.Controls.Primitives.LoopingSelector as wheel. It is public class and you can use it from Windows Phone Toolkit.
You also can see example of usage in DatePicker sources.

Answer 2

here's a starting point using a ScrollViewer with VerticalSnapPointsType="Mandatory"
When ScrollViewer.ViewChanged use ScrollViewer.VerticalOffset and the height of your container to calculate the selected item. Sorry Stackpanel does not support itemssource binding so you may have to add the elements in the code behind.
the 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>
The code behind
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++;
}
}
}