Динамически добавляя строки сетки, заполненные связанными текстовыми полями

Question

Недавно я закончил свое первое приложение с MVVM, в котором было задано количество столбцов/строк и элементов управления.

То, что я пытаюсь сделать сейчас, основывается на количестве элементов в observableCollection<myClass>, добавляет строку в основную сетку, заполненную текстовыми полями, привязанными к свойствам в каждом элементе наблюдаемого набора.

Так, например, вот ViewModel пример:

public class VehiclesViewModel : ObservableObject 
{ 
    private ObservableCollection<Vehicle> _vehCollection; 
    public ObservableCollection<Vehicle> VehCollection 
    { 
     get 
     { 
      return this._vehCollection; 
     } 

     set 
     { 
      if (null != value) 
      { 
       this._vehCollection= value; 
       OnPropertyChanged("VehCollection"); 
      } 
     } 
    } 
} 

Вот класс модели:

public class Vehicle : INotifyPropertyChanged 
{ 

    private double _alt; 
    public double Alt 
    { 
     get { return this._alt; } 
     set 
     { 
      this._alt = value; 
      base.OnPropertyChanged("Alt"); 
     } 
    } 

    private double _depth;   
    public string Depth 
    { 
     get { return this._depth; } 
     set 
     { 
      this._depth = value; 
      base.OnPropertyChanged("Depth"); 
     } 
    } 
} 

Вот пример вид:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="39.8" /> 
     <ColumnDefinition Width="39.8" /> 
     <ColumnDefinition Width="80" /> 
     <ColumnDefinition Width="80" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="26" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <ItemsControl ItemsSource="{Binding VehCollection}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <TextBox Text="{Binding Alt}" Grid.Column="0" Grid.ColumnSpan="2"/> 
        <TextBox Text="{Binding Depth}" 
          Grid.Column="3" 
          Grid.ColumnSpan="2" /> 
       </StackPanel> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

Скажем, некоторые функции я называю добавляет три элементов для _vehCollection. Когда это произойдет, я хочу, чтобы сетка добавила три строки под существующими строками, каждая из которых содержит два текстовых поля, которые привязаны к свойствам моего класса Vehicle для каждого из этих элементов. Я также хочу указать Grid.Column, в котором они появятся (они будут отображаться горизонтально в одной строке, а не вертикально).

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

Примечание: У меня есть намного больше определений строк/столбцов и других элементов управления внутри основной сетки. Я не хочу повторять все это.

Answer 1

Вы можете использовать ItemControl с сеткой в ​​качестве ItemPanel. Будет немного сложно динамически добавлять RowDefinitions в Grid. Пожалуйста, ознакомьтесь со следующим сообщением в блоге для получения дополнительной информации и примера: http://blog.scottlogic.com/2010/11/15/using-a-grid-as-the-panel-for-an-itemscontrol.html.

Простым подходом было бы использовать ItemControl с ItemTemplate, который содержит Grid с нужным количеством столбцов. Затем вы можете добавить свойство Column типа int в свой класс Vehicle и привязать Grid.Колонка вложенное свойство вашего StackPanel в ItemTemplate этого:

 <ItemsControl ItemsSource="{Binding VehCollection}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="39.8" /> 
         <ColumnDefinition Width="39.8" /> 
         <ColumnDefinition Width="80" /> 
         <ColumnDefinition Width="80" /> 
        </Grid.ColumnDefinitions> 
        <StackPanel Orientation="Horizontal" Grid.Column="{Binding Column}"> 
         <TextBox Text="{Binding Alt}" /> 
         <TextBox Text="{Binding Depth}" /> 
        </StackPanel> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 

Если каждый TextBox должен быть в колонке своих собственных вы можете добавить «Column» собственность за TextBox к классу транспортных средств и привязать к ним отдельно :

<TextBox Text="{Binding Alt}" Grid.Column="{Binding AltColumn}" /> 
<TextBox Text="{Binding Depth}" Grid.Column="{Binding Deptholumn}" /> 

Answer 2

нормально, что ваш контроль Items делает говорит показать список элементов в ячейке сетки 0,0

то, что вам нужно будет поместить сетку внутри списка простым способом является GridView

например

<ListView ItemsSource="{Binding VehCollection}"> 
    <ListView.View> 
     <GridView> 
      <GridViewColumn DisplayMemberBinding="{Binding Depth}"/> 
      <GridViewColumn DisplayMemberBinding="{Binding Alt}"/> 
      <GridViewColumn/> 
      <GridViewColumn/> 
     </GridView> 
    </ListView.View> 

другой вариант должен был бы установить шаблон элемента к сетке

<ItemsControl ItemsSource="{Binding VehCollection}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="39.8" /> 
        <ColumnDefinition Width="39.8" /> 
        <ColumnDefinition Width="80" /> 
        <ColumnDefinition Width="80" /> 
       </Grid.ColumnDefinitions> 
       <TextBox Text="{Binding Alt}" Grid.Column="0"/> 
       <TextBox Text="{Binding Depth}" Grid.Column="1"/> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 

</ItemsControl>