Numeric input using looping list

[Chris]

New to Windows Mobile so please forgive me if this is easy...  I want to allow the user to enter a decimal number in the range 00.00 to 99.99 and thought that this would best be done with the 'wheel' spinner that you see on iPhones etc.  But this doesn't exist in the standard Windows Phone toolkit.  I'm now looking at the LoopingList to see if that would work but I'm not knowledgeable yet on Windows Mobile to be able to determine whether or not this control could work.  Anyone done anything similar and could point me in the right direction or possibly even give me some example code?

[Deyan]

Hi Chris,

Thanks for contacting us and for your question.

You can easily implement the desired behavior with RadLoopingList. I am pasting a sample source code that demonstrates a possible implementation:

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.loopingList.DataSource = new MyLoopingListDataSource(10000);
    }
}

public class MyLoopingListDataSource : LoopingListDataSource
{
    public MyLoopingListDataSource(int count)
        : base(count)
    {
    }

    protected override LoopingListDataItem GetItemCore(int index)
    {
        return new LoopingListDataItem(string.Format("{0:00},{1:00}", (index / 100), index % 100));
    }

    protected override void UpdateItemCore(LoopingListDataItem dataItem, int logicalIndex)
    {
        dataItem.Text = string.Format("{0:00},{1:00}", (logicalIndex / 100), logicalIndex % 100);
    }

}

As you can see, I create a specialized looping list data source by inheriting from the LoopingListDataSource class. In my class I am overriding two methods: GetItemCore which creates the needed visual items, and UpdateItemCore which updates already existing visual items with new content according to the logical index. This is needed because RadLoopingList implements UI and Data virtualization. In these methods I generate the content by dividing the value of the index by 100 (to get the numbers before the floating point), and concatenating it with the rest of the division of the index by 100.

In the constructor of my main page I create an instance of my specialized data source and pass 10000 as the count since there are 10000 separate items for the range 00,00 to 99,99.

When I run my application I can see a looping list loaded with all numbers between 00,00 and 99,99.

I hope this helps.

Let me know if you need further assistance with this.

Kind regards,
Deyan
the Telerik team

[Chris]

thanks Deyan - could you provide the xaml definition also so that I can be sure that I have everything wired up correctly - looks exactly right so far but I have tried using the RadLoopingList and it's not showing up even in the designer so I must have missed something!

[Deyan]

Hi Chris,

Thanks for writing back. I am pasting the XAML that you need to set up the scenario discussed in the previous post:

<phone:PhoneApplicationPage
    x:Class="LoopingListTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <telerikPrimitives:RadLoopingList x:Name="loopingList"/>
    </Grid>

</phone:PhoneApplicationPage>

This must be enough for you to put a LoopingList on your page and fill it with data.

Let me know if you need further assistance with this.

All the best,
Deyan
the Telerik team

[Chris]

My Apologies - I must be really thick because I just cannot get the list to appear either in the designer or when I run the application.
By xaml is

