|
|  | Shape Container Designer |
|
|
|
|
|
|
|
|
The
Shape Container |
|
You create your own shape collection by adding shapes to the Shape Container,
where Shape Container Designer provides you to visually create your own shapes by combining existing shapes. It is the designer for the
Shape Container, which is also derived from Shape, but it provides a collection of shapes. In turn, a Shape Container can be added to another Shape Container to be drawn as a collection of Shapes. When a Shape Container is asked to draw, it iterates through its collection of shapes, asking each shape to draw. An existing Shape Container can also be extended using Visual Inheritance. |
Figure 1 |
|
Shape Container Design Time properties |
- GridSize sets the spacing in pixels between horizontal
and vertical gridlines on the Shape Container Designer. The default size is 10,
10.
- ShowGrid specifies whether Shape Container Designer
display the sizing grid. By default, the grid is on.
- SnapToGrid determines whether Shape Container Designer
will snap Shapes to the grid. In other words, the resizing and movement of Shapes
on the designer are constrained to the GridSize increment when
this feature is turned on. Having SnapToGrid turned on makes it
easier to line up the various aspects of the user interface precisely, but limits
the freedom with which one can place Shapes. By default, SnapToGrid
is turned on.
- GridColor specifies color of the Gridlines. By default,
the grid color is Silver. Changing the colors will also change the color of the
horizontal and vertical rulers.
- GridPageSize sets the spacing for Major Gridlines
(horizontal and vertical) on the Shape Container Designer. Major Gridlines are drawn
using bold lines on the design surface. For example, if the the GridSize is set
to (10,20) and the GridPageSize is 5, then the calculated spacing
between the the major Gridlines are (50,100). The default value for GridPageSize
is 5.
- TrayVisible specifies whether Shape Container Designer display
the Component Tray. By default, Component Tray is visible. The Component Tray acts
as a collection point for nonvisual items, allowing you to work with them without
interfering with the arrangement of shapes on the design surface. Only the shapes
are visible on the shape container design surface. Double-Click (when visible) and
Click (when invisible) on the Splitter between the Component Tray
and Design Surface toggles the Component Tray's visibility. You can also click the
button on the upper-right corner of the Component Tray to hide.
|
|
Painting only the Shapes in the Shape Container and not the Shape Container itself
|
Figure 2 |
There might be cases, where you want to paint only the Shapes in the ShapeContainer
and not the Shape Container itself. To do this, set the PaintChildsOnly
property of the Shape Container to true. The Figure 2 shows,
how the Shape Container in Figure 1 paints, if the PaintChildsOnly
property is set true. |
|
Cutting the Painting Region of a Shape Container using a Shape |
Figure 3 |
You can cut out the painting region of a ShapeContainer using a Shape in the Shape
Container.
To cut out a Shape from the painting region of its parent, click the shape you want
to exclude and set its ParentExclude property to true.
Thus the shape you selected will be excluded from the painting area of the ShapeContainer
and all of the painting attributes of this Shape will be ignored. The ShapePen
object of the Shape Container will be used to draw the border of the excluded region.
The Figure 3 shows, how the Shape Container in Figure 1
paints, if the ParentExclude property of an Ellipse
is set true. |
|
Clipping the Painting Region of a Shape Container |
Figure 4 |
You can clip the painting region of a Shape Container by setting the Clip
property to true. Thus, the Shape Container will
not paint outside of the region of the Container Base Shape(Please
refer to Using a Shape as the Container Base Shape below to learn, how to set the Base
Shape of a Shape Container). The Figure 4 shows, how the Shape Container
in Figure 3 paints, if the Clip property is set
true. |
|
Using a Shape as the Base of Shape Container |
Figure 5 |
By default, the Shape Container paints its clipping region using a simple Rectangle.
As with any other shapes you can set painting properties of a Shape Container such
as Pen, Fill, Shade etc. during the design time by using the property browser. But,
you may not want to use just a simple Rectangle for the clipping region and decide
to use your own drawing. To do this you can use one of the Shapes in the Shape Container's
shape collection as the Container Base Shape to be painted. Thus the Shape selected
to be the base of the Shape Container will be removed from the Shape Collection
and will be used to paint the clipping region of the Shape Container. All drawing
attributes and transformations of the Shape Container will be applied to the selected
shape.
Note A Shape Container can not be used as the Container Base Shape
of another Shape Container.
To set a shape as Container Base Shape, click anywhere in the designer surface.
The Properties Window will show the properties of your Shape Container. Find the
ContainerBaseShape property and select in the Drop-Down List the shape
you wish to be your Container Base Shape.
The Figure 5 shows, how the Shape Container in Figure 4
paints, if a shape type of Castle shape has been selected to be
the Container Base Shape.
|
|
Setting Resize Mode of a Shape Container |
Figure 6 |
If you are designing a Shape Container that the user can resize at run time, the
shapes on your Shape Container should resize and reposition properly. To resize
shapes dynamically with the Shape Container, you can use the Anchor
property of shapes. But, there might be cases you want that the shapes are
scaled while user resizes the Shape Container. You can do this by setting the ScalingResize
property of the Shape Container to true.
In this case, all the shapes in the Shape Container will be locked and only scaled
(globally) when the ShapeContainer is resized. This transformation is not applied
to the painting attributes of the ShapeContainer itself, such as ShapePen, ShapeBrush
etc.
Note You can set ScalingResize property of a Shape Container only,
if you add it in the another Shape Container.
The Figure 6 shows, how the ShapeContainer in Figure 5
paints, if the ScalingResize property is set true.
|
|