0

我最近完成了我的第一个 MVVM 风格的应用程序，其中包含一定数量的列/行和控件。

我现在要做的是，根据 中的项目数，observableCollection<myClass>在主网格中添加一行，其中填充了绑定到 observableCollection 的每个项目中的属性的文本框。

因此，例如，这是一个视图模型示例：

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，它确实使文本框出现，但它出现在网格的左上角。我无法让它出现在现有行的下方。

注意：我在主网格中有更多的行/列定义和其他控件。我不想重做这一切。

4

2 回答 2

1

好的，您的 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>
于 2016-12-06T17:14:30.027 回答
1

You could use an ItemsControl with a Grid as its ItemPanel. It will be a bit tricky to dynamically add RowDefinitions to the Grid though. Please check out the following blog post for more information and an example: http://blog.scottlogic.com/2010/11/15/using-a-grid-as-the-panel-for-an-itemscontrol.html.

An easier approach would be to use an ItemsControl with an ItemTemplate that contains a Grid with the desired number of columns. You can then add a Column property of type int to your Vehicle class and bind the Grid.Column attached property of your StackPanel in the ItemTemplate to this one:

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

If each TextBox should be in a column of its own you could add a "Column" property per TextBox to your Vehicle class and bind to these separately:

<TextBox Text="{Binding Alt}" Grid.Column="{Binding AltColumn}" />
<TextBox Text="{Binding Depth}" Grid.Column="{Binding Deptholumn}" />
于 2016-12-06T17:07:09.097 回答