在WPF中将线条绑定到画布 [英] Bind collection of lines to canvas in WPF

问题描述

我有一个可观察的由其边界点指定的线段的集合。我如何绑定它在画布上绘制线条？

我已经看到了解决方案仅使用一个点来定义位置的形状。但是，为了将这种方式应用于线条，它需要在坐标上尴尬的预先计算才能获得外部矩形的位置，并使线坐标相对于它。有没有办法避免这种情况？

解决方案

这是一个如何做到的例子：

行定义如下：

  public class Line 
 {
 public Point From {get;组; } 
 
 public Point To {get;组; 
} 
  

MainWindow.xaml：

 < Window x：Class =WpfApplication20.MainWindow
 xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation 
 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
 Title =MainWindowHeight =300Width =300> 
< ItemsControl ItemsSource ={Binding Lines}> 
< ItemsControl.ItemsPanel> 
< ItemsPanelTemplate> 
< Canvas /> 
< / ItemsPanelTemplate> 
< /ItemsControl.ItemsPanel> 
< ItemsControl.ItemTemplate> 
< DataTemplate> 
<线X1 ={Binding From.X}Y1 ={Binding From.Y}
 X2 ={Binding To.X}Y2 ={Binding To.Y} 
 Stroke =DarkGrayStrokeThickness =3/> 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl> 
< / Window> 
  

MainWindow.xaml.cs：

  public partial class MainWindow：Window 
 {
 public ObservableCollection< Line>线{get;私人集合} 
 
 public MainWindow（）
 {
 Lines = new ObservableCollection< Line> 
 {
 new Line {From = new Point（100，20），To = new Point（180，180）}，
 new Line {From = new Point（180,180） To = new Point（20，180）}，
 new Line {From = new Point（20，180），To = new Point（100，20）}，
 new Line {From = new Point （20，50），To = new Point（180,150）} 
}; 
 
 InitializeComponent（）; 
 DataContext = this; 
} 
} 
  

在上面的例子中，行是静态的，即如果您将从和更新到职位，则用户界面不会更新。如果要更新UI，则必须为 Line 类实现 INotifyPropertyChanged 。

此示例显示如下所示的窗口：

I have an observable collection of line segments specified by its boundary points. How can I bind it to draw the lines on a canvas?

I have seen the solution for shapes using only one point to define the position. But for applying this approach to lines it need awkward precomputations on coordinates to get the position of outer rectangle and make line coordinates relative to it. Is there a way to avoid it?

解决方案

Here is an example how you could do it:

The line is defined as follows:

public class Line
{
    public Point From { get; set; }

    public Point To { get; set; }
}

MainWindow.xaml:

<Window x:Class="WpfApplication20.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300">
    <ItemsControl ItemsSource="{Binding Lines}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Line X1="{Binding From.X}" Y1="{Binding From.Y}"
                      X2="{Binding To.X}" Y2="{Binding To.Y}"
                      Stroke="DarkGray" StrokeThickness="3"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public ObservableCollection<Line> Lines { get; private set; }

    public MainWindow()
    {
        Lines = new ObservableCollection<Line>
        {
            new Line { From = new Point(100, 20), To = new Point(180, 180) },
            new Line { From = new Point(180, 180), To = new Point(20, 180) },
            new Line { From = new Point(20, 180), To = new Point(100, 20) },
            new Line { From = new Point(20, 50), To = new Point(180, 150) }
        };

        InitializeComponent();
        DataContext = this;
    }
}

In the above example, the lines are static, i.e. if you update the From and To positions, the UI will not update. If you want the UI to update, you must implement INotifyPropertyChanged for the Line class.

This sample shows a window that looks like this:

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