C# 某些项未通过ItemsSource显示在ItemsControl中

我正在尝试获取一个ItemsControl，它包含一个网格，以显示9个具有不同属性的复选框。然而，只有三个人出现过

我有一个checkbox模型类，它有四个属性表示checkbox的内容：grid.row/column和isChecked属性。然后，我在viewmodel中创建了其中九个，并将它们添加到

ObservableCollection

接下来，我将ItemsControl的ItemsSource绑定到集合。然后，我在ItemsControl内的网格中添加一个checkbox控件，并绑定相应的属性

然而，只有前三个复选框出现，我不知道为什么。我确实通过调试验证了绑定到的集合的项数是否正确

这是我的CheckboxModel类：

public class CheckboxModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private bool _isChecked;
    public bool IsChecked
    {
        get { return _isChecked; }
        set { _isChecked = value; OnPropertyChanged("IsChecked"); }
    }

    private string _content;
    public string Content
    {
        get { return _content; }
        set { _content = value; OnPropertyChanged("Content"); }
    }

    private int _gridRow;
    public int GridRow
    {
        get { return _gridRow; }
        set { _gridRow = value; OnPropertyChanged("GridRow"); }
    }

    private int _gridColumn;
    public int GridColumn
    {
        get { return _gridColumn; }
        set { _gridColumn = value; OnPropertyChanged("GridColumn"); }
    }

    // Create the OnPropertyChanged method to raise the event
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

在我的视图模型中，我创建了以下内容的集合：

private ObservableCollection<CheckboxModel> _checkBoxList = new ObservableCollection<CheckboxModel>();
public ObservableCollection<CheckboxModel> CheckBoxList
{
    get
    {
        return _checkBoxList;
    }
    set
    {
        if (null != value)
        {
            _checkBoxList = value;
            OnPropertyChanged("CheckBoxList");
        }
    }
}

public void CreateCheckboxList()
{
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Latitude", GridRow = 0, GridColumn = 0  });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Longitude", GridRow = 1, GridColumn = 0 });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Altitude", GridRow = 2, GridColumn = 0 });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Depth", GridRow = 0, GridColumn = 1 });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Speed", GridRow = 1, GridColumn = 1 });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Heading", GridRow = 2, GridColumn = 1 });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Roll", GridRow = 0, GridColumn = 2 });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "Pitch", GridRow = 1, GridColumn = 2 });
    CheckBoxList.Add(new CheckboxModel { IsChecked = true, Content = "VOS", GridRow = 2, GridColumn = 2 }); 
}

private observetecollection\u checkBoxList=new observetecollection（）；
公共可观察收集复选框列表
{
得到
{
返回复选框列表；
}
设置
{
if（null！=值）
{
_checkBoxList=值；
OnPropertyChanged（“复选框列表”）；
}
}
}
public void CreateCheckboxList（）
{
Add（新的CheckboxModel{IsChecked=true，Content=“Latitude”，GridRow=0，GridColumn=0}）；
Add（新的CheckboxModel{IsChecked=true，Content=“Longitude”，GridRow=1，GridColumn=0}）；
Add（新的CheckboxModel{IsChecked=true，Content=“aighty”，GridRow=2，GridColumn=0}）；
Add（新的CheckboxModel{IsChecked=true，Content=“Depth”，GridRow=0，GridColumn=1}）；
Add（新的CheckboxModel{IsChecked=true，Content=“Speed”，GridRow=1，GridColumn=1}）；
Add（新的CheckboxModel{IsChecked=true，Content=“Heading”，GridRow=2，GridColumn=1}）；
Add（新的CheckboxModel{IsChecked=true，Content=“Roll”，GridRow=0，GridColumn=2}）；
Add（新的CheckboxModel{IsChecked=true，Content=“Pitch”，GridRow=1，GridColumn=2}）；
Add（新的CheckboxModel{IsChecked=true，Content=“VOS”，GridRow=2，GridColumn=2}）；
}

最后是我的xaml：

<ItemsControl ItemsSource="{Binding CheckBoxList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                </Grid.RowDefinitions>
                <CheckBox Grid.Row="{Binding GridRow}"
                          Grid.Column="{Binding GridColumn}"
                          Margin="14,6,63,6"
                          VerticalAlignment="Center"
                          Content="{Binding Content}"
                          IsChecked="{Binding IsChecked}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

下面是它的样子：

以下是我希望它看起来的样子：

---

我想你的问题是，丢失的物品只是垂直堆放在看不见的地方。您需要为“项目”面板添加一个

WrapPanel

。您还需要确保ItemsControl不会自动调整自身大小，使其比其父控件大

<ItemsControl 
    VerticalAlignment="Stretch"
    ItemsSource="{Binding CheckBoxList}">
    <!-- Add this-->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel 
                Orientation="Vertical" 
                />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- Done -->

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                </Grid.RowDefinitions>
                <CheckBox Grid.Row="{Binding GridRow}"
                    Grid.Column="{Binding GridColumn}"
                    Margin="14,6,63,6"
                    VerticalAlignment="Center"
                    Content="{Binding Content}"
                    IsChecked="{Binding IsChecked}" 
                    />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

我想你的问题是，丢失的物品只是垂直堆放在看不见的地方。您需要为“项目”面板添加一个

WrapPanel

。您还需要确保ItemsControl不会自动调整自身大小，使其比其父控件大

<ItemsControl 
    VerticalAlignment="Stretch"
    ItemsSource="{Binding CheckBoxList}">
    <!-- Add this-->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel 
                Orientation="Vertical" 
                />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- Done -->

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                </Grid.RowDefinitions>
                <CheckBox Grid.Row="{Binding GridRow}"
                    Grid.Column="{Binding GridColumn}"
                    Margin="14,6,63,6"
                    VerticalAlignment="Center"
                    Content="{Binding Content}"
                    IsChecked="{Binding IsChecked}" 
                    />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

问题在于为

ObservableCollection

中的每个项目创建了一个新的网格，但您希望为所有项目创建一个网格

您可以将

ItemsControl

的

ItemsPanel

设置为您的

Grid

，并使用

ItemContainerStyle

设置每个项目容器的

Grid.Row

和

Grid.Column

附加属性

这应该起作用：

<ItemsControl ItemsSource="{Binding CheckBoxList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding GridRow}" />
            <Setter Property="Grid.Column" Value="{Binding GridColumn}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <CheckBox Margin="14,6,63,6"
                          VerticalAlignment="Center"
                          Content="{Binding Content}"
                          IsChecked="{Binding IsChecked}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

问题在于为

ObservableCollection

中的每个项目创建了一个新的网格，但您希望为所有项目创建一个网格

您可以将

ItemsControl

的

ItemsPanel

设置为您的

Grid

，并使用

ItemContainerStyle

设置每个项目容器的

Grid.Row

和

Grid.Column

附加属性

这应该起作用：

<ItemsControl ItemsSource="{Binding CheckBoxList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                    <ColumnDefinition Width="149.6*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="28*" />
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding GridRow}" />
            <Setter Property="Grid.Column" Value="{Binding GridColumn}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <CheckBox Margin="14,6,63,6"
                          VerticalAlignment="Center"
                          Content="{Binding Content}"
                          IsChecked="{Binding IsChecked}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

@pdferno

UniformGrid

也可以作为这一个的项目面板，做得很好。@pdferno

UniformGrid

也可以作为这一个的项目面板。