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>
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>