Certains éléments n'apparaissent pas dans ItemsControl via ItemsSource

Question

J'essaie d'obtenir un ItemsControl, qui contient une grille, pour afficher 9 cases à cocher avec des propriétés différentes. Cependant, seulement trois apparaissent.

J'ai une classe de modèle de case à cocher qui a quatre propriétés représentant le contenu des cases à cocher, les propriétés grid.row/column et isChecked. Je crée ensuite neuf d'entre eux dans mon viewmodel et les ajoute à un ObservableCollection.

Ensuite, je lie la ItemsSource de mes ItemsControl à la collection. Ensuite, j'ajoute un contrôle checkbox à la grille à l'intérieur de ItemsControl et lie les propriétés appropriées.

Cependant, seules les trois premières cases à cocher s'affichent et je n'ai aucune idée pourquoi. J'ai vérifié par le biais du débogage que la collection liée contient le nombre correct d'éléments.

Voilà ma classe 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)); 
     } 
    } 
} 

Dans mon modèle de vue, je crée une collection de ces derniers:

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 }); 
} 

Et enfin voici mon 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> 

Voici à quoi il ressemble:

Voici ce que je veux ressembler:

Answer 1

Le problème est qu'une nouvelle grille est créée pour chaque élément dans votre ObservableCollection mais vous voulez une grille unique pour tous les articles.

Vous pouvez définir la ItemsPanel du ItemsControl à votre Grid et utiliser un ItemContainerStyle pour définir les Grid.Row et Grid.Column propriétés attachées de chaque conteneur d'éléments.

Cela devrait fonctionner:

<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

Je pense que votre problème est que les éléments manquants sont simplement empilés verticalement hors de la vue. Vous voulez un WrapPanel pour votre panneau d'éléments. Vous devez également vous assurer que votre ItemsControl n'est pas auto-dimensionné lui-même plus grand que son parent.

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