Display item in center of path

7 posts, 0 answers
  1. Scott
    Scott avatar
    43 posts
    Member since:
    Nov 2007

    Posted 01 Oct 2008 Link to this post

    I have a horizontal path that my RadCarouselPanel follows.  When there are only 1 or 2 items bound to my ListBox (where the RadCarouselPanel is), I want the items to appear in the center of my path instead of on the left side.  Is there a way to tell an item to appear in the center of the path?
  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 03 Oct 2008 Link to this post

    Hi Scott,

    RadCarouselPanel has a method called BringItemIntoView that moves an item to the center of the path but it is declared as internal in the current WPF release. The method will be public in our next release.
    If the absence of this method in our public API is an impediment to your work we can send you a custom build where that method is available. You may request a custom build by openning a support ticket.

    Regards,
    Milan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Scott
    Scott avatar
    43 posts
    Member since:
    Nov 2007

    Posted 08 Oct 2008 Link to this post

    Thank you for the build.  My code works now, just as your example does.  When I click on a ListBox item, that is not in the center, the carousel is rotated to bring that one into the center.

    The problem that remains is that say I have only 2 items in my ListBox.  When the ListBox is bound, the carousel shows my two items right at the beginning of my path and does not bring either one of them to the center.  In these cases, the user can't even see my items because the opacity is set lower for items at the ends of my paths.  So to fix, I tried to select the center item in my ListBox programmatically.  This fires my OnItemSelected event and finds the panel and the correct item, however, it does nothing to the carousel but show that my item was selected.  It doesn't rotate it to the center like I want.

            private void OnItemSelected(object sender, RoutedEventArgs e) 
            { 
                // the UIElement that was selected 
                ListBoxItem item = (ListBoxItem) e.OriginalSource; 
                RadCarouselPanel panel = GetCarouselPanel(sender as ItemsControl); 
                panel.BringItemIntoView(item, true); 
            } 

    my bind method:
     
                            RadCarouselPanel panel = this.GetCarouselPanel(lstThumbsCarousel); 
                      
                            if (panel != null) 
                            {  
                                int count = lstThumbsCarousel.Items.Count; 
                                if (count > 0) 
                                { 
                                    int midPoint = count / 2; 
                                    lstThumbsCarousel.SelectedItem = lstThumbsCarousel.Items[midPoint]; 
                                } 
                                 
                            } 

  5. Jimmy
    Admin
    Jimmy avatar
    16 posts

    Posted 10 Oct 2008 Link to this post

    Hi Scott,

    I have managed to reproduce your problem -- it is triggered by the OnItemSelected event Handler. It happens because your two items are right at the beginning of your path(really because you actually have no other items on the path). Since RadCarouselPanel has no knowledge of the selection (this logic should come from its parent, in your case this is your ListBox control that hosts RadCarouselPanel), it will not try and bring any item into view as it is loaded. This has to be done manually by calling  the either BringItemIntoView() or BringDataItemIntoView() methods, or any of the IScrollInfo methods for that matter they will all realize and bring your data into view.

    Now the difference beween using BringItemIntoView() or BringDataItemIntoView() is that the first will look for the item in the RadCarouselPanel Children collection. That means you can use the method only with realized items. The second method will use the items generator to find the right data item in the ItemsControl Children Collection (your ListBox children collection).

    However the BringDataItemIntoView(), formerly an internal method, was never meant to work in scenarios where initially you'll have no realized items like it is your case. For this reason we have made some changes to cover such situations. We have a new build reflecting these changes that could be sent to you. To do that please open a new support ticket.
     
    If you decide to go that route, you could modify your OnItemSelected event handler so that it calls the BringDataItemIntoView() (not the BringItemIntoView()) method at the end. This will select and bring into view the right CarouselItem.

    private void OnItemSelected(object sender, RoutedEventArgs e)   
    {   
        // the UIElement that was selected   
        ListBoxItem item = (ListBoxItem) e.OriginalSource;   
        RadCarouselPanel panel = GetCarouselPanel(sender as ItemsControl);   
        panel.BringDataItemIntoView(((ListBox)sender).SelectedItem);   
    }  


    Sorry for the inconvenience, and thanks for helping improve our product!


    Best wishes,
    Jimmy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Maria Im
    Maria Im avatar
    10 posts
    Member since:
    Sep 2012

    Posted 11 Nov 2009 Link to this post

    Is there a way i can remove the opacity to items that are not in the center? I want a solid background to all carouselitem. No transparency. i tried all sorts of things and the magic didnt happen.
  7. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 12 Nov 2009 Link to this post

    Hi Maria Im,

    If you would like to disable the opacity effect all together you can use the IsOpacityEnable property of RadCarouselPanel. When that property is set to false all items will be opaque.

    If you would like to to control the opacity of the items along the path you should use the OpaityStops collection of RadCarouselPanel. Our carousel sample called RadCarouselPanel demonstrates how different effects like opacity, scaling, etc can be controlled.

    I have also prepared a small sample application that demonstrates how you can configure the carousel to render all items that are not in the center as transparent.

    Hope this information is helpful. 


    Best wishes,
    Milan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Maria Im
    Maria Im avatar
    10 posts
    Member since:
    Sep 2012

    Posted 12 Nov 2009 Link to this post

    Thanks. That solved my problem.
Back to Top
UI for WPF is Visual Studio 2017 Ready