简单的 WPF UI 数据绑定答案

【问题标题】：Simple WPF UI databinding简单的 WPF UI 数据绑定
【发布时间】：2009-02-11 11:04:48
【问题描述】：

我正在尝试编写一个简单的 WPF 应用程序，它有两个椭圆，由一条线连接，就像您在网络图中看到的那样。当椭圆动画时，我只想让连接线自动“粘”到线连接的两个椭圆的画布位置。 XAML 只是一个画布：

<Window x:Class="UIDataBindingDemo.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="400" Width="400">
<Grid>
    <Canvas x:Name="cnvExample" />
</Grid>

...我只是在构造函数中做一些非常简单的事情：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace UIDataBindingDemo
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            // create 2 ellipses, one next to the other, and add them to the canvas
            Ellipse el1 = new Ellipse();
            Canvas.SetTop(el1, 100);
            Canvas.SetLeft(el1, 100);
            el1.Width = 20;
            el1.Height = 20;

            el1.Fill = Brushes.Red;
            el1.Stroke = Brushes.Black;

            Ellipse el2 = new Ellipse();
            Canvas.SetTop(el2, 100);
            Canvas.SetLeft(el2, 200);
            el2.Width = 20;
            el2.Height = 20;

            el2.Fill = Brushes.Blue;
            el2.Stroke = Brushes.Black;

            cnvExample.Children.Add(el1);
            cnvExample.Children.Add(el2);

            // create a line that connects the 2 ellipses.  Bind the two points that define this line to the 
            // locations of our ellipses, so the line always connects them, through animations, drag and drop
            // operations, whatever.
            Line line = new Line();
            line.StrokeThickness = 3;
            line.Stroke = Brushes.Black;
            line.SetBinding(Line.X1Property, new Binding("(Canvas.Left)") { Source = el1 });
            line.SetBinding(Line.X1Property, new Binding("(Canvas.Top)") { Source = el1 });
            line.SetBinding(Line.X1Property, new Binding("(Canvas.Left)") { Source = el2 });
            line.SetBinding(Line.X1Property, new Binding("(Canvas.Top)") { Source = el2 });

            cnvExample.Children.Add(line);

            // animate the second ellipse, so it moves down and to the right, nice and slow
            var moveTheBlueOne = new DoubleAnimation(300, TimeSpan.FromSeconds(10));
            el2.BeginAnimation(Canvas.LeftProperty, moveTheBlueOne);
            el2.BeginAnimation(Canvas.TopProperty, moveTheBlueOne);
        }
    }

我对 WPF 很陌生，而且我确信我缺少一些简单的东西。为什么我看不到这条线？

【问题讨论】：

标签： wpf data-binding

【解决方案1】：

我不知道这是否是剪切和粘贴错误，但是您将每个绑定分配给相同的 DependencyProperty“Line.X1Property”，您应该使用所有四个 X 和 Y 属性来定义起点和终点行。

line.SetBinding(Line.X1Property, new Binding("(Canvas.Left)") { Source = el1 });
line.SetBinding(Line.Y1Property, new Binding("(Canvas.Top)") { Source = el1 });
line.SetBinding(Line.X2Property, new Binding("(Canvas.Left)") { Source = el2 });
line.SetBinding(Line.Y2Property, new Binding("(Canvas.Top)") { Source = el2 });

这样对我有用。

【讨论】：