Telerik Silverlight Шаблон иерархических данных RadPanelBar - PullRequest
Новая
       22

Telerik Silverlight Шаблон иерархических данных RadPanelBar

3 голосов
/ 21 июля 2011

Мне нужно отобразить следующий макет с Telerik PanelBar.

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.

Кто-нибудь может мне помочь?

Ответы [ 2 ]

0 голосов
/ 29 ноября 2011

Привет. Я думаю, вам нужно определить конвертер: IValueConverter и привязать его к метке, чтобы вы могли рассчитать процент.Mario

0 голосов
/ 03 августа 2011

Весь этот код прекрасно работает для отдельных элементов, но чтобы разместить 92% относительно этих элементов (несколько за пределами подпунктов), вам также необходимо изменить ItemContainerStyle RadPanelBar.Самый простой способ - извлечь его из 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.

Приветствия!

-Evan

...