2011-07-21 62 views
3

我需要使用telerik PanelBar显示以下布局。Telerik Silverlight RadPanelBar分层数据模板

RadPanelBar template

下面我的代码是能够实现的一切,除了在每个面板的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。

有人可以帮我吗?

+1

我不认为RadPanelBar可以做你想要的'开箱'。在Telerik论坛http://www.telerik.com/community/forums.aspx上提问这个问题可能会更好。在那里你可能能够得到实际编写Telerik控件的人的帮助。 –

回答

0

所有代码对于单个项目都能很好地工作,但为了将相对于这些项目的92%(稍微在子项目之外)放置,您还需要修改RadPanelBar的ItemContainerStyle。最简单的方法是在Blend中提取它,然后查找名为ItemsContainer的PanelBarItemTopLevelTemplate下的部分。这是一个粗略的版本,但是我在我的项目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。

干杯!

-Evan

0

您好我想你需要定义一个转换器:的IValueConverter并绑定到标签,这样就可以计算出,按百分比计算。 马里奥