Carousel - top item auto select

13 posts, 0 answers
  1. Ahi
    Ahi avatar
    2 posts
    Member since:
    Mar 2011

    Posted 26 Jul 2011 Link to this post

    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
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 27 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for WPF is Visual Studio 2017 Ready
  4. Ahi
    Ahi avatar
    2 posts
    Member since:
    Mar 2011

    Posted 27 Jul 2011 Link to this post

    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

  5. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 28 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. Greg
    Greg avatar
    1 posts
    Member since:
    Dec 2010

    Posted 30 Aug 2011 Link to this post

    I'm getting the same error as Ahi.  Is there another workaround you can suggest trying?
  7. Rieni De Rijke
    Rieni De Rijke avatar
    170 posts
    Member since:
    Mar 2010

    Posted 07 Jan 2012 Link to this post

    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?
  8. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 11 Jan 2012 Link to this post

    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

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

  9. Rieni De Rijke
    Rieni De Rijke avatar
    170 posts
    Member since:
    Mar 2010

    Posted 25 Jan 2012 Link to this post

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

    Is it possible to add a working example?
  10. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 25 Jan 2012 Link to this post

    Hi,

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

    All the best,
    Maya
    the Telerik team

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

  11. Rieni De Rijke
    Rieni De Rijke avatar
    170 posts
    Member since:
    Mar 2010

    Posted 25 Jan 2012 Link to this post

    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-)


  12. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 26 Jan 2012 Link to this post

    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

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

  13. Gabriel
    Gabriel avatar
    3 posts
    Member since:
    Mar 2013

    Posted 04 Mar 2013 Link to this post

    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?
  14. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 05 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready