c# - 我发现 WPF 的 Canvas 绘图设计得很奇怪。为什么它更喜欢无参数构造函数？

Question

首先，我对标题的措辞感到抱歉；我真的不确定如何简洁地陈述我的困惑而不听起来很煽动。

我对使用 WPF 制作 UI 还很陌生(两天)。到目前为止，我绝对喜欢它的大部分内容。但是，在 Canvas 上绘图对我来说似乎很不直观。我希望这里有人可以解释 a) 为什么这样更好，或者 b) 我只是用错了。

我在Java的Graphics2D Canvas 上学习了计算机绘图，类似于GDI+。要在空间中的特定坐标处绘制一个矩形，我调用类似 canvas.drawRectangle(x, y, w, h, color) 的方法。然而，对于 WPF，我注意到 Rectangle 对象在它们的构造函数中没有参数，这意味着它需要更多的线来绘制一个:

Rectangle rect = new Rectangle();
rect.Width = w;
rect.Height = h;
rect.Color = Colors.Black;
... // a whole line for each parameter
Canvas.SetLeft(rect, x);
Canvas.Setleft(rect, y);
c.Children.Add(rect);

它似乎不必要地冗长，这让我觉得我错过了一些东西(好处或捷径)。我了解 WPF 相对于 GDI+ 的优势以及为什么有些东西需要以某种方式构建，但我希望能够做这样的事情:

Rectangle rect = new Rectangle(w, h, Colors.Black);
c.AddChild(rect, x, y);

很抱歉这篇文章很长，这不是标准的“我该怎么做_？”所以问题。我真的希望这不会让人觉得发牢骚；我只是想学习一门新技术，没想到会有如此不同。

Answer 1

在不判断数据绑定(bind)是否适合您的情况下，肯定有可能:

// Shapes.cs
public class Shape
{
    public double X { get; set; }
    public double Y { get; set; }
    public double W { get; set; }
    public double H { get; set; }
}

public class Rectangle : Shape { }

public class Circle : Shape { }

public class Triangle : Shape
{
    public double Angle { get; set; }
}

<!-- Window.xaml -->
<!-- Itemscontrol will take each item in a bound collection (in this case, shapes) and create a visual based off of data templates -->
<ItemsControl ItemsSource="{Binding shapes}">
    <ItemsControl.Resources>
        <!-- data templates let us control the visual representation of a given class -->
        <!-- DataType=Rectangle causes the contents of this datatemplate to be shown for -->
        <!-- each instance of a rectangle found in the shapes collection. -->
        <!-- Since we do not specify a size, the contents will fill to their parent, which -->
        <!-- we are constraining in the ItemsContainerStyle -->
        <DataTemplate DataType="{x:Type local:Rectangle}">
            <Rectangle Fill="Red" />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Circle}">
            <Ellipse Fill="Blue" />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Triangle}">
            <!-- Since we are specifying a specific geometry for the triangle, we want it -->
            <!-- to scale to the dimensions supplied.  Viewbox does that for us. -->
            <Viewbox>
                <Polygon Points="0,0 80,50, 0,100" Stroke="Black" Fill="Black">
                    <Polygon.LayoutTransform>
                        <!-- We also transform the coordinate space by rotating it by the -->
                        <!-- angle specified in the Triangle instance -->
                        <RotateTransform Angle="{Binding Angle}" />
                    </Polygon.LayoutTransform>
                </Polygon>
            </Viewbox>
        </DataTemplate>
    </ItemsControl.Resources>
    <!-- Here we are swapping out the standard stack-panel for a canvas -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- And we set the positioning of the items within the itemscontrol. -->
    <!-- These must be set via style, rather than directly, since the items control -->
    <!-- wraps each item in a ContentPresenter (ItemsContainerStyle.Template) -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="FrameworkElement">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            <Setter Property="Width" Value="{Binding W}" />
            <Setter Property="Height" Value="{Binding H}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

// Window.xaml.cs
    public MainWindow()
    {
        shapes = new ObservableCollection<Shape>();
        InitializeComponent();

        this.DataContext = this;

        shapes.Add(new Rectangle() { X = 50, Y = 43, H = 15, W = 59 });
        shapes.Add(new Rectangle() { X = 67, Y = 43, H = 20, W = 30 });
        shapes.Add(new Circle() { X = 50, Y = 43, H = 15, W = 59 });
        shapes.Add(new Triangle() { X = 100, Y = 100, H = 40, W = 40, Angle = 20 });
    }

    public ObservableCollection<Shape> shapes { get; set; }

产出:

好处是基于矢量的、可数据绑定(bind)的、可样式化的模板优点。有关数据绑定(bind)的更多信息，see MSDN .数据模板是 explained here.

如果你只是想像 GDI 一样绘制到位图表面，直接使用 RenderContext (the analog to Graphics) , 你可以 implement your own FrameworkElement与您覆盖以前的 OnPaint 方法的方式大致相同:

    class DrawingElement : FrameworkElement
{
    private List<Shape> shapes;
    private DrawingVisual visual;

    public DrawingElement(IEnumerable<Shape> shapesToDraw)
        : base()
    {
        this.shapes = new List<Shape>(shapesToDraw);
        this.visual = new DrawingVisual();

        this.AddVisualChild(visual);

        render();
    }

    private void render()
    {
        var dc = this.visual.RenderOpen();
        foreach (var shape in shapes)
        {
            if (shape is Rectangle)
            {
                var rect = (Rectangle)shape;
                dc.DrawRectangle(Brushes.Red, new Pen(Brushes.Black, 1), new Rect(rect.X, rect.Y, rect.W, rect.H));
            }
            else if (shape is Circle)
            {
                var rect = (Circle)shape;
                dc.DrawEllipse(Brushes.Blue, new Pen(Brushes.Black, 1),
                    new Point(rect.X + rect.W / 2, rect.Y + rect.H / 2),
                    rect.W / 2, rect.H / 2);
            }
            else if (shape is Triangle)
            {
                // trig goes here
            }
        }
        dc.Close();
    }

    protected override Visual GetVisualChild(int index)
    {
        if (index != 0)
            throw new ArgumentOutOfRangeException();

        return visual;
    }

    protected override int VisualChildrenCount { get { return 1; } }
}