WPF tutorial four; layout Canvas panel

Canvas: Canvases panel

Canvas for Full control of the exact position of each element. He is the simplest of the layout controls, placing elements directly in the specified position, primarily to decorate the surface. With canvas, you must specify the location of a child element (relative to the canvas), or all elements will appear in the upper-left corner of the canvas. Adjust position with left, right, top, and bottom four additional properties. If the canvas is the main window element (that is, the outermost layout panel is canvas), the canvas changes as the user resizes the window, and the position of the child element moves with it to ensure that the position property is unchanged relative to the canvas.
The canvas allows some or all of the child elements to exceed their bounds, the child elements are not clipped by default, and negative coordinates can be used, that is, the overflow content appears outside the canvas, because the default cliptobounds= "False", so the canvas does not need to specify the size. If you want to copy the canvas content, set ClipToBounds to True.

1. Child elements do not exceed boundaries

Using XAML code implementations:

1<window x:class="Wpfdemo.mainwindow"2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"4title="Canvas Panel"height="237"Width="525"windowstartuplocation="Centerscreen">5<Canvas>6<textbox width=" -"Borderbrush="Blue"></TextBox>7<textbox canvas.left=" $"canvas.top=" -"Width=" -"Borderbrush="Green"></TextBox>8<button height=" -"canvas.right="Ten"Canvas.bottom="Ten"Content="Button"></Button>9</Canvas>Ten</Window>

2. Child elements out of bounds

Using XAML code implementations:

1<window x:class="Wpfdemo.mainwindow"2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"4title="Canvas Panel"height="237"Width="525"windowstartuplocation="Centerscreen">5<Canvas>6<textbox width=" -"Borderbrush="Blue"></TextBox>7<textbox canvas.left=" $"canvas.top=" -"Width=" -"Borderbrush="Green"></TextBox>8<button height=" $"canvas.right="Ten"Canvas.bottom="-130"Content="Button"></Button>9</Canvas>Ten</Window>

In the XAML design interface, the parts that are out of bounds are not cropped:

If you set the ClipToBounds property to True, the design interface will crop the outside portion of the child element:

Note: To illustrate that the child controls within a canvas cannot use more than two canvas attached properties, the latter will be ignored if both the Canvas.Left and Canvas.right properties are set.

WPF tutorial four; layout Canvas panel