.jpg)
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
