RadPanelBarItem Scrollviewer not visible

[Société CompuGROUP Medical Solutions]

Hello,

I'm trying to make visible Scrollbar for the radPanelBarItem and not for the RadPanelBar control.
 How can i do that ?
this code doesn't run.

 <Grid x:Name="LayoutRoot" Background="White">

        <telerik:RadPanelBar Name="radPanelBar1" HorizontalAlignment="Left" Width="400" Height="160" ScrollViewer.VerticalScrollBarVisibility="Disabled">

            <telerik:RadPanelBarItem ScrollViewer.VerticalScrollBarVisibility="Auto">

                <telerik:RadPanelBarItem.Header>

                    <TextBlock Text="My Header 1"></TextBlock>

                </telerik:RadPanelBarItem.Header>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 2"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 3"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 4"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 5"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 6"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 7"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 8"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 1"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 9"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 10"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 11"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 12"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 13"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 14"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 15"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 16"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

            </telerik:RadPanelBarItem>

            <telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem.Header>

                    <TextBlock Text="My Header 2"></TextBlock>

                </telerik:RadPanelBarItem.Header>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 21"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 22"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

            </telerik:RadPanelBarItem>

            <telerik:RadPanelBarItem>

                <telerik:RadPanelBarItem.Header>

                    <TextBlock Text="My Header 3"></TextBlock>

                </telerik:RadPanelBarItem.Header>

                <telerik:RadPanelBarItem>

                    <telerik:RadPanelBarItem.Header>

                        <TextBlock Text="My Element 31"></TextBlock>

                    </telerik:RadPanelBarItem.Header>

                </telerik:RadPanelBarItem>

            </telerik:RadPanelBarItem>

        </telerik:RadPanelBar>

[Zarko]

Hello Société Axilog,

 To achieve this you have to customize the default RadPanelBarItem style. Could you please examine the attached project and if you have further questions feel free to ask?

Greetings,

Zarko

the Telerik team

[Marzio]

Hi,
can you tell me what exactly did you modified from the default Style?

I need to replicate the same behaviour from my customized Office Blu PanelBarItem :)

Marzio.

[Tina Stancheva]

Hello Marzio,

In the RadPanelBarItem ControlTemplate you need to wrap the ItemsPresenter that displays the child items in a ScrollViewer. You can find the ItemsPresenter in the ItemsContainer Grid element of the template:

<Grid x:Name="ItemsContainer"
        Grid.Row="1"
        Visibility="Collapsed">
    <telerik:LayoutTransformControl x:Name="transformationRoot">
        <ScrollViewer HorizontalScrollBarVisibility="Auto"
             telerik:StyleManager.Theme="{StaticResource Theme}"
             VerticalScrollBarVisibility="Auto">
            <ItemsPresenter />
        </ScrollViewer>
    </telerik:LayoutTransformControl>
</Grid>

Let us know if you have more questions.

All the best,
Tina Stancheva
the Telerik team