RadPanelBarItem Size Restrictions

[Adam]

When expanded my RadPanelBarItem grows past it's container giving the RadPanelBar a vertical scroll bar.  How do I make it such that the RadPanelBar does not exceed its bounds and the RadPanelBarItem displays the vertical scroll bar?

I am using this control within a docking panel, could it be that the automatic size distribution of this type of layout control is causing this behavior?  If that is the case would my desired behavior come about if I simply removed the docking panel and declared grid columns and rows?

Thank you for your time,
Adam Burdette

[Adam]

So I tried my above idea of getting rid of the docking panel container and it did not help at all, the control behaves the same.  I'm guessing at this point that this is expected behavior, however if there is a way to do what I proposed please let me know.

Thanks again,
Adam Burdette

[Petar Mladenov]

Hello Adam,

In order to use ScrollViewer in the RadPanelBarItems instead of the one that is built in the PanelBar , you fisrst have to set ScrollViewer.VerticalScrollBarVisibility= "Hidden". Then you have to use ScrollViewer inside your RadPanelBarItems and in order to view them you have to limit the PanelBaritem`s height. The last could be achieved in several ways. The simplest way is to set MaxHeight of  both the Panelbar and its items. Another way could be to bind these properties or the Height property to the height of a parent Container that holds the panel bar. Please check out this approach and let me know if it works in your scenario.

<telerik:RadPanelBar x:Name="panelBar" Grid.Row="1" MaxHeight="400" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                     <telerik:RadPanelBarItem Header="Item 1" MaxHeight="350">
                     <ScrollViewer>
                         <StackPanel Orientation="Vertical">
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                 </StackPanel>
                     </ScrollViewer>
                 </telerik:RadPanelBarItem>
                     <telerik:RadPanelBarItem Header="Item 2" MaxHeight="350">
                     <ScrollViewer>
                         <StackPanel Orientation="Vertical">
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                     <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                 </StackPanel>
                     </ScrollViewer>
                 </telerik:RadPanelBarItem>
                     <telerik:RadPanelBarItem Header="Item 3" MaxHeight="350">
                     <ScrollViewer>
                     <StackPanel Orientation="Vertical">
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                         <TextBlock Text="ComponentType" FontWeight="Bold" Margin="5,5,0,0"></TextBlock>
                         <TextBlock Text="GiveDosageForm" Margin="5,0,0,0"></TextBlock>
                     </StackPanel>
                     </ScrollViewer>
                 </telerik:RadPanelBarItem>
             </telerik:RadPanelBar>

Feel free to ask if you need more info.

Best wishes,
Petar Mladenov
the Telerik team

[christine]

I am having the same issue only I am binding to my radPanelBarItem instead of defining them explicitly (in the example you provided) so how can I get the radPanelBarItem area to scroll when content extends beyond the viewable window?

                    <StackPanel Background="{StaticResource LinearGradientBrush_BlueBackground}" Grid.Row="2" >
                    <telerik:RadPanelBar VerticalAlignment="Stretch" x:Name="radPanelBar_DepositDetails" telerikControls:Theming.Theme="Office_Blue" ExpandMode="Multiple" >
                        <telerik:RadPanelBarItem x:Name="RadPanelBarItem_DepositDetails"  IsExpanded="True" IsSelected="False" Focusable="False" ItemTemplate="{StaticResource RadPanelBarItemTemplate_DepositDetails}" ScrollViewer.CanContentScroll="True">
                            <telerik:RadPanelBarItem.Header>
                                <TextBlock Text="Deposit Details" Margin="5" />
                            </telerik:RadPanelBarItem.Header>
                        </telerik:RadPanelBarItem>
                        <telerik:RadPanelBarItem x:Name="RadPanelBarItem_AccountDetails"  IsExpanded="True" IsSelected="False" Focusable="False" ItemTemplate="{StaticResource RadPanelBarItemTemplate_AccountDetails}" ScrollViewer.CanContentScroll="True">
                            <telerik:RadPanelBarItem.Header>
                                <TextBlock Text="Account Details" Margin="5" />
                            </telerik:RadPanelBarItem.Header>
                        </telerik:RadPanelBarItem>
                    </telerik:RadPanelBar>

[Petar Mladenov]

Hi christine,

You can use ListBox in a HierarchicalDataTemlate. Please examine the project in the attached archive and let us know if it satisfies you. Feel free to ask if you also need more info.

All the best,
Petar Mladenov
the Telerik team