将项目列出到 Grid（不是 GridView）中答案

【问题标题】：List items into a Grid (not GridView)将项目列出到 Grid（不是 GridView）中
【发布时间】：2011-05-10 00:16:04
【问题描述】：

在我的 WPF 应用程序中，我有一个集合，我想将控件网格绑定到该集合。所需布局的示例（TL；DR 我希望来自 ItemsSource）：

Desired layout http://imagebin.ca/img/27UTke

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Grid.Column="0">FileUploader</Label>
    <ComboBox Grid.Row="0" Grid.Column="1" />
    <Button Grid.Row="0" Grid.Column="2">Edit</Button>

    <Label Grid.Row="1" Grid.Column="0">TextUploader</Label>
    <ComboBox Grid.Row="1" Grid.Column="1" />
    <Button Grid.Row="1" Grid.Column="2">Edit</Button>

    <Label Grid.Row="2" Grid.Column="0">UrlShortener</Label>
    <ComboBox Grid.Row="2" Grid.Column="1" />
    <Button Grid.Row="2" Grid.Column="2">Edit</Button>

    <Label Grid.Row="3" Grid.Column="0">ImageUploader</Label>
    <ComboBox Grid.Row="3" Grid.Column="1" />
    <Button Grid.Row="3" Grid.Column="2">Edit</Button>
</Grid>

这个例子有硬编码的值；我想动态绑定集合，比如使用 ListView。但是，使用带有 GridView 的 ListView 并不是我想要的。我不需要选择、标题、排序等。对于用户来说，布局是一组整齐有序的选项，而不是网格中的数据集。

我无法正确执行此绑定。我尝试在外部使用带有 Grid 的 ItemsControl，但 Grid 被忽略：

Failed attempt 1 http://imagebin.ca/img/kTUordk

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <ItemsControl ItemsSource="{Binding MyData}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ItemsControl>
                    <Label Grid.Column="0">Text here</Label>
                    <ComboBox Grid.Column="1" />
                    <Button Grid.Column="2">Edit</Button>
                </ItemsControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

我还在面板中使用了带有 Grid 的 ItemsControl，但这会为每个项目创建一个 Grid，这很难看：

Failed attempt 2 http://imagebin.ca/img/xHo__-JD

<ItemsControl ItemsSource="{Binding Data}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Grid.Column="0" Content="{Binding Features}" />
                <ComboBox Grid.Column="1" />
                <Button Grid.Column="2">Edit</Button>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

经过一番研究，我发现了列和行网格定义的 SharedSizeGroup 属性。我已经尝试过之前的尝试；但是，中间列（宽度为*）似乎并没有调整自身的大小以填充窗口的整个宽度：

Failed attempt 3 http://imagebin.ca/img/nEoMJmy

<ItemsControl ItemsSource="{Binding Data}" Grid.IsSharedSizeScope="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                                <ColumnDefinition Width="*" SharedSizeGroup="B" />
                                <ColumnDefinition Width="Auto" SharedSizeGroup="C" />
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Grid.Column="0" Content="{Binding Features}" />
                <ComboBox Grid.Column="1" />
                <Button Grid.Column="2">Edit</Button>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

完成first layout 的最佳方法是什么？

【问题讨论】：

标签： wpf layout

【解决方案1】：

John Bowen 写了一篇关于 pitfall of using * with SharedSizeGroups 的博客文章。使用他建议的解决方法，我能够获得所需的布局：

<Grid Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" SharedSizeGroup="C" />
    </Grid.ColumnDefinitions>
</Grid>

<ItemsControl ItemsSource="{Binding Data}" Grid.IsSharedSizeScope="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                                <ColumnDefinition Width="{Binding ColumnDefinitions[1].Width, ElementName=grid}" />
                                <ColumnDefinition Width="Auto" SharedSizeGroup="C" />
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Grid.Column="0" Content="{Binding Features}" />
                <ComboBox Grid.Column="1" />
                <Button Grid.Column="2">Edit</Button>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

可悲的是，这似乎是一个 hack；我确信有更好的解决方案来完成我想要的。

【讨论】：