1

我有以下 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属性来实现，但我无法弄清楚到底如何。

4

1 回答 1

0

我想我知道该怎么做：

<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>
  1. Grid.IsSharedSizeScope="True"并SharedSizeGroup="ButtonColumn"同步最后一列。
  2. Width="*"以 50/50 的比例拆分前两列之间的剩余空间。
  3. Width="{Binding ActualWidth, ElementName=itemsControl}"将顶部标题网格的宽度与ItemsControl下面的宽度同步，当滚动条显示或隐藏时，该宽度可以改变。
  4. HorizontalAlignment="Left"将标题网格向左推以使其与ItemsControl下方对齐。
于 2020-05-16T02:17:34.967 回答