某些项目未通过 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。
您可以将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>
【讨论】:
@pdinfernoUniformGrid
作为这个项目面板也会做得很好。【参考方案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 更新