Numeric input using looping list

9 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2011

    Posted 05 Oct 2011 Link to this post

    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?
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 05 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2011

    Posted 05 Oct 2011 Link to this post

    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!
  5. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 05 Oct 2011 Link to this post

    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:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2011

    Posted 05 Oct 2011 Link to this post

    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...
  7. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2011

    Posted 05 Oct 2011 Link to this post

    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?
  8. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 06 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  9. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2011

    Posted 06 Oct 2011 Link to this post

    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.
  10. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 06 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner