3

telerikPanelBarを使用して次のレイアウトを表示する必要があります。

RadPanelBarテンプレート

以下のコードで、各パネルの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を提供しました。

誰かが私を助けることができますか？

4

2 に答える 2

0

すべてのコードは個々のアイテムに対して完全に機能しますが、92% をそれらのアイテム (サブアイテムのやや外側) に対して相対的に配置するには、RadPanelBar の ItemContainerStyle も変更する必要があります。最も簡単な方法は、Blend で抽出し、PanelBarItemTopLevelTemplate の下にある ItemsContainer という名前のセクションを探すことです。これはやや大雑把なバージョンですが、SubReport アイテムのプロパティの合計を計算する CalcInt というアイテムのパブリック プロパティを作成して、ベース アイテム レベルからバインドできるようにしました。私の変更されたコードは次のようになります。

                <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) までお問い合わせください。

乾杯！

-エヴァン

于 2011-08-03T16:11:46.473 に答える
0

こんにちは、コンバーターを定義する必要があると思います: IValueConverter とラベルにバインドして、パーセントを計算できるようにします。マリオ

于 2011-11-29T00:16:49.840 に答える