水平对齐问题答案

【问题标题】：HorizontalAlignment Issue水平对齐问题
【发布时间】：2013-05-24 03:57:36
【问题描述】：

我正在使用 Silverlight 5 和 Telerik 库。
我已将我的 RadPanelBar HorizontalAlignment 设置为伸展。当我的控件第一次显示时，它会占用其父控件的大小。但问题是，当我的数据水平增长时，我的面板栏也会随之增长！

这是我的代码，我已经把所有的控件都放到了水平对齐来拉伸，但是没有效果：

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

谁能帮忙？

【问题讨论】：

标签： c# telerik silverlight-5.0 scrollviewer alignment

【解决方案1】：

在 Telerik Team 的支持下，问题得以解决。下面是 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>

必须从 RadPanelBar 默认样式中删除默认滚动查看器。

【讨论】：