Search code examples
wpfxamlwpfdatagrid

Binding grid Width to Datagrid Width wpf


Is there a way to Bind the width of a grid Column Definition to Data Grid Column. Here is a part of my Xaml. Right now its hard coded if the Data Grid Column is expanded my Grid wont move along with it so I want to bind the Column Definition width to datagrid column width. Is there a way to do that..

<StackPanel Grid.Row="2" Grid.ColumnSpan="2">
            <Grid Margin="48" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="104*"></ColumnDefinition>
                    <ColumnDefinition Width="165*"></ColumnDefinition>
                    <ColumnDefinition Width="166*"></ColumnDefinition>
                    <ColumnDefinition Width="163*"></ColumnDefinition>
                    <ColumnDefinition Width="58*"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="1" HorizontalAlignment="Center" FontWeight="Bold" FontSize="16" Margin="53,0,50,0" Width="62">Extract</Label>
                <Label Grid.Column="2" HorizontalAlignment="Center" FontWeight="Bold" FontSize="16" Margin="49,0,29,0" Width="88">Transform</Label>
                <Label Grid.Column="3" HorizontalAlignment="Center" FontWeight="Bold" FontSize="16" Margin="59,0,58,0" Width="46">Load</Label>
            </Grid>
            <DataGrid Name="dgEntities" Height="209" Margin="80,-52,55,-8">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Entity" Width="70"/>
                    <DataGridTextColumn Header="Status" Width="90"/>
                    <DataGridCheckBoxColumn Binding="{Binding IsSelected}" IsThreeState="True" Width="75">
                        <DataGridCheckBoxColumn.HeaderTemplate>
                            <DataTemplate x:Name="dtAllChkBx">
                                <CheckBox Name="cbxAll">Checked</CheckBox>
                            </DataTemplate>
                        </DataGridCheckBoxColumn.HeaderTemplate>
                    </DataGridCheckBoxColumn>
                    <DataGridTextColumn Header="Status" Width="90"></DataGridTextColumn>
                    <DataGridCheckBoxColumn Binding="{Binding IsSelected}" IsThreeState="True" Width="75">
                        <DataGridCheckBoxColumn.HeaderTemplate>
                            <DataTemplate x:Name="dtAllChkTransform">
                                <CheckBox Name="cbxAllTransform">Checked</CheckBox>
                            </DataTemplate>
                        </DataGridCheckBoxColumn.HeaderTemplate>
                    </DataGridCheckBoxColumn>

                    <DataGridTextColumn Header="Status" Width="90"></DataGridTextColumn>
                    <DataGridCheckBoxColumn Binding="{Binding IsSelected}" IsThreeState="True" Width="75">
                        <DataGridCheckBoxColumn.HeaderTemplate>
                            <DataTemplate x:Name="dtAllChkLoad">
                                <CheckBox Name="cbxAllLoad">Checked</CheckBox>
                            </DataTemplate>
                        </DataGridCheckBoxColumn.HeaderTemplate>
                    </DataGridCheckBoxColumn>

                </DataGrid.Columns>
            </DataGrid>

Solution

  • I can see two possibilities here to answer your question:

    1. Set the Width of DataGridColumn same as width of Grid.ColumnDefinition.

    For e.g.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*" />
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
    </Grid>
    
    <DataGrid .........>
        <DataGrid.Columns>
            <DataGridTextColumn Width="5*" ......./>
            <DataGridTextColumn Width="4*" ......./>
            <DataGridTextColumn Width="3*" ......./>
            <DataGridTextColumn Width="2*" ......./>
        </DataGrid.Columns>
    </DataGrid>
    
    1. I am not sure but you may set binding like so........

    e.g.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="c1" Width="5*" />
            <ColumnDefinition x:Name="c2" Width="4*" />
            <ColumnDefinition x:Name="c3" Width="3*" />
            <ColumnDefinition x:Name="c4" Width="2*" />
        </Grid.ColumnDefinitions>
    </Grid>
    
    <DataGrid .........>
        <DataGrid.Columns>
            <DataGridTextColumn Width="{Binding Width, ElementName=c1}" ......./>
            <DataGridTextColumn Width="{Binding Width, ElementName=c2}" ......./>
            <DataGridTextColumn Width="{Binding Width, ElementName=c3}" ......./>
            <DataGridTextColumn Width="{Binding Width, ElementName=c4}" ......./>
        </DataGrid.Columns>
    </DataGrid>
    

    If the 2nd solution does not seem to work then please try Width="{Binding ActualWidth, ElementName=c1}" instead of Width="{Binding Width, ElementName=c1}" and so on......