HorizontalAlignment Problem

[Levon]

I have aligned my RadPanelBar horizontally using the stretch property. So when my page loads, it is displayed as I want. But when I expand it clicking on the header, it grows bigger than my page size. To see the pictures of what I say you can visit here.
The items that i load from database grow bigger than the pages' width, but my ItemsControl sits in a ScrollViewer, which horizontalalignment is set to stretch. My code is provided below:

<UserControl.Resources>
        <DataTemplate x:Key="ContentTemplate">
            <ScrollViewer HorizontalAlignment="Stretch"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Disabled"
                          VerticalAlignment="Top">
                <ItemsControl x:Name="Test"
                              ItemsSource="{Binding Items}"
                              HorizontalAlignment="Stretch">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel Orientation="Vertical"
                                               Height="220"
                                               HorizontalAlignment="Stretch">
                            </toolkit:WrapPanel>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <controls:ParameterItem Style="{StaticResource ParamItem}"
                                                    Description="{Binding Code}"
                                                    ParamValue="{Binding Value}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </DataTemplate>
    </UserControl.Resources>

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

      <telerik:RadBusyIndicator IsBusy="{Binding IsLoading}">
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>

            <Grid HorizontalAlignment="Stretch" Height="28">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="90" />
                </Grid.ColumnDefinitions>

                <Grid.Background>
                    <ImageBrush ImageSource="/ISDN.NSS.UI.Themes;component/Images/HeaderBG.png" />
                </Grid.Background>

                <TextBlock Grid.Column="0" FontSize="13" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Arial" Margin="8,0,0,0" Text="Model Parameters"></TextBlock>
            </Grid>
                <telerik:RadPanelBar Grid.Row="1"
                                     Margin="2"
                                     ItemsSource="{Binding Parameters}"
                                     HorizontalAlignment="Stretch"
                                     >
                    <telerik:RadPanelBar.ItemTemplate>
                        <telerik:HierarchicalDataTemplate ItemTemplate="{StaticResource ContentTemplate}"
                                                          ItemsSource="{Binding RootItems}">
                            <TextBlock Text="{Binding Name}"
                                   FontSize="13"
                                   FontWeight="Bold"
                                   FontFamily="Arial"/>
                        </telerik:HierarchicalDataTemplate>
                    </telerik:RadPanelBar.ItemTemplate>
                </telerik:RadPanelBar>
            </Grid>
        </telerik:RadBusyIndicator>
    </Grid>

What do I do wrong?

[Tina Stancheva]

Hello Levon,

The RadPanelBar has a built-in ScrollViewer and it is displayed as soon as the control can't properly display its content inside the available area. I believe this is exactly the case you've encountered. And if you need to display your ScrollViewer instead, then you can edit the default RadPanelBar ControlTemplate and remove the ScrollViewer element.

Also please note that when you set the PanelBar HorizontalAlignment to Stretch, the control will take all available space but if its items need more space to display, it will try to expand further. And if your overall layout allows the control to take more space, then it will do so. In that case, you will have to either make sure the panel which hosts the control doesn't allow it to further expand (you can apply a MaxWidth or a Width on the column in which the RadPanelBar is displayed), or you need to specify the RadPanelBar Width property.

I attached a sample solution where I removed the ScrollViewer element from the RadPanelBar ControlTemplate and I also placed the control in a Grid Column with predefined Width. Please have a look at the solution and let us know if you need more information.

Regards,
Tina Stancheva
the Telerik team

[Levon]

Thank you Tina,
the problem is solved.