将 ObservableCollection 绑定到行答案

【问题标题】：Bind an ObservableCollection to Lines将 ObservableCollection 绑定到行
【发布时间】：2013-03-03 19:35:54
【问题描述】：

我想在我的 UserControl 中有一个图形部分，它将基于集合显示行（并在运行时更新坐标，并在运行时基于集合添加/删除行）。

假设我有一个名为 Class1 的类：

public class Class1 : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, e);
        }

        private int _x1 = 0;
        public int X1
        {
            get { return _x1; }
            set
            {
                _x1 = value;
                OnPropertyChanged(new PropertyChangedEventArgs("X1"));
            }
        }
    }

我的 UserControl 中有一个 ObservableCollection：

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, e);
        }

        private ObservableCollection<Class1> _classes = new ObservableCollection<Class1>();
        public ObservableCollection<Class1> Classes
        {
            get { return _classes; }
        }

如果我知道行数，我可以像这样在我的 UserControl 中创建行数：

XAML：

<Grid DataContext="{Binding ElementName=LayoutRoot}">
<Line X1="{Binding Items[0].X1}" X2="100" Y1="50" Y2="100" Stroke="Red" StrokeThickness="4"/>
<Line X1="{Binding Items[1].X1}" ... />
...
</Grid>

请问我该怎么做？

感谢您的努力

【问题讨论】：

标签： wpf data-binding user-controls

【解决方案1】：

您可以使用 ItemsControl 作为 Container 来显示您的线条。

<ItemsControl DataContext="{Binding ElementName=LayoutRoot}" 
              ItemsSource={Binding}>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Line X1="{Binding Items[0].X1}" X2="100" Y1="50" Y2="100" Stroke="Red" StrokeThickness="4"/>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

【讨论】：

【解决方案2】：

您可以使用ItemsControl 并为Class1 对象创建DataTemplate 并将您的ObservableCollection 绑定到ItemsControl。

如果你想在整个地方画线，使用Canvas 作为ItemsPanelTemplate 也是一个好主意

这是一个简单的例子：

Xaml：

<Grid DataContext="{Binding ElementName=UI}">
    <ItemsControl ItemsSource="{Binding Classes}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:Class1}">
                <Line Stroke="Black" StrokeThickness="2" Fill="Black" X1="{Binding X1}" X2="{Binding X2}" Y1="{Binding Y1}" Y2="{Binding Y2}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

代码：

public partial class MainWindow : Window
{

    public MainWindow() 
    {
        InitializeComponent();
        Random ran = new Random();
        for (int i = 0; i < 10; i++)
        {
            Classes.Add(new Class1 { X1 = ran.Next(0,100), Y1 = ran.Next(0,100), X2 = ran.Next(0,100), Y2 = ran.Next(0,100) }); 
        }
    }

    private ObservableCollection<Class1> _classes = new ObservableCollection<Class1>();
    public ObservableCollection<Class1> Classes
    {
        get { return _classes; }
    }

}

结果：

【讨论】：