Azure DevOps, Scrum, & .NET Software Leadership and Consulting Services

Free course! Predicting the Future, Estimating, and Running Your Projects with Flow Metrics

Add a Footer Row to a Silverlight 3 DataGrid


A missing feature in the Silverlight 3 DataGrid is the ability to add a footer row.  For example, if you were trying to create a timesheet application using Silverlight, you’d want to be able to show the total number of hours for each day as shown in the image below. 

image

The solution that I came up with is slightly hack-y but definitely works.  Rather than relying on the DataGrid to provide a footer, create your own UserControl that snaps a footer row on to the bottom of the grid using a StackPanel.  

<StackPanel Orientation=”Vertical”>
    <data:DataGrid x:Name=”m_grid”
            DataContext=”{Binding Mode=OneWay}”
            ItemsSource=”{Binding Weeks, Mode=TwoWay}”
            HeadersVisibility=”Column” GridLinesVisibility=”All”
            AutoGenerateColumns=”False” LayoutUpdated=”m_grid_LayoutUpdated” >
        <data:DataGrid.Columns>
            <data:DataGridTextColumn Binding=”{Binding Task.Value, Mode=TwoWay}” Header=”Project Name”/>
            <data:DataGridTextColumn Binding=”{Binding Monday.Value, Mode=TwoWay}” Header=”Monday”/>
            <data:DataGridTextColumn Binding=”{Binding Tuesday.Value, Mode=TwoWay}” Header=”Tuesday” />
            <data:DataGridTextColumn Binding=”{Binding Wednesday.Value, Mode=TwoWay}” Header=”Wednesday” />
            <data:DataGridTextColumn Binding=”{Binding Thursday.Value, Mode=TwoWay}” Header=”Thursday” />
            <data:DataGridTextColumn Binding=”{Binding Friday.Value, Mode=TwoWay}” Header=”Friday” />
            <data:DataGridTextColumn Binding=”{Binding Saturday.Value, Mode=TwoWay}” Header=”Saturday” />
            <data:DataGridTextColumn Binding=”{Binding Sunday.Value, Mode=TwoWay}” Header=”Sunday” />
            <data:DataGridTextColumn Binding=”{Binding TotalHours, Mode=TwoWay}” Header=”Total Hours”  />
        </data:DataGrid.Columns>
    </data:DataGrid>
    <Grid HorizontalAlignment=”Stretch” VerticalAlignment=”Top” x:Name=”m_gridFooter”>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”0″ HorizontalAlignment=”Left”
                 Text=”Totals” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”1″ HorizontalAlignment=”Left”
                 Text=”{Binding MondayTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”2″ HorizontalAlignment=”Left”
                 Text=”{Binding TuesdayTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”3″ HorizontalAlignment=”Left”
                 Text=”{Binding WednesdayTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”4″ HorizontalAlignment=”Left”
                 Text=”{Binding ThursdayTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”5″ HorizontalAlignment=”Left”
                 Text=”{Binding FridayTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”6″ HorizontalAlignment=”Left”
                 Text=”{Binding SaturdayTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”7″ HorizontalAlignment=”Left”
                 Text=”{Binding SundayTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
        <TextBlock VerticalAlignment=”Bottom” Grid.Column=”8″ HorizontalAlignment=”Left”
                 Text=”{Binding GrandTotal, Mode=OneWay}” Padding=”5,0,0,0″ FontWeight=”Bold”/>
    </Grid>
</StackPanel>

Ok.  So what do you do when the DataGrid’s columns get re-sized?  Basically, how do you keep the footer cells aligned and sized to match the columns in the DataGrid?  The answer is pretty easy.  Once you have the DataGrid and the supporting footer controls added to the StackPanel, you can create an event handler that attaches to the DataGrid’s LayoutUpdated event so that you can keep the footer columns.  Whenever the LayoutUpdated event fires, iterate over the columns in the DataGrid and set the corresponding footer cell control width to the same value. 

private void SyncColumnWidths(DataGrid source, Grid target)
{
    if (source == null || target == null)
    {
        return;
    }

    if (target.ColumnDefinitions.Count == source.Columns.Count)
    {
        for (int i = 0; i < target.ColumnDefinitions.Count; i++)
        {
            target.ColumnDefinitions[i].Width = new GridLength(source.Columns[i].ActualWidth);
        }
    }
}

Click here to view a running online sample.
Click here to download the source code.

-Ben

SUBSCRIBE TO THE BLOG


2 responses to “Add a Footer Row to a Silverlight 3 DataGrid”

  1. anti perspirant Avatar

    The modern formulation of the antiperspirant was patented by Jules Montenier .. Look up deodorant or antiperspirant in Wiktionary, the free dictionary. Antiperspirants stop you from sweating, but how? Learn how the chemicals in antiperspirants interact with your skin and sweat glands.

  2. Mark Thompson Avatar
    Mark Thompson

    Thanks for taking the time to post this solution. It works great.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.