Bind an ObservableCollection to Lines

Я хочу иметь графическую часть в моем UserControl, которая будет отображать Lines на основе коллекции (и обновлять координаты во время выполнения, а также добавлять/удалять строки во время выполнения на основе коллекции).Bind an ObservableCollection to Lines

Давайте предположим, что у меня есть класс с именем 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")); 
      } 
     } 
    }

И в ObservableCollection в моей 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; } 
     }

Если бы я знал, что количество линий я мог бы создать количество строк в моем 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>

Как мне продолжить?

Спасибо за любые усилия

источник

2013-03-15 Nikolas Jíša

Вы можете использовать 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="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; } 
    } 

}

Результат:

enter image description here

источник

2013-03-15 07:10:59

Вы могли бы использовать ItemsControl в качестве контейнера для отображения ваших линий.

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

источник

2013-03-15 07:09:10 Jehof

Bind an ObservableCollection to Lines

ответ

Смежные вопросы