動態添加填充有綁定文本框的網格行

Question

我最近完成了我的第一個MVVM樣式的應用程序，該應用程序中包含一定數量的列/行和控件。

我現在想做的是，基於observableCollection<myClass>的項目數，在主網格中添加一行，該行填充有綁定到observableCollection每個項目中屬性的文本框。

因此，例如，這是一個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中添加了三個項目。 當發生這種情況，我想網格添加三個行現有的行之下，每個綁定到的屬性在我的汽車類每這些項目的這三個包含兩個文本框。 我也想指定它們將出現在Grid.Column中（它們將水平出現在同一行，而不是垂直出現）。

我嘗試使用ItemsControl ，它確實使文本框出現，但它出現在網格的左上角。 我無法將其顯示在現有行的下方。

注意：我在主網格中有很多行/列定義和其他控件。 我不想重做所有這些。

Answer 1

您可以將帶有網格的ItemsControl用作其ItemPanel。 但是，將RowDefinition動態添加到Grid有點棘手。 請查看以下博客文章以獲取更多信息和示例： http : //blog.scottlogic.com/2010/11/15/using-a-grid-as-the-panel-for-an-itemscontrol.html 。

一種更簡單的方法是將ItemsControl與ItemTemplate一起使用，該ItemTemplate包含具有所需列數的Grid。 然后，您可以將類型int的Column屬性添加到Vehicle類，並將ItemTemplate中StackPanel的Grid.Column附加屬性綁定到此對象：

     <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都應位於其自己的列中，則可以將每個TextBox的“ Column”屬性添加到Vehicle類中，並分別綁定到它們：

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