TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF Canvas Example: SetLeft, SetTop
Use the WPF Canvas control to draw colored rectangles. Position with SetLeft and SetTop.Canvas. On a Canvas we place elements. 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.
Tip: To position within a Canvas, please 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.
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.
© TheDeveloperBlog.com
The Dev Codes
Related Links:
- WPF Controls
- WPF Rectangle: Fill and Stroke
- WPF TabControl Example: TabItem
- WPF HorizontalAlignment and VerticalAlignment
- WPF Grid Use: Margin and Background
- WPF GridSplitter Example
- WPF StackPanel: Arrange Controls
- WPF DataGrid Examples
- WPF DatePicker Example: SelectedDate
- WPF Border Example
- WPF CheckBox Example
- WPF ComboBox Example (ItemsSource)
- WPF Ellipse: Stroke, Fill and MouseEnter
- WPF DockPanel Example
- WPF Expander Control
- WPF DoubleAnimation
- WPF ProgressBar: Value and Maximum
- WPF Button Control Example
- Top 35 WPF Interview Questions (2021)
- WPF Viewbox Example
- WPF WebBrowser Control
- WPF PasswordBox Control: PasswordChanged
- WPF IsEnabled Property (Button Example)
- WPF RadioButton Example (Checked)
- WPF Image Example: PNG, JPG Files
- WPF ToolBar Example: Uses ToolBarTray
- WPF ToolTip Example
- WPF TextBlock Example
- WPF TextBox Example
- WPF TreeView Example: TreeViewItem
- WPF Menu, MenuItem and Separator
- WPF Label Example
- WPF Name Property: Get Controls
- WPF KeyDown Event Handler
- WPF RenderTransform Example: TransformGroup
- WPF ListView Control: Add Items to GridView
- WPF ScrollViewer Control
- WPF GroupBox Example
- WPF WindowsFormsHost Example
- WPF WrapPanel Example
- WPF Slider Example (ValueChanged)
- WPF Calendar Example: SelectedDate
- WPF Canvas Example: SetLeft, SetTop