- http://suehernandez.wordpress.com/2011/11/29/simple-silverlight-gantt-chart-using-toolkit/
- This Post
- http://suehernandez.wordpress.com/2011/11/30/silverlight-gantt-part-3/
- http://suehernandez.wordpress.com/2011/12/02/silverlight-gantt-part-4/
- http://suehernandez.wordpress.com/2011/12/07/silverlight-gantt-part-5/
- http://suehernandez.wordpress.com/2012/02/08/silverlight-gantt-part-6/
In my first post, I prep you with a teaser of what I’m trying to do with a creating a simplified Gantt Chart. Now let’s start looking at some of the features I specified in my bulleted list in the first post, as to the tasks we have to accomplish.
GETTING RID OF THE LEGEND
Before we begin, what we’ll need to do is to put 2 more xmlns references in our XAML:
xmlns:dataVisualizationToolkit=”clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit”
xmlns:toolkitChartingPrimitives=”clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit”
Now we can create a custom Style with a Control Template in it – basically the control structure that overrides the way it’s laid out by default. So above your Grid, you want to add a new section called <UserControl.Resources>. Inside this section, we’ll paste in some code:
<UserControl.Resources>
<!– Chart Template Style and Template –>
<Style x:Key=”ChartStyle1″ TargetType=”chartingToolkit:Chart”>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”chartingToolkit:Chart”>
<Border BorderBrush=”{TemplateBinding BorderBrush}”
BorderThickness=”{TemplateBinding BorderThickness}”
Background=”{TemplateBinding Background}”
Padding=”{TemplateBinding Padding}”>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<dataVisualizationToolkit:Title
Content=”{TemplateBinding Title}”
Style=”{TemplateBinding TitleStyle}”/>
<Grid Margin=”0,15,0,15″ Grid.Row=”1″>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”Auto”/>
</Grid.ColumnDefinitions>
<dataVisualizationToolkit:Legend x:Name=”Legend”
Grid.Column=”1″
Header=”{TemplateBinding LegendTitle}”
Style=”{TemplateBinding LegendStyle}”/>
<toolkitChartingPrimitives:EdgePanel x:Name=”ChartArea”>
<Grid Canvas.ZIndex=”-1″/>
<Border x:Name=”ChartAreaBorder”
BorderBrush=”#FF919191″
BorderThickness=”1″
Canvas.ZIndex=”10″>
</Border>
</toolkitChartingPrimitives:EdgePanel>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Now down below where we have our Chart, we add a new Property underneath Width called Style:
<chartingToolkit:Chart
x:Name=”testChart”
BorderBrush=”Transparent”
Height=”400″
Width=”400″
Style=”{StaticResource ChartStyle1}”>
To get rid of the Legend, all we have to do is comment it out in the Control Template: dataVisualizationToolkit:Legend (just put <!– before and –> after that whole line to comment it out).
Next post we’ll talk about how to add the “Today” red line to the chart template (I gave you a little teaser above – in the XAML notice how I have a space inside one of the borders?)
