Canvas and UniformGrid Panel in WPF

Canvas and UniformGrid Panel in WPF……………………………….

UniformGrid - Places elements in row and column format uniformly. UniformGrid is limited version of Grid where all rows and column size are same. Each cell contains only single control. Elements are places in UniformGrid in the order they are declared. By default it uses LeftToRight flow direction and you can change flow direction setting FlowDirection property of UniformGrid. This grid mostly used to layout elements quickly.

<Window x:Class="WpfApplicationPanels.UniformGrid"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="UniformGrid" Height="300" Width="300">

<UniformGrid Rows="3" Columns="3" Background="AliceBlue" Width="250" Height="250">

<Button Content="1" Width="45" Height="34" ></Button>

<Button Content="2" Width="45" Height="34"></Button>

<Button Content="3" Width="45" Height="34"></Button>

<Button Content="4" Width="45" Height="34"></Button>

<Button Content="5" Width="45" Height="34"></Button>

<Button Content="6" Width="45" Height="34"></Button>

<Button Content="7" Width="45" Height="34"></Button>

<Button Content="8" Width="45" Height="34"></Button>

<Button Content="9" Width="45" Height="34"></Button>

</UniformGrid>

</Window>

Result :

Canvas Panel  Places elements using exact coordinates. You can place an element on Canvas by setting Canvas. Left, Canvas. Top, Canvas. Right and Canvas. Bottom attached properties on element. The default values of Height and Width properties of a Canvas are 0. If you do not set these values, you will not see a canvas unless child elements are automatically resizable. Child elements on a Canvas are never resized.

The vertical and horizontal alignments on child elements do not work. Child elements are placed on positions set by the Canvas Left, Top, Right, and Bottom properties.

Margin does work partially. If Left property of Canvas is set, Right property does not work. If Top property of Canvas is set, Bottom property does not work.

<Window x:Class="WpfApplicationPanels.CanvasPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="CanvasPanel" Height="400" Width="400">

<Canvas Background="RosyBrown" Width="400px" Height="400" >

<Ellipse  Canvas.Left="10" Canvas.Top="10" Height="200" Width="200" Stroke="Black" StrokeThickness="5" Fill="Red" />

<Rectangle Canvas.Left="60" Canvas.Top="80" Height="200" Width="200" Stroke="Black" StrokeThickness="7" Fill="Yellow" ></Rectangle>

<Rectangle Canvas.Left="110" Canvas.Top="150" Height="200" Width="200" Stroke="Black" StrokeThickness="8" Fill="Green" ></Rectangle>

</Canvas>

</Window>

Result: 1

Controlling z-order using the ZIndex Property

The z-order of a control determines whether the control is in front of or behind another overlapping control. Normally the Z-Order of elements inside a canvas is specified by the order in XAML. But you can override the natural Z-Order by explicity defining a Canvas.ZIndex on the element.

<Window x:Class="WpfApplicationPanels.CanvasPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="CanvasPanel with Canvas.ZIndex Concept" Height="400" Width="400">

<Canvas Background="Cyan" Width="400px" Height="400" >

<Ellipse  Canvas.Left="10" Canvas.Top="10" Height="200" Width="200" Stroke="Black" StrokeThickness="5" Fill="Red" Canvas.ZIndex="3" />

<Rectangle Canvas.Left="60" Canvas.Top="80" Height="200" Width="200" Stroke="Black" StrokeThickness="7" Fill="Yellow" Canvas.ZIndex="2"></Rectangle>

<Rectangle Canvas.Left="110" Canvas.Top="150" Height="200" Width="200" Stroke="Black" StrokeThickness="8" Fill="Green" Canvas.ZIndex="1" ></Rectangle>

</Canvas>

</Window>

Result:2

Accessing the ZIndex Value at Run Time To retrieve the value of the ZIndex property, use the GetZIndex method of the Panel-derived object:

int zOrder = Canvas.GetZIndex(object);
Likewise, to set the value of the ZIndex property, use the SetZIndex method:

Canvas.SetZIndex(object, (int)9);

How to Create Dynamic CanvasPanel Controlling z-order using the ZIndex Property

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

namespace WpfApplicationPanels

{

/// <summary>

/// Interaction logic for Window7.xaml

/// </summary>

public partial class Window7 : Window

{

public Window7()

{

InitializeComponent();

LoadControl();

}

Canvas c1 = new Canvas();

Ellipse e1 = new Ellipse();

Rectangle r1 = new Rectangle();

Rectangle r2 = new Rectangle();

private void LoadControl()

{

//Height and Width of Main Window which name is Window7

this.Width = 400;

this.Height = 400;

this.Title = "How to Create Dynamic CanvasPanel";

this.Content = c1;

c1.Width = 350;

c1.Height =350;

c1.Background = new SolidColorBrush(Colors.LightCoral);

// Add Child Elements Rectangle 1 to Canvas

r1.Width = 200;

r1.Height = 200;

r1.Stroke = new SolidColorBrush(Colors.Bisque);

r1.StrokeThickness = 10;

r1.Fill = new SolidColorBrush(Colors.Red);

// r1.Margin = new Thickness(50,30,30, 30);

// Set Canvas position

Canvas.SetLeft(r1, 10);

Canvas.SetTop(r1, 10);

Canvas.  SetZIndex(r1, (int)3);

c1.Children.Add(r1);

// Add Child Elements Rectangle 2 to Canvas

r2.Width = 200;

r2.Height = 200;

r2.Stroke = new SolidColorBrush(Colors.Black);

r2.StrokeThickness = 10;

r2.Fill = new SolidColorBrush(Colors.Green);

r2.Margin = new Thickness(80, 60, 30, 30);

Canvas.SetZIndex(r2, (int)2);

c1.Children.Add(r2);

// Add Child Elements Ellipse to Canvas

e1.Width = 200;

e1.Height = 200;

e1.Stroke = new SolidColorBrush(Colors.Black);

e1.StrokeThickness = 10;

e1.Fill = new SolidColorBrush(Colors.Yellow);

e1.Margin = new Thickness(150, 110, 30, 30);

Canvas.SetZIndex(e1, (int)1);

c1.Children.Add(e1);

}

}

}

Result 3

Result: 1,2, 3