Question

我将Grid作为ItemsPanel用于动态绑定到ItemsControl的列表。下面的代码正在工作 - 还有一个问题：我找不到动态初始化网格的ColumnDefinitions和RowDefinitions的方法。因此，所有值都放在彼此之上。

<ItemsControl ItemsSource="{Binding Cells}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Row" Value="{Binding RowIndex}"/>
            <Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Value}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

请注意，我正在根据MVVM模式搜索答案。因此，子类和后面的代码只是解决方法，但没有解决方案。

Answer 1

你需要一些方法告诉网格它有多少行/列。也许在每个项目加载时，您可以检查RowIndex和ColumnIndex的值，并在需要时将行/列添加到网格中。

作为另一种选择，也许您可以在ViewModel中公开返回max RowCount和ColumnCount的{{1}}和RowIndex属性，然后在Grid的Loaded事件中添加你需要的很多列/行。

我发现在MVVM中使用代码隐藏是完全可以接受的，因为代码只与UI相关。

另一个想法是将你的代码后面的项目安排到2D网格中，然后再将其返回到View，然后将该Grid与ColumnIndex绑定到DataGrid并删除标题

<强>更新

我目前解决此问题的方法是为AutoGenerateColumns=True使用一组AttachedProperties，允许您将Grid和RowCount属性绑定到ViewModel上的属性

您可以在我的博客here上找到我的附加属性版本的代码，它们可以像这样使用：

ColumnCount

Answer 2

您的网格没有行和列，因此所有内容都会显示在彼此之上。做类似下面的事情，它会起作用。

<ItemsControl ItemsSource="{Binding Cells}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Row" Value="{Binding RowIndex}" />
            <Setter Property="Grid.Column" Value="{Binding ColumnIndex}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Value}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 3

我在这里The ItemsControl

找到了这个

            <ItemsControl  ItemsSource="{Binding VehicleMakes}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="3" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Width="300" Height="100"  Click="ButtonOption_Click" Tag="{Binding Name}">
                            <StackPanel Orientation="Vertical">
                                <Image
                                    Initialized="Image_Initialized"
                                    Tag="{Binding ResourseImageName}"
                               Width="116"
                               Height="30"
                               Margin="0,0,0,10" >
                                </Image>
                                <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom"  HorizontalAlignment="Center"/>
                            </StackPanel>
                        </Button>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

WPF Grid as ItemsPanel用于动态绑定到ItemsControl的列表

3 个答案: