Wie fügt man einem Canvas periodische Zeilen hinzu?

Question

Ich brauche ein Canvas mit farbigen Linien gefüllt werden, mit zufällig ausgewählten Länge, Stroke, StrokeThickness und Opacity. Es ist besser in einem MVVM-Ansatz und passt sich an die Änderungen in Width und Height des übergeordneten Fensters an.

Answer 1

Hauptfenster

ViewModelLine _viewModel; 
private List<Brush> _brushes; 
Random _rand; 
public MainWindow() 
{ 
    this.InitializeComponent(); 
    _viewModel = new ViewModelLine(); 
    this.DataContext = _viewModel; 
    _rand = new Random(); 
    _brushes = new List<Brush>(); 
    var props = typeof(Brushes).GetProperties(BindingFlags.Public | BindingFlags.Static); 
    foreach (var propInfo in props) 
     _brushes.Add((Brush)propInfo.GetValue(null, null)); 
    int interval = 10; 
    Task.Factory.StartNew(() => 
    { 
     while (true) 
     { 
      System.Threading.Thread.Sleep(interval); 
      Dispatcher.Invoke(new Action(() => AddNew())); 
     } 
    }); 
} 

void AddNew() 
{ 
    int w = (int)ActualWidth; 
    int h = (int)ActualHeight; 
    _viewModel.Models.Add(new ModelLine() { 
     X1 = _rand.Next(1, w), 
     X2 = _rand.Next(1, w), 
     Y1 = _rand.Next(1, h), 
     Y2 = _rand.Next(1, h), 
     Thickness = _rand.Next(1, 4), 
      Opacity = _rand.NextDouble(), 
      Brush = _brushes[_rand.Next(_brushes.Count)] 
    }); 
} 

Ansicht

<Grid> 
    <ItemsControl DockPanel.Dock="Bottom" DataContext="{Binding}" ItemsSource="{Binding Models}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Line X1="{Binding X1}" X2="{Binding X2}" Y1="{Binding Y1}" Y2="{Binding Y2}" 
        Stroke="{Binding Brush}" StrokeThickness="{Binding Thickness}" Opacity="{Binding Opacity}"/> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
</Grid> 

Ansichtsmodell

public class ViewModelLine 
{ 
    public ViewModelLine() 
    { 
     _models = new ObservableCollection<ModelLine>(); 
    } 
    ObservableCollection<ModelLine> _models; 
    public ObservableCollection<ModelLine> Models { get { return _models; } set { _models = value; } } 

} 

Modell

public class ModelLine : INotifyPropertyChanged 
{ 
    int _x1; 
    public int X1 { get { return _x1; } set { _x1 = value; RaisePropertyChanged("X1"); } } 

    int _x2; 
    public int X2 { get { return _x2; } set { _x2 = value; RaisePropertyChanged("X2"); } } 

    int _y1; 
    public int Y1 { get { return _y1; } set { _y1 = value; RaisePropertyChanged("Y1"); } } 

    int _y2; 
    public int Y2 { get { return _y2; } set { _y2 = value; RaisePropertyChanged("Y2"); } } 

    double _opacity; 
    public double Opacity { get { return _opacity; } set { _opacity = value; RaisePropertyChanged("Opacity"); } } 

    Brush _brush; 
    public Brush Brush { get { return _brush; } set { _brush = value; RaisePropertyChanged("Brush"); } } 

    double _thickness; 
    public double Thickness { get { return _thickness; } set { _thickness = value; RaisePropertyChanged("Thickness"); } } 

    public event PropertyChangedEventHandler PropertyChanged; 
    void RaisePropertyChanged(string propname) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propname)); 
    } 
}