如何同步WPF中多个DevExpress Grid的列宽度？

嘿，这个需求其实很好解决，你已经迈出了关键一步——在ItemsControl上设置了Grid.IsSharedSizeScope="True"，接下来只需要给每个要同步宽度的列加上共享尺寸组的配置就行，和DevExpress的GridControl完美兼容。

核心思路 #

WPF的SharedSizeGroup机制可以让同一作用域内（这里就是你开启了Grid.IsSharedSizeScope的ItemsControl），所有标记了相同组名的元素自动同步宽度。我们只需要给每个Grid的对应列，把头部和单元格容器绑定到同一个共享组即可。

修改后的代码示例 #

<ItemsControl Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" x:Name="Grids" Margin="-5,0,0,0" 
              ItemsSource="{Binding Items, Mode=TwoWay}" Background="Transparent" BorderThickness="0" 
              Grid.IsSharedSizeScope="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" 
              ScrollViewer.VerticalScrollBarVisibility="Auto">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black" Margin="10,5,0,25" Width="Auto" MinWidth="750">
                <dxg:GridControl MaxHeight="250" MinHeight="100" MinWidth="700" ItemsSource="{Binding Statuses}" 
                                 AutoGenerateColumns="None" SelectionMode="None">
                    <dxg:GridControl.Columns>
                        <!-- Column1：同步所有Grid的该列宽度 -->
                        <dxg:GridColumn Header="Column1" FieldName="Field1" UnboundType="Object" 
                                        SortIndex="0" AllowSorting="True" ReadOnly="True">
                            <dxg:GridColumn.HeaderTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition SharedSizeGroup="Column1_SharedGroup"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Column1" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                                    </Grid>
                                </DataTemplate>
                            </dxg:GridColumn.HeaderTemplate>
                            <dxg:GridColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition SharedSizeGroup="Column1_SharedGroup"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{Binding Field1}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                                    </Grid>
                                </DataTemplate>
                            </dxg:GridColumn.CellTemplate>
                        </dxg:GridColumn>

                        <!-- Column2：同步所有Grid的该列宽度 -->
                        <dxg:GridColumn Header="Column2" FieldName="Field2" UnboundType="Object" 
                                        ReadOnly="True" SortIndex="1" SortMode="Value" Binding="Field2">
                            <dxg:GridColumn.HeaderTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition SharedSizeGroup="Column2_SharedGroup"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Column2" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                                    </Grid>
                                </DataTemplate>
                            </dxg:GridColumn.HeaderTemplate>
                            <dxg:GridColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition SharedSizeGroup="Column2_SharedGroup"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{Binding Field2}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                                    </Grid>
                                </DataTemplate>
                            </dxg:GridColumn.CellTemplate>
                        </dxg:GridColumn>
                    </dxg:GridControl.Columns>
                </dxg:GridControl>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键细节说明 #

• 每个需要同步的列，都给HeaderTemplate和CellTemplate里的Grid列设置了相同的SharedSizeGroup名称（比如Column1统一用Column1_SharedGroup）
• 不要给GridColumn设置固定宽度（比如Width="100"），否则会覆盖SharedSizeGroup的自动同步逻辑，让列宽根据内容自动调整即可
• Grid.IsSharedSizeScope="True"会确保整个ItemsControl范围内的相同组名元素，自动把宽度统一为该组内最宽元素的尺寸，不管哪个Grid的列，都会保持一致

这样修改后，不管每个Grid加载什么数据，所有Grid的Column1宽度都会完全相同，Column2同理。

内容的提问来源于stack exchange，提问作者gyurisc