Некоторые элементы, которые не отображаются в ItemsControl через ItemsSource

Question

Я пытаюсь получить элемент ItemsControl, содержащий сетку, для отображения 9 флажков с различными свойствами. Однако только три появляются.

У меня есть класс модели флажка, который имеет четыре свойства, представляющие содержимое элементов checkbox, grid.row/column и isChecked. Затем я создаю девять из них в моей модели просмотра и добавляю их в ObservableCollection.

Далее я привязываю ItemsSource моего ItemsControl к коллекции. Затем я добавляю элемент checkbox в сетку внутри 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> 

Вот как это выглядит:

Вот что я хочу, чтобы это выглядело как:

Answer 1

Проблема заключается в том, что новая сетка создается для каждого элемента в вашем ObservableCollection, но вы хотите один Сетку для всех элементов.

Вы можете установить ItemsPanel в ItemsControl к вашему 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> 

Answer 2

Я думаю, ваша проблема в том, что недостающие элементы только вертикально уложенными вне поля зрения. Вы хотите WrapPanel для панели ваших товаров. Вы также должны убедиться, что ваш ItemControl не авто-размер больше, чем его родитель.

<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>