<phone:PhoneApplicationPage xmlns:my="clr-namespace:Blu3.Data" 
    x:Class="Blu3.ViewPatchPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
 xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikPrimitivesLoopingList="clr-namespace:Telerik.Windows.Controls.LoopingList;assembly=Telerik.Windows.Controls.Primitives" DataContext="{Binding}"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

 <phone:PhoneApplicationPage.Resources>
  <DataTemplate x:Key="WheelItemTemplate">
   <Border Height="150" >
    <TextBlock TextWrapping="Wrap" Text="{Binding Text}" Foreground="White" VerticalAlignment="Bottom"
    HorizontalAlignment="Left" FontSize="64" Margin="6,0,0,6"/>
   </Border>
  </DataTemplate>
 </phone:PhoneApplicationPage.Resources>

 <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

  <!--TitlePanel -->
  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,-10,0,5">
   <Image Source="Images/viewpatch.jpg" Width="480" Height="100"  />
  </StackPanel>

  <!--ContentPanel - place additional content here-->
  <ListBox Name="lbPatchData" Grid.Row="1"  Margin="0,0,0,0">

   <StackPanel Margin="0,20,0,0" Width="480">
    <TextBlock Text="Patch ID: 12345" Name="lblPatchID" FontWeight="Bold" FontSize="24" VerticalAlignment="Center" Grid.ColumnSpan="2" HorizontalAlignment="Center"></TextBlock>
    <TextBlock Text="Task Type:" VerticalAlignment="Center"></TextBlock>
    <TextBox Name="tbTaskType" TextWrapping="Wrap" IsEnabled="False" Text="{Binding TaskType}"></TextBox>

    <TextBlock Text="Road Class:" VerticalAlignment="Center"></TextBlock>
    <TextBox Name="tbRoadClass" IsEnabled="False" Text="{Binding RoadClass}"></TextBox>
    <TextBlock Text="Surface:" VerticalAlignment="Center"></TextBlock>
    <TextBox Name="tbSurface" Text="{Binding Path=Surface, Mode=TwoWay}"></TextBox>

    <TextBlock Text="Depth:" VerticalAlignment="Center"></TextBlock>
    <telerikPrimitives:RadLoopingList x:Name="depthList" />

    <TextBlock Text="Width:" VerticalAlignment="Center"></TextBlock>
    <telerikPrimitives:RadLoopingList x:Name="widthList" />

    <TextBlock Text="Length:" VerticalAlignment="Center"></TextBlock>
    <telerikPrimitives:RadLoopingList x:Name="lengthList" />

    <TextBlock Text="Notes:" VerticalAlignment="Center"></TextBlock>
    <TextBox Name="tbNotes" Text="{Binding Path=Notes, Mode=TwoWay}"></TextBox>

    <TextBlock Text="Status:" VerticalAlignment="Center"></TextBlock>
   
    <telerikInput:RadListPicker Name="rlpStatus">
     <sys:String>Not Visited</sys:String>
     <sys:String>Visited (Complete)</sys:String>
     <sys:String>Visited (Not Complete)</sys:String>
     <sys:String>Abandoned</sys:String>
    </telerikInput:RadListPicker>

   </StackPanel>

  </ListBox>
 </Grid>

</phone:PhoneApplicationPage>

Could you possibly see if you can identify why the looping list does not appear - bound to be somethimng silly...

[Chris]

I think possibly this isn't quite what I want either - what I really wanted was something much closer to the Date selector control where I could select each unit in turn and change its value - having 10000 values to scroll though would be rather tiresome!  Is it possible to pnly have the list appear when you click on it - again just like the iPhone 'wheel' control?

[Deyan]

Hi Chris,

Thanks for writing.

The scenario you want to implement is easily achievable by using multiple instances of RadLoopingList ordered horizontally with their properties IsExpanded set to false and IsCentered set to true. I have prepared a sample project for you that demonstrates my idea. Please take a look at the attachment for further details.

All the best,
Deyan
the Telerik team

[Chris]

Almost there I hope - is it possible to hide the list again once you move off it?  Now if I scroll the first item the list becomes visible but doesn't hide again when I move on to item 2 and so on.

[Deyan]

Hi Chris,

You just need to handle the ScrollCompleted event of RadLoopingList and set the IsExpanded property of the corresponding RadLoopingList instance to false. Here is an updated code snippet from the project I sent you in my previous response that adds this new logic:

public MainPage()
{
    InitializeComponent();
    this.loopingList1.DataSource = new IntegerLoopingListDataSource(10);
    this.loopingList1.ScrollCompleted += this.OnLoopingList_ScrollCompleted;
    this.loopingList1.SelectedIndexChanged += this.OnLoopingList_SelectedIndexChanged;
    this.loopingList2.DataSource = new IntegerLoopingListDataSource(10);
    this.loopingList2.SelectedIndexChanged += this.OnLoopingList_SelectedIndexChanged;
    this.loopingList2.ScrollCompleted += this.OnLoopingList_ScrollCompleted;
    this.loopingList3.DataSource = new IntegerLoopingListDataSource(10);
    this.loopingList3.SelectedIndexChanged += this.OnLoopingList_SelectedIndexChanged;
    this.loopingList3.ScrollCompleted += this.OnLoopingList_ScrollCompleted;
    this.loopingList4.DataSource = new IntegerLoopingListDataSource(10);
    this.loopingList4.SelectedIndexChanged += this.OnLoopingList_SelectedIndexChanged;
    this.loopingList4.ScrollCompleted += this.OnLoopingList_ScrollCompleted;
    this.UpdateSelection();
}

private void OnLoopingList_ScrollCompleted(object sender, Telerik.Windows.Controls.LoopingList.LoopingListScrollEventArgs e)
{
    RadLoopingList typedSender = sender as RadLoopingList;
    typedSender.IsExpanded = false;
}

I hope this helps.

Regards,
Deyan
the Telerik team