Search code examples
wpfbindingdatagridwidthdatagridcolumn

WPF DataGrid Sync Column Widths


I've got two WPF Toolkit DataGrids, I'd like so that when the user resizes the first column in the first grid, it resizes the first column in the second grid. I've tried binding the width of the DataGridColumn in the second grid to the appropriate column in the first grid, but it doesn't work. I'd prefer to use all xaml, but I'm fine with using code behind as well.

<tk:DataGrid Width="100" Height="100">
    <tk:DataGrid.Columns>
        <tk:DataGridTextColumn x:Name="Column1" Width="50"/>
    </tk:DataGrid.Columns>
</tk:DataGrid>
<tk:DataGrid Width="100" Height="100">
    <tk:DataGrid.Columns>
        <tk:DataGridTextColumn x:Name="Column1Copy" Width="{Binding Path=ActualWidth, ElementName=Column1}"/>
    </tk:DataGrid.Columns>
</tk:DataGrid>

I also tried binding to Width instead of ActualWidth, but neither works.

Any help is greatly appreciated.


Solution

  • Well, I don't think that it is possible using straight XAML, but I still feel like it should because DataGridColumn does derive from DependencyObject. I did find a way to do it programatically though. I'm not thrilled about it, but it works:

    DataGridColumn.WidthProperty.AddValueChanged(upperCol, delegate
    {
        if (changing) return;
        changing = true;
        mainCol.Width = upperCol.Width;
        changing = false;
    });
    DataGridColumn.WidthProperty.AddValueChanged(mainCol, delegate 
    { 
        if (changing) return;
        changing = true;
        upperCol.Width = mainCol.Width; 
        changing = false; 
    });
    
    public static void AddValueChanged(this DependencyProperty property, object sourceObject, EventHandler handler)
    {
        DependencyPropertyDescriptor dpd = DependencyPropertyDescriptor.FromProperty(property, property.OwnerType);
        dpd.AddValueChanged(sourceObject, handler);
    }