Defining a Silverlight column derived from DataGridTemplateColumn

Question

I'm learning Silverlight (from scratch, I'm feeling a bit like a fish out of water here!). I'm having a look at the DataGrid class, and am playing around with custom templates for columns and column headers.

I want to display a grid that has a collection of columns that have a small image in the header (different image for each column), and display-only values in the cells, with each column's values being bound to a different property on the bound data.

I've done some reading and got it to work for one column with the xaml below. What I want to do is bundle this column up into some kind of reusable column, and then just add multiple instances of them in my grid, specifying values to define what image to use and what property to bind to.

Can someone help me out with some suggestions? I'm using Silverlight 3.0, btw.

here's the xaml I'm using for one column:

<data:DataGrid x:Name="_bidGrid" IsReadOnly="true" CanUserResizeColumns="False">
    <data:DataGrid.Columns>
        <data:DataGridTemplateColumn>
            <data:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding <bound property name goes here>}"/>
                </DataTemplate>
            </data:DataGridTemplateColumn.CellTemplate>
            <data:DataGridTemplateColumn.HeaderStyle>
                <Style TargetType="dataprimitives:DataGridColumnHeader">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Image Source="<image url goes here>"/>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </data:DataGridTemplateColumn.HeaderStyle>
        </data:DataGridTemplateColumn>
    </data:DataGrid.Columns>
</data:DataGrid>

Answer 1

Hi Niall,

Bundling the actual col into a style would mean you'd have the same image for each col in the grid, you could define a style for each diff col header, then when you define your cols you can reference th style, eg:

<data:DataGridTemplateColumn HeaderStyle="{StaticResource ProductNameColHeadStyle}"

The full XAML below illustrates this better, copy this in to a new SL project MainPage.xaml and run in to see results...

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    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:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    xmlns:System_Windows_Controls_Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls" 
    xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:System_Windows_Controls_DataVisualization_Charting_Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    xmlns:inputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" 
    xmlns:dataPrimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"             
    mc:Ignorable="d" Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources> 

            <Style x:Key="ProductNameColHeadStyle"  TargetType="dataPrimitives:DataGridColumnHeader">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock Text="prod name image goes here"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ProductDescColHeadStyle"  TargetType="dataPrimitives:DataGridColumnHeader">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock Text="prod description image goes here"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </Grid.Resources>




        <data:DataGrid Name="dta" AutoGenerateColumns="False" >

            <data:DataGrid.Columns>

                <data:DataGridTemplateColumn HeaderStyle="{StaticResource ProductNameColHeadStyle}">                    
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="Binding to prod name here"></TextBlock>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>                    
                </data:DataGridTemplateColumn>

                <data:DataGridTemplateColumn HeaderStyle="{StaticResource ProductDescColHeadStyle}">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="Binding to prod desc here"></TextBlock>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>

            </data:DataGrid.Columns>   

        </data:DataGrid>

    </Grid>


</UserControl>