how to control scrowling of RadPanebar

[Ravi]

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.

[Pavel R. Pavlov]

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

[Vivek]

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 .

[Pavel R. Pavlov]

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