11

Silverlight Toolkit チャートのレイアウトのカスタマイズに取り組んでいます。2 つの要件があります。

1) 凡例領域をチャートの下部に移動します (解決済み)。

2) 凡例内の要素のレイアウトを変更して、隣り合って表示されるようにします。デフォルトの列形式ではなく、{凡例 1}、{凡例 2}、{凡例 3}。


1) ControlTemplate を使用すると簡単に解決できました (以下を参照)。

2) 凡例項目のレイアウトを変更するにはどうすればよいですか? Chart の ControlTemplate をさらにカスタマイズすることで実現できますか、それとも Legend に独自の ControlTemplate が必要ですか?

チャート自体は次のように定義されます。

<chartingToolkit:Chart Name="chartCompareMain" 
                       Template="{StaticResource ChartLayoutLegendBottom}">
        <chartingToolkit:Chart.Axes>
             <chartingToolkit:DateTimeAxis Orientation="X" 
                        AxisLabelStyle="{StaticResource ChartDateFormat}">
             </chartingToolkit:DateTimeAxis>
             <chartingToolkit:LinearAxis  Orientation="Y"/>
        </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>

(既定のテンプレートに基づいて) 凡例項目を移動する ControlTemplate は次のとおりです。

<ControlTemplate x:Key="ChartLayoutLegendBottom" TargetType="chartingToolkit:Chart">
        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <dataviz:Title Grid.Row="0" Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />
                <Grid Grid.Row="1" Margin="0,15,0,15">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Column="0" >
                        <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                        <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
                    </chartingprimitives:EdgePanel>
                </Grid>
                <dataviz:Legend x:Name="Legend" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Row="2"/>
            </Grid>
        </Border>
    </ControlTemplate>
4

2 に答える 2

8

完全を期すために、ここにLegendStyle="{StaticResource BottomLegendLayout}（スタイルを理解するための非常に便利なツールはSilverlightデフォルトスタイルブラウザーです）

        <Style x:Name="BottomLegendLayout" TargetType="dataviz:Legend">
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="chartingToolkit:LegendItem" >
                    <Setter Property="IsTabStop" Value="False" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="chartingToolkit:LegendItem">
                                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="2,2,5,2"> 
                                        <Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0" VerticalAlignment="Center" />
                                        <dataviz:Title Content="{TemplateBinding Content}"  VerticalAlignment="Center"/>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="dataviz:Title">
                    <Setter Property="Margin" Value="0,5,0,10" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel"> <!-- change layout container for legend items to be horizonal -->
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dataviz:Legend">
                    <!--  This is the border around the legend area.
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="2">
                    -->
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <!-- Uncomment the next line to show a grid title. -->
                            <!--<dataviz:Title Grid.Row="0" x:Name="HeaderContent" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Style="{TemplateBinding TitleStyle}"/>-->
                            <ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" BorderThickness="0" Padding="0" IsTabStop="False">  
                                <ItemsPresenter x:Name="Items" /> 
                            </ScrollViewer>
                        </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
于 2009-12-17T20:25:36.307 に答える
7

チャートに以下を追加すると、（ここから）トリックが実行されます。

<chartingToolkit:Chart.LegendStyle>
    <Style TargetType="dataviz:Legend">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</chartingToolkit:Chart.LegendStyle>
于 2009-12-17T18:09:00.827 に答える