在多个网格之间共享列宽答案

【问题标题】：Sharing column widths between multiple grids在多个网格之间共享列宽
【发布时间】：2020-05-15 02:47:32
【问题描述】：

我有以下 XAML：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="Header 1" />
        <TextBlock Grid.Column="1" Text="Header 2" />
    </Grid>
    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding SomeList}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBox Grid.Column="0" Text="{Binding Value1}" />
                        <TextBox Grid.Column="1" Text="{Binding Value2}" />
                        <Button Grid.Column="2" Content="Button" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>    
    </ScrollViewer>
</Grid>

我想实现这样的目标：

Header 1              |Header 2              |             <--   this is the top grid
------------------------------------------------------
Value 1.1             |Value 1.2             |[Button]         |
Value 2.1             |Value 2.2             |[Button]     <-- | this is the scroll viewer
Value 3.1             |Value 3.2             |[Button]         |

它看起来类似于带有固定标题行的数据网格。我不能使用实际的DataGrid，因为在真正的应用程序中，“Header 1”和“Header 2”实际上不是简单的网格文本标题，而是具有相当复杂标记的可交互元素。主要问题是如何实现所有三列的宽度同步？最后一列的大小应适合该列中最宽的按钮，而前两列应以 50/50 的比例共享剩余空间。感觉这可以使用SharedSizeGroup 属性来实现，但我不知道具体是如何实现的。

【问题讨论】：

不幸的是，SharedSizeGroup 不支持星号大小，而是将列的宽度视为Auto。
是的，我想只在最后一列使用SharedSizeGroup，而在前两列中使用Width="*"，而没有设置SharedSizeGroup。如果ScrollViewer 没有自动滚动条，这将起作用。使用VerticalScrollBarVisibility="Auto"，我需要同步顶部标题网格和ItemsControl 的宽度。我想我会尝试绑定到ItemsControl 的ActualWidth 属性，看看会发生什么。

标签： wpf xaml grid itemscontrol sharedsizegroup

【解决方案1】：

我想我知道该怎么做了：

<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Width="{Binding ActualWidth, ElementName=itemsControl}"
          HorizontalAlignment="Left">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" SharedSizeGroup="ButtonColumn" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="Header 1" />
        <TextBlock Grid.Column="1" Text="Header 2" />
    </Grid>
    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
        <ItemsControl Name="itemsControl" ItemsSource="{Binding SomeList}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="ButtonColumn" />
                        </Grid.ColumnDefinitions>
                        <TextBox Grid.Column="0" Text="{Binding Value1}" />
                        <TextBox Grid.Column="1" Text="{Binding Value2}" />
                        <Button Grid.Column="2" Content="Button" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>    
    </ScrollViewer>
</Grid>

Grid.IsSharedSizeScope="True" 和 SharedSizeGroup="ButtonColumn" 同步最后一列。
Width="*" 以 50/50 的比例拆分前两列之间的剩余空间。
Width="{Binding ActualWidth, ElementName=itemsControl}" 将顶部标题网格的宽度与下面的 ItemsControl 的宽度同步，当滚动条显示或隐藏时，该宽度可以改变。
HorizontalAlignment="Left" 将标题网格向左推，使其与下方的 ItemsControl 对齐。

【讨论】：