Question

我ListView使用GridView来显示多列数据。

其中两列包含包含ItemControl的单元格模板，以在每个单元格中显示一个小集合。

我遇到的问题是ItemControl s的垂直大小没有任何关联，因为它们位于不同的单元格中，因此它们不对齐。

例如:(注意这是父列表视图中的 ONE ROW ）

到目前为止XAML：

<ListView Margin="6,6,6,0" ItemsSource="{Binding Controllers}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem" >
            <Setter Property="VerticalContentAlignment" Value="Top" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView>

         <!-- snip other columns -->

        <GridViewColumn Header="Mode">
             <GridViewColumn.CellTemplate>
                 <DataTemplate>
                    <ItemsControl ItemsSource="{Binding Modes}" DisplayMemberPath="Name"/>   
                 </DataTemplate>
             </GridViewColumn.CellTemplate>
        </GridViewColumn>

        <GridViewColumn Header="Parameters">
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding Modes}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock  Text="Blah:" Margin="5,0"/>
                                    <ComboBox>
                                        <ComboBoxItem>Hello</ComboBoxItem>
                                    </ComboBox>
                                 </StackPanel>
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
    </GridView>
    </ListView.View>
</ListView>

我的第一个想法是使用网格作为ItemsPanel的{{1}}，因此我可以在行上使用SharedSizeScope来排列它们。但是，我看不到将ItemsControl动态创建的项目分配给特定网格行的方法。

有人能提出更好的解决方案吗？

Answer 1

通过将ListView.ItemContainerStyle.VerticalContentAlignment设置为Stretch，然后将UniformGrid用于ItemsControl面板来管理以解决此问题：

每个单元格现在垂直拉伸以匹配最大的单元格，并使用UniformGrid为每个项目均匀地分割垂直大小。

例如

<GridViewColumn Header="Mode">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Modes}" DisplayMemberPath="Name">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="1"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

匹配不同ItemsControls中的垂直布局

1 个答案: