Sue Hernandez's SharePoint Blog

SharePoint and Related Stuff

Silverlight Gantt Part 2

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: