将一个ObservableCollection绑定到线 [英] Bind an ObservableCollection to Lines

问题描述

我想在我的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>类
 {
 get {return _classes; } 
} 
  

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

XAML：

 < Grid DataContext ={Binding ElementName = LayoutRoot}> 
<线X1 ={绑定项[0] .X1}X2 =100Y1 =50Y2 =100笔画=红色笔画厚度=4 
<线X1 ={绑定项[1] .X1}... /> 
 ... 
< / Grid> 
  

我该怎么办？

感谢您的努力

解决方案

您可以使用 ItemsControl 并创建一个 DataTemplate 为 Class1 对象，并将您的 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 =BlackStrokeThickness =2Fill =BlackX1 ={Binding X1}X2 ={Binding X2}Y1 ={绑定Y1}Y2 ={绑定Y2}/> 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl> 
< / Grid> 
  

代码：

  public partial class MainWindow：Window 
 {
 
 public MainWindow（）
 {
 InitializeComponent（）; 
随机ran = new Random（）; （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>类
 {
 get {return _classes; 
} 
 
} 
  

结果：

I want to have a graphical part in my UserControl which will display Lines based on a collection (and update coords during runtime and also add/remove lines during runtime based on the collection).

Lets assume I have a class called 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"));
            }
        }
    }

And an ObservableCollection in my UserControl:

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

If I knew the amount of Lines I could create the number of lines in my UserControl like this:

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>

How should I proceed please?

Thanks for any efforts

解决方案

You could use an ItemsControl and create a DataTemplate for the Class1 object and bind your ObservableCollection to the ItemsControl.

It may also be a good idea to use Canvas as the ItemsPanelTemplate if you want to draw lines all over the place

Here is a quick example:

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>

Code:

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

}

Result:

这篇关于将一个ObservableCollection绑定到线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！