silverlightxamlsilverlight-toolkit

Move Silverlight Chart Legend Below ChartArea


I'm using the Silverlight Control Toolkit and trying to position the legend below the chart. Based on the question here, I'm trying to use a control template, but I'm clearly missing something and nothing is showing in place of the chart. Any help would be greatly appreciated:

<UserControl x:Class="ClientCenterControls.ReportView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"             
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"           
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
    xmlns:project="clr-namespace:ClientCenterControls"
    xmlns:model="clr-namespace:ClientCenterControls.Model"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="600">

    <UserControl.Resources>
        <ControlTemplate x:Key="ChartLayoutBottom" TargetType="toolkit:Chart">
            <Border>
                <StackPanel Orientation="Vertical">
                    <toolkit:Title Grid.Row="0" Content="{TemplateBinding Title}" />
                    <toolkit:Legend x:Name="Legend" Header="{TemplateBinding LegendTitle}" Grid.Row="2" />
                </StackPanel>
            </Border>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                <GradientStop Color="Silver" />
                <GradientStop Color="Gray" Offset="0.5"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>


        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="350" />
            <ColumnDefinition Width="250" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25" />
            <RowDefinition />
        </Grid.RowDefinitions>


        <sdk:Label x:Name="headerLabel" Content="Client Center CSA" 
                   HorizontalAlignment="Center" Foreground="#444"
                   Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" />

        <Controls:DataGrid x:Name="gridDrivers" ItemsSource="{Binding Drivers}"
            Grid.Row="1" Grid.Column="0">
        </Controls:DataGrid>


        <Controls:DataPager x:Name="dataPager1" Source="{Binding Drivers}"
            Grid.Row="1" Grid.Column="0" PageSize="5" />

        <toolkit:Chart x:Name="chartDrivers" Template="{StaticResource ChartLayoutBottom}"
         Grid.Row="1" Grid.Column="1">
            <toolkit:Chart.Series>
                <toolkit:PieSeries 
                        ItemsSource="{Binding Drivers}"
                        IndependentValueBinding="{Binding DriverIdentifier}" 
                        DependentValueBinding="{Binding ScoreImpact}"
                          />
            </toolkit:Chart.Series>
        </toolkit:Chart>
    </Grid>
</UserControl>

Solution

  • From the investigation into the original Template of the Chart, it seems the you miss an EdgePanel object with the name "ChartArea" which is a TemplatePart of the Chart.

    Try using this template:

    <ControlTemplate x:Key="SomeKey" TargetType="toolkit:Chart">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <toolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}"/>
                <Grid Margin="0,15,0,15" Grid.Row="1">
                    <!--Original definitions-->
                    <!--<Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>-->
                    <!--New definitions for the Legend to be bellow the Chart-->
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <!--Original definition, replaced by Grid.Row="1" on the Legend object-->
                    <!--Grid.Column="1"-->
                    <toolkit:Legend x:Name="Legend" Grid.Row="1" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}"/>
                    <System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                        <Grid Style="{TemplateBinding PlotAreaStyle}" Canvas.ZIndex="-1"/>
                        <Border BorderBrush="#FF919191" BorderThickness="1" Canvas.ZIndex="10"/>
                    </System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel>
                </Grid>
            </Grid>
        </Border>
    </ControlTemplate>