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
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
4 Answers, 1 is accepted
0

Adam
Top achievements
Rank 1
answered on 18 Jan 2011, 11:43 PM
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
Thanks again,
Adam Burdette
0
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.
Feel free to ask if you need more info.
Best wishes,
Petar Mladenov
the Telerik team
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
>
Best wishes,
Petar Mladenov
the Telerik team
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0

christine
Top achievements
Rank 1
answered on 25 May 2011, 10:15 PM
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>
<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>
0
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
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items