how to control scrowling of RadPanebar

4 posts, 0 answers
  1. Ravi
    Ravi avatar
    97 posts
    Member since:
    Jun 2012

    Posted 22 Feb 2013 Link to this post

    Hi There,
    I have a Panel bar control, by default all panel bar items are expanded
    there are atlease 15 items the fifteenth item is at the bottom of the panelbar and then we will see a scrollbar, to see that 15th item we need to scrolldown by using the scrollbar, i have a list box on the same view and i have listbox items are same as i have in the panelbar items, when i select 15th listbox item then the scrollbar of the panel bar should automatically scrolls to the corrosponding 15th panelbar item. 
    i need to maintain this in my ViewModel. 
    attached a screenshot for better understanding please check.
    Can you please help me out in this case?

    Thanks in advance,
    Regards,
    Srinivas.
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 27 Feb 2013 Link to this post

    Hi Srinivas,

    We prepared a project for you that uses the FrameworkElement.BringIntoView() method and brings the requested RadPanelBarItem. This method is invoked in code behind in ListBox.SelectionChanged but the solution is based on MVVM - the ListBox and PanelBar are bound to common ItemsSource collection of business objects. This way the SelectedItem in the ListBox can be used for finding the correct container - RadPanelBarItem:
    private void xListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
            {
                RadPanelBarItem container = this.xPanelbar.ItemContainerGenerator.ContainerFromItem(this.xListBox.SelectedItem) as RadPanelBarItem;
                if (container != null)
                {
                    container.BringIntoView();
                }
            }
    Furthermore, you can have the SelectedItem of the PanelBar bound to the same business object that is bound to the ListBox.SelectedItem if you need. This way you will have one item selected both in the ListBox and in the PanelBar:
    <ListBox SelectedItem="{Binding CurrentItem, Mode=TwoWay}" ...
     <telerik:RadPanelBar x:Name="xPanelbar" SelectedItem="{Binding CurrentItem, Mode=TwoWay}"

    Please let us know if this is suitable for you.

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Vivek
    Vivek avatar
    33 posts
    Member since:
    Oct 2012

    Posted 04 Mar 2013 Link to this post

    In the sample application i see that on clicking a item in listbox the corresponding rad panel bar item is brought into view using bringintoview method. But my requirement is such that  radpanel bar items have different heights and on clicking the item i want the rad panel bar item to be displayed at the top .
  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 06 Mar 2013 Link to this post

    Hello Srinivas,

    In order to achieve your goal you can use the Scroll() method of the built-in ScrollViewer of the RadPanelbar control. As argument of this method you can pass the upper left point of the container that you want to scroll to the top of the control. You can get that point by using the TransformToVisual().Transform() methods. This can be implemented with the following code:

    private void xListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
    {
        RadPanelBarItem container = this.xPanelbar.ItemContainerGenerator.ContainerFromItem(this.xListBox.SelectedItem) as RadPanelBarItem;
        if (container != null)
        {
            Point offsetPoint = container.TransformToVisual(xPanelbar).Transform(new Point(0, 0));
     
            xPanelbar.ScrollViewer.ScrollToVerticalOffset(xPanelbar.ScrollViewer.VerticalOffset + offsetPoint.Y);
             
        }
    }

    Let me know if you need further assistance.

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top