在WPF中如何在没有网格的画布上自由绘制大量形状

Question

我需要允许用户单击画布并每次创建一个矩形和8个文本框来输入矩形的尺寸。这些方框将相对于矩形边框进行定位。这里有一个List数组其中列表中的每一项都是这些方框的集合。画布可以让我画一个矩形。我发现动态收集这些数据的唯一合适的方法是"网格"。像这样:

var g1 = new Grid();
g1.Width = 100;
g1.Height = 100;
Canvas.SetLeft(g1, 10);
Canvas.SetTop(g1, 10);
Rectangle rectangle = new Rectangle
{
Width = 20,
Height = 30,
Fill = red,
StrokeThickness = 2,
Stroke = Brushes.Black
};
Canvas.SetLeft(rectangle, 10);
Canvas.SetTop(rectangle, 10);

g.Children.Add(rectangle);
LayoutCanvas.Children.Add(g);

但是如果我现在需要添加方框，那么所有的方框都会移到网格的中心。

var txt = new TextBox();
txt.Text = "New Text1";
txt.Width = 30;
txt.Height = 30;
Canvas.SetLeft(txt, 20);
Canvas.SetTop(txt, 30);
g1.Children.Add(txt);

要修复这个定位，我必须使用:

g1.ColumnDefinitions.Add(new ColumnDefinition());
g1.RowDefinitions.Add(new RowDefinition());
g1.RowDefinitions.Add(new RowDefinition());
g1.RowDefinitions.Add(new RowDefinition());

但我的应用程序不需要在网格中组织行和列，需要它是完全形状和完全动态的，最好没有XAML。我尝试了其他对象，如StackPanel，但它们都没有太大的不同。

解决方案:下面的代码现在可以运行了:

Grid DynamicGrid = new Grid();
DynamicGrid.HorizontalAlignment = HorizontalAlignment.Left;
DynamicGrid.VerticalAlignment = VerticalAlignment.Stretch;
DynamicGrid.ShowGridLines = true;
DynamicGrid.Background = new SolidColorBrush(Colors.LightSteelBlue);
var c1 = new Canvas();
var c2 = new Canvas();
//--------------------- Canvas1 Children --------------------->
Rectangle c1Rectangle = new Rectangle
{
Width = 100,
Height = 100,
Fill = new SolidColorBrush(Color.FromRgb(255, 0, 0)),
StrokeThickness = 2,
Stroke = Brushes.Black
};
Canvas.SetLeft(c1Rectangle, 0);
Canvas.SetTop(c1Rectangle, 0);
TextBlock c1Textbox = new TextBlock();
c1Textbox.Width = 50;
c1Textbox.Height = 50;
c1Textbox.Text = "Text1";
c1Textbox.FontSize = 14;
c1Textbox.FontWeight = FontWeights.Bold;
c1Textbox.Foreground = new SolidColorBrush(Colors.White);
c1Textbox.VerticalAlignment = VerticalAlignment.Top;
Canvas.SetLeft(c1Textbox, 10);
Canvas.SetTop(c1Textbox, 10);
//--------------------- Canvas2 Children --------------------->
Rectangle c2Rectangle = new Rectangle
{
Width = 100,
Height = 100,
Fill = new SolidColorBrush(Colors.LightBlue),
StrokeThickness = 2,
Stroke = Brushes.Red
};
Canvas.SetLeft(c2Rectangle, 420);
Canvas.SetTop(c2Rectangle, 220);
TextBlock c2Textbox = new TextBlock();
c2Textbox.Width = 50;
c2Textbox.Height = 50;
c2Textbox.Text = "Text2";
c2Textbox.FontSize = 14;
c2Textbox.FontWeight = FontWeights.Bold;
c2Textbox.Foreground = new SolidColorBrush(Colors.Black);
c2Textbox.VerticalAlignment = VerticalAlignment.Top;
Canvas.SetLeft(c2Textbox, 440);
Canvas.SetTop(c2Textbox, 240);
c1.Children.Add(c1Rectangle);
c1.Children.Add(c1Textbox);
c2.Children.Add(c2Rectangle);
c2.Children.Add(c2Textbox);
DynamicGrid.Children.Add(c1);
DynamicGrid.Children.Add(c2);
this.Content = DynamicGrid;
this.Show();

Answer 1

尝试为每个对象创建画布，这应该允许您自由地定位每个对象:

Rectangle rectangle = new Rectangle
{
Width = 20,
Height = 30,
Fill = red,
StrokeThickness = 2,
Stroke = Brushes.Black
};
var txt = new TextBox(){
Text = "New Text1",
Width = 30,
Height = 30,
};
g1 = new Grid()
{
Width = 100,
Height = 100,
Children =
{
new Canvas() { Children = { txt} },
new Canvas() { Children = { rectangle} }
}
};
Canvas.SetLeft(txt, 20);
Canvas.SetTop(txt, 30);
Canvas.SetLeft(rectangle, 10);
Canvas.SetTop(rectangle, 10);