Selecting a carousel item without the mouse

[Paul]

Hello,

I have an interesting application for the RadCarousel control that I'm a litle stuck on. I've developed a multi-touch platform and am using the RadCarousel to display a series of demo applications. Instead of relying on the mouse for selecting items within the carousel, I'm using touch. Specifically, a single touch point on the forward and backward arrows will trigger the Carousel.ButtonNext or ButtonPrevious.PerformClick(). I've detected the touch-to-UI-element interaction using HitTest. This works great for UI elements like the next and previous buttons, because they don't overlap. However, a HitTest against a carousel item often results in multiple items returning a true HitTest result, because the images overlap with spline that I'm using and the resolution of the images. I'm running code that looks like the following, to test the carousel elements for HitTest interaction:

   foreach (DemoItemElement demoItemElement in mCarousel.Items)

                                    {

                                        if (demoItemElement.HitTest(singlePoint.Center.ToPoint()))

                                        {

                                            CarouselSelectItem(demoItemElement);

                                            demoItemSelected = true;

                                            break;

                                        }

                                    

Please note, that the CarouselSelectItem method is a cross-thread method that simply sets the Carousel.SelectedItem property.

I have a video of the application at http://www.bespokesoftware.org/multitouch/MultiTouch_Explorer.wmv

That video is an application screen capture, rather than an over-the-shoulder view, so you're just gonna have to take my word for it that the mouse isn't driving the application -- it's touch. I move and display the mouse pointer just for debugging purposes.

So my question is simply, how do I determine the top-most HitTested carosel item? I have a mouse emulator and could simply move and click the mouse -- but that breaks the notion of a touch-driven application. However, knowing that the mouse click works, I imagine that the carousel control is doing what I'm asking for and it's therefore possible. Is HitTest not the correct method to use in this regard?

Thanks.

[Deyan]

Hi Paul,

Thanks for contacting us and for the video provided.

In your case I think that you could consider the following approach:

IEnumerable<RadElement> zOrderedChildren =  this.radCarouselDemo.CarouselElement.CarouselItemContainer. GetChildren(ChildrenListOptions.ZOrdered);

foreach (RadElement element in zOrderedChildren)

{

if (element.HitTest(Point))

{

//Do some stuff

break;

}

}

Basically, I am using the RadCarousel.RadCarouselElement.CarouselItemContainer.GetChildren method with a  ChildrenListOptions.ZOrdered argument. As you may guess, this method will return a collection of items which are sorted according to their Z order on the display so that you will be sure that the first successfully hit-tested item will also be the topmost.

I hope this helps.

Do not hesitate to write back if you need further assistance.

Kind regards,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Paul]

Thanks Deyan,

That was exactly what I needed. The ChildrenListOptions.ZOrdered seems to provide the list in ascending z-order (where the highest value denotes the topmost element) so I just had to reverse the iteration. Works like a champ.

Thanks again.

Paul