Monday, February 28, 2011

Highlight the column header and the first few cells in the DataGrid

In my application, I have a requirement, SelectionMode of the DataGrid has been set to Extend, and SelectionUnit is Cell, thus user can select each cell int the DataGrid, the first 4 or 5 columns in the data grid is used for display some information about the row,  so when user select a cell in the Grid, both the columnheader and the related information cell should be highlight , thus make it easier for user to understand what they are editing. like excel.
Originally I was thinking to hook up a function with the CurrentCellChanged event, and then when the cell is changed, I manually to find the columns that need to be highlighted, and apply a style to it. but it is ugly. so I am keep searching whether there is a better way to do that, finally I get it. 

In terms of select the column header,  First of all, we should create a style and bind it to the column header, put the following xaml expression to your style, trigger part.
<DataTrigger Value="True">
                                <DataTrigger.Binding>
                                    <MultiBinding Converter="{StaticResource IsHeaderCurrentConverter}">
                                        <Binding RelativeSource="{RelativeSource Self}" />
                                        <Binding Path="CurrentColumn" RelativeSource="{RelativeSource FindAncestor,AncestorType={x:Type DataGrid}}" />
                                    </MultiBinding>

                                </DataTrigger.Binding>
                                <Setter  TargetName="headerBorder" Property="Background"
                                Value="Red" />
                            </DataTrigger>

After that, create a convertor. 
public class IsHeaderCurrentConverter : IMultiValueConverter
    {

       
        #region IMultiValueConverter Members

        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            bool bResult = false;
            if (values[1] != null)
            {
                DataGridColumnHeader dgch = values[0] as DataGridColumnHeader;
                System.Windows.Controls.DataGridTextColumn dgtc =
                    values[1] as System.Windows.Controls.DataGridTextColumn;
                if(dgtc.Header.ToString().CompareTo(dgch.Column.Header.ToString()) == 0)
                {
                    bResult = true;
                }
            }

            return bResult;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }

In the converter, if we return true, then the column header will be highlight with red.

Use the same theory , you can create a style to highlight the cells that you need to change when cell is selected.

No comments:

Post a Comment