Question

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>

Answer 1

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>