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

Posted

技术标签:

【中文标题】某些项目未通过 ItemsSource 显示在 ItemsControl 中【英文标题】:Some items not showing up in ItemsControl via ItemsSource 【发布时间】:2017-02-07 15:59:10 【问题描述】:

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

我有一个复选框模型类,它有四个属性表示复选框的内容、grid.row/column 和 isChecked 属性。然后我在我的视图模型中创建其中的九个并将它们添加到ObservableCollection

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

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

这是我的 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 ); 

最后这是我的 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>

它是这样的:

这是我想要的样子:

【问题讨论】:

【参考方案1】:

问题是为您的ObservableCollection 中的每个项目创建了一个新的 Grid,但您希望所有项目都使用一个 Grid。

您可以将ItemsControlItemsPanel 设置为Grid,并使用ItemContainerStyle 设置每个项目容器的Grid.RowGrid.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>

【讨论】:

@pdinferno UniformGrid 作为这个项目面板也会做得很好。【参考方案2】:

我认为您的问题是丢失的物品只是垂直堆叠在视线之外。您想要一个 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>

【讨论】:

以上是关于某些项目未通过 ItemsSource 显示在 ItemsControl 中的主要内容,如果未能解决你的问题,请参考以下文章

Xamarin 表单集合视图 ItemsSource 绑定未更新 UI

在DataGrid完成使用异步ItemsSource加载后执行某些操作?

数据模板中的用户控件未显示

WPF ListBox 未使用 ItemsSource 更新

将新项目添加到绑定的 ItemsSource 时,WinUI 3 UWP TabView 不显示新选项卡

有没有办法通过不删除和添加 ItemsSource 来更新 ListBox 的项目? [关闭]