水平对齐问题

Question

I am using Silverlight 5 and Telerik library.
I have set my RadPanelBar HorizontalAlignment to stretch. When my control is displayed the first time, it takes the size of its parent control. But the problem is, when my data grows horizontally, my panelbar grows with it!

Here goes my code, I have put all the controls to horizontalalignment to stretch, but no effect:

    <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>

Can anyone help?

Answer 1

The problem is solved with the support of Telerik Team. Here goes the code for the edited template of the RadPanelBar:

<telerik:Office_BlackTheme x:Key="Theme" />
<SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000" />
<Style x:Key="RadPanelBarStyle" TargetType="telerik:RadPanelBar">
    <Setter Property="ExpandMode" Value="Single" />
    <Setter Property="UseLayoutRounding" Value="True" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <telerik:PanelBarPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadPanelBar">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="OrientationStates">
                            <VisualState x:Name="Vertical">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                            Storyboard.TargetName="transformationRoot"
                                            Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <RotateTransform Angle="0" />
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Horizontal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                            Storyboard.TargetName="transformationRoot"
                                            Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <RotateTransform Angle="-90" />
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <telerik:LayoutTransformControl x:Name="transformationRoot">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <!--  <ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" Padding="{TemplateBinding Padding}" telerik:StyleManager.Theme="{StaticResource Theme}" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">  -->
                            <ItemsPresenter />
                            <!--  </ScrollViewer>  -->
                        </Border>
                    </telerik:LayoutTransformControl>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Orientation" Value="Vertical" />
    <Setter Property="IsTabStop" Value="true" />
    <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>

The default scrollviewer had to be removed from the RadPanelBar default style.