Telerik Silverlight RadPanelBar 分层数据模板答案

【问题标题】：Telerik Silverlight RadPanelBar Hierarchical Data TemplateTelerik Silverlight RadPanelBar 分层数据模板
【发布时间】：2011-10-10 03:14:29
【问题描述】：

我需要使用 Telerik PanelBar 显示以下布局。

使用下面的代码，除了每个面板中的 92% 内容之外，我能够实现所有目标。

XAML：

<UserControl.Resources>
    <DataTemplate x:Key="PanelBarItemTemplate">
        <Grid x:Name="grdCategory" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60*"></ColumnDefinition>
                <ColumnDefinition Width="40*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid x:Name="grdSubCategory" Grid.Column="0" Style="{StaticResource CategoryLeftStyle}" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"></ColumnDefinition>
                    <ColumnDefinition Width="25*"></ColumnDefinition>
                    <ColumnDefinition Width="25*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding CategoryTitle}" Grid.Row="0" Grid.Column="0"/>
                <HyperlinkButton Grid.Row="0" Grid.Column="1" Style="{StaticResource DetailLinkStyle}" Content="Details" Click="Home_Click"></HyperlinkButton>
                <TextBlock Text="{Binding Score}" Grid.Row="0" Grid.Column="2"/>
            </Grid>
            <TextBlock Text="92%" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" FontSize="32" FontWeight="Bold"/>
        </Grid>
    </DataTemplate>

    <telerik:HierarchicalDataTemplate x:Key="PanelBarHeaderTemplate"
                                ItemsSource="{Binding SubReports}"
                                ItemTemplate="{StaticResource PanelBarItemTemplate}">
        <TextBlock Text="{Binding CategoryTitle}" />
    </telerik:HierarchicalDataTemplate>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <telerik:RadPanelBar x:Name="radPanelBar" 
                            ItemTemplate="{StaticResource PanelBarHeaderTemplate}"
                            IsSingleExpandPath="False" >
    </telerik:RadPanelBar>
</Grid>

在 xaml.cs 文件中，我提供了 ItemsSource。

有人可以帮帮我吗？

【问题讨论】：

我不认为 RadPanelBar 可以做你想要的“开箱即用”。在 Telerik 论坛 telerik.com/community/forums.aspx 上问这个问题可能会更好。在那里，您也许可以得到实际编写 Telerik 控件的人的帮助。

标签： silverlight silverlight-4.0 telerik radpanelbar

【解决方案1】：

所有这些代码都非常适合单个项目，但要放置相对于这些项目的 92%（在子项目之外），您还需要修改 RadPanelBar 的 ItemContainerStyle。最简单的方法是在 Blend 中提取它，然后在 PanelBarItemTopLevelTemplate 下查找名为 ItemsContainer 的部分。这是一个有点粗略的版本，但我在我的项目上创建了一个名为 CalcInt 的公共属性，它计算 SubReport 项目上的一个属性的总和，以便可以从基本项目级别绑定它。我修改后的代码如下所示：

                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                <telerik:LayoutTransformControl x:Name="transformationRoot">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <ItemsPresenter/>
                        <TextBlock Text="{Binding CalcInt}" FontSize="48" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>                     
                </telerik:LayoutTransformControl>
            </Grid>

我基本上将它从仅包含一个 ItemsPresenter 更改为具有一些布局的网格，以显示我的超大 TextBlock。

如果您需要代码示例或有任何其他问题，请随时在 Twitter 上联系我 - @EvanHutnick。

干杯！

-埃文

【讨论】：

【解决方案2】：

您好，我认为您需要定义一个转换器：IValueConverter 并绑定到标签，以便您可以计算百分比。马里奥

【讨论】：