Carousel - top item auto select

[Ahi]

How can I make the item that is currently in focus (currently in view) automatically selected? 

Can someone give me a code snippet please?

Thanks

[Maya]

Hi Ahi,

The topmost item is the TopContainer. It is of type CarouselItem and a property of the RadCarouselPanel. What you may try to do is handle the TopContainerChanged event (of the RadCarouselPanel)  and set the IsSelected property of the TopContainer to "True". 
 
 

Kind regards,
Maya
the Telerik team

[Ahi]

Hi Maya,

thanks for the response. Here's my code.

((

RadCarouselPanel)MyCarousel.Panel).TopContainerChanged += new RoutedEventHandler(Library_TopContainerChanged);

 

private void Library_TopContainerChanged(object sender, EventArgs e)

{

    ((CarouselItem)((RadCarouselPanel)MyCarousel.Panel).TopContainer).IsSelected = true;

}

 

 

The first time the carousel is displayed, the top item is nicely selected. But as soon as I navigate/try to move to another item in the carousel, I get a null reference exception in RadCarouselPanel.cs - which of course I don't have.

I have actually also checked for nulls and enclosed the code in try catch. But the error is not happenning in the event handler where I have my code. So the error is thrown no matter what I do. Any suggestions?

here's the stack trace:

   at Telerik.Windows.Controls.RadCarouselPanel.CompositionTargetRendering(Object sender, EventArgs e) in c:\Builds\WPF_Scrum\Release_WPF\Sources\Development\Controls\Navigation\Carousel\RadCarouselPanel.cs:line 1761
   at System.EventHandler.Invoke(Object sender, EventArgs e)
   at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
   at System.Windows.Media.MediaContext.AnimatedRenderMessageHandler(Object resizedCompositionTarget)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.DispatcherOperation.InvokeImpl()
   at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
   at System.Threading.ExecutionContext.runTryCode(Object userData)
   at System.Runtime.CompilerServices.RuntimeHelpers.ExecuteCodeWithGuaranteedCleanup(TryCode code, CleanupCode backoutCode, Object userData)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Windows.Threading.DispatcherOperation.Invoke()
   at System.Windows.Threading.Dispatcher.ProcessQueue()
   at System.Windows.Threading.Dispatcher.WndProcHook(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.Dispatcher.InvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
   at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
   at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
   at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
   at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
   at System.Windows.Threading.Dispatcher.Run()
   at System.Windows.Application.RunDispatcher(Object ignore)
   at System.Windows.Application.RunInternal(Window window)
   at System.Windows.Application.Run(Window window)
   at System.Windows.Application.Run()
   at Desktop.App.Main() in C:\Projects\Corona\2.0\Dev\src\Corona.root\Corona\Desktop\obj\Debug\App.g.cs:line 0

Thanks
Ahi

[Maya]

Hi Ahi,

May you try to add the following check:

var carouselItem = ((CarouselItem)((RadCarouselPanel)MyCarousel.Panel).TopContainer);
if(!this.RadCarousel1.FindCarouselPanel().IsAnimating && carouselItem != null)

     {                              

           carouselItem.IsSelected = true;

     }                                      

Do you still get the same exception ?
  

All the best,
Maya
the Telerik team

[Greg]

I'm getting the same error as Ahi.  Is there another workaround you can suggest trying?

[Rieni De Rijke]

How did this topic ends?

How can we asure that the TopContainer always is selected.
If you click on an item this item becomes the TopContainer and will be selected.
If you use the buttons (or the arrow-keys) the TopContainer changes, but the selected item is NOT changing.

How can we select the TopContainer when using the buttons or the arrow-keys?

[Maya]

Hello,

Could you verify whether the animation has ended on setting the selected item ? Did you add the check for the IsAnimating property ? Which is the version you are working with ?  

Greetings,
Maya
the Telerik team

[Rieni De Rijke]

I cannot find an IsAnimating - property in my RadCarousel.
I used version 2001.3.1227.40

Is it possible to add a working example?

[Maya]

Hi,

IsAnimating is a property of RadCarouselPanel. You can refer to the posts above for a reference. 

All the best,
Maya
the Telerik team

[Rieni De Rijke]

I have a 

<telerik:RadCarousel x:Name="menuCarousel" Grid.Column="0" ItemsSource="{Binding}" AutoGenerateDataPresenters="True"
                             Background="White" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" FlowDirection="RightToLeft"
                             ItemTemplate="{DynamicResource TableTemplate}"  IsManipulationEnabled="True" IsSynchronizedWithCurrentItem="True" 
                             CanUserSelect="True"/>          
There is a...
<DataTemplate x:Key="TableTemplate" >
                <Grid Height="84" Width="100" Opacity="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="64"></RowDefinition>
                        <RowDefinition Height="20"></RowDefinition>
                    </Grid.RowDefinitions>      
                    <Image Grid.Row="0" Height="64" Width="64" Source="{Binding Path=Source}"/>
                    <TextBlock FontSize="12" FontWeight="Bold" HorizontalAlignment="Center" Grid.Row="1" Text="{Binding Path=Tag}"/>
                </Grid>
            </DataTemplate>
 

In code behind I Bind a list with Images to the Carousel:

	menuCarousel.ItemsSource = GetImages();

And then when my grid is loaded:

	private void GridLoaded(object sender, RoutedEventArgs e)
        {
            menuCarousel.FindCarouselPanel().TopContainerChanged += MainWindowTopContainerChanged;
	    menuCarousel.FindCarouselPanel().ItemsPerPage = 13;
            menuCarousel.FindCarouselPanel().IsPathVisible = true;
            var path = (Path)ModulGrid.FindResource("CarouselPath");
            menuCarousel.FindCarouselPanel().Path = path;
            menuCarousel.SelectedItem = menuCarousel.Items[3];
        }

	private void MainWindowTopContainerChanged(object sender, RoutedEventArgs e)
        {
            var item = ((CarouselItem)((RadCarouselPanel)menuCarousel.Panel).TopContainer);
            if (!menuCarousel.FindCarouselPanel().IsAnimating && item != null)
            {
                item.IsSelected = true;  
            }    
            //To check...
            Title = ((FrameworkElement) (((RadRowItem) (item)).Item)).Tag as string;
        }

What we (but mostly our cutomers and the product/sales-boys) want:

1. The TopContainer is always the same as the selected Item/Image.
2. The user can select with: the arrow-keys, the mouse, the navigate-buttons and mouse-scroll.
3. The selected Item is highligted.
Or you can say: they expect what you should expect.

When using mouseclick all this works.
Using scroll and the navigate-buttons selects the right Item/Image, but it does NOT 
change the highlighted Item.
Using the arrowkeys is a bit trickey. Difficult to get the focus right and also here:
it does NOT change the highlighted Item.

Think how much a working eksample could explain!  8-)

[Maya]

Hi Rieni,

I am attaching a sample project illustrating how you can achieve similar scenario as the one you described. Could you take a look at it and let me know whether it will meet your exact requirements  ? 

Greetings,
Maya
the Telerik team

[Gabriel]

Great solution, works almost perfectly.

Except it breaks on data sets with an even number of items (two or four) :\.  Can this be fixed easily?

[Maya]

Hi Gabriel,

I tested the case on the sample above when there are four items in the source, but still it works as expected. Could you clarify what is the exact behavior that you get ? What is broken when you have even number of items ?  

All the best,
Maya
the Telerik team