Home
WPF
Canvas Example: SetLeft, SetTop
Updated Apr 15, 2025
Dot Net Perls
Canvas. On a WPF Canvas we place elements. We position them relative to the sides of the Canvas with static methods. With Canvas we can place elements in complex ways.
Adjust position. Once an element (like a Rectangle) is placed on the Canvas, we can adjust its position with methods like Canvas.SetTop and Canvas.SetLeft.
Here, we 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.
Start Add a Canvas element to your Window. Please create a Window_Loaded event with the Loaded attribute.
Next We build up a list of Rect objects. In the foreach-loop, we create a Rectangle for each object and add it to the Canvas.
Tip To position within a Canvas, use Canvas.SetTop and Canvas.SetLeft. SetBottom and SetRight are also available.
Thus With these static methods (accessed on the Canvas type) we adjust a child element's coordinates.
<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>
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); } } } }
Add notes. 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.
Summary. 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.
Dot Net Perls is a collection of pages with code examples, which are updated to stay current. Programming is an art, and it can be learned from examples.
Donate to this site to help offset the costs of running the server. Sites like this will cease to exist if there is no financial support for them.
Sam Allen is passionate about computer languages, and he maintains 100% of the material available on this website. He hopes it makes the world a nicer place.
This page was last updated on Apr 15, 2025 (edit).
Home
Changes
© 2007-2025 Sam Allen