C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
We position them relative to the sides of the Canvas with static methods. With Canvas, it is easier to place elements, like Rectangles, in more complex ways.
Example. Here I take a List of custom objects (called Rects) and render them onto a Canvas. Each object specifies its dimensions, its color, and its position relative to the Canvas' top and left. First, add a Canvas element to your Window.
Then: Please create a Window_Loaded event with the Loaded attribute. Here we can add Rectangles to the Canvas.
List: I build up a list of Rect objects. In the foreach-loop, I create a Rectangle for each object and add it to the Canvas.
To position within a Canvas, please use Canvas.SetTop and Canvas.SetLeft. SetBottom and SetRight are also available. With these static methods (accessed on the Canvas type) we adjust a child element's coordinates.
Based on: .NET 4.5 Example markup: XAML <Window x:Class="WpfApplication27.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Grid> <Canvas HorizontalAlignment="Left" Height="319" Margin="0" VerticalAlignment="Top" Width="517" Name="Can1"/> </Grid> </Window> Example code: C# using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Media; using System.Windows.Shapes; namespace WpfApplication27 { class Rect { public int Width { get; set; } public int Height { get; set; } public int Left { get; set; } public int Top { get; set; } public SolidColorBrush Color { get; set; } } /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Window_Loaded(object sender, RoutedEventArgs e) { // ... Create list of our Rect objects. List<Rect> rects = new List<Rect>(); // ... Add Rect objects. rects.Add(new Rect() { Width = 100, Height = 100, Left = 0, Top = 0, Color = Brushes.Aquamarine }); rects.Add(new Rect() { Width = 50, Height = 50, Left = 100, Top = 100, Color = Brushes.Cornsilk }); rects.Add(new Rect() { Width = 25, Height = 25, Left = 150, Top = 150, Color = Brushes.Peru }); foreach (Rect rect in rects) { // ... Create Rectangle object. Rectangle r = new Rectangle(); r.Width = rect.Width; r.Height = rect.Height; r.Fill = rect.Color; // ... Set canvas position based on Rect object. Canvas.SetLeft(r, rect.Left); Canvas.SetTop(r, rect.Top); // ... Add to canvas. Can1.Children.Add(r); } } } }
To add an element to a Canvas, we use the Children collection and its Add method. The Canvas.SetLeft and SetTop methods above adjust a property on the Rectangle. When the Rectangle is added to the Canvas, these properties are used.
Summary. A Canvas' point is to position child elements. The key methods here include the SetLeft and SetTop methods: static methods on the Canvas type. These set values on elements that the Canvas uses for positioning.