Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

7. fejezet - Shapes (written by Csaba Biró)

7. fejezet - Shapes (written by Csaba Biró)

Built-in shapes

WPF also provides the familiar basic shapes are found in the System.Windows.Shapes class.

Built-in shapes are as follows:

  1. Line,

  2. Polyline ,

  3. Polygon,

  4. Rectangle,

  5. Ellipse,

  6. Path.

Line

A Line draw a line between two points.

Key features

X1 Y1        initial coordinates,

X2 Y2        ending coordinates,

Stroke        line color,

StrokeThickness        stroke thickness,

StrokeStartLineCap        line endings,

StrokeEndLineCap        line endings,

StrokeDashCap        line endings,

StrokeDashArray        sections and length of gaps.

Example VII.1 Line

VII.1. Line

<Line X1="20" Y1="10" X2="480" Y2="10"

       StrokeThickness="10"

       Stroke="Black"

       StrokeDashArray="1 1">

</Line>

<Line X1="20" Y1="40" X2="480" Y2="40"

       StrokeThickness="10"

       Stroke="Red"

       StrokeDashArray="1 0.5">

</Line>

<Line X1="20" Y1="70" X2="480" Y2="70"

       StrokeThickness="10"

       Stroke="Green"

       StrokeDashArray="1 1.5"

       StrokeDashCap="Round"

       StrokeStartLineCap="Flat"

       StrokeEndLineCap="Triangle">

</Line>

<Line X1="10" Y1="100" X2="490" Y2="100"

       Stroke="Pink"

       StrokeThickness="20"

       StrokeDashArray="1 2 0.4 0.3 0.2 0.1">  

</Line>

<Line X1="10" Y1="130" X2="490" Y2="130" Stroke="Black"

       StrokeThickness="30"

       StrokeDashArray="0 1"

       StrokeDashCap="Triangle">

</Line>

Polyline

Polyline is suited to draw lines consist of several sections. Most features of line shapes are already known.

Key features:

Points        X and Y coordinates,

StrokeLineJoin        rounding of the peaks,

StrokeMiterLimit        thinning of the peaks.

Example VII.2 PolyLine

VII.2. PolyLine

<Polyline

      Points="10 10 10 100 60 40 100 70 140 40 190 100 190 10 10 10"

      Stroke="Red"

      StrokeThickness="5"

      StrokeDashArray="1 1"

      StrokeDashCap="Triangle">

</Polyline>

Polygon

Polygon is for drawing polygons. It has a new feature (Fill) has been described in previous figures.

Example VII.3 Polygon

VII.3. Polygon

<Polygon Points="10 10 100 70 10 130"

         Stroke="BlanchedAlmond"

         StrokeThickness="5">

       <Polygon.Fill>

           <LinearGradientBrush>

               <GradientStop Color="Yellow" Offset="0.1"/>

               <GradientStop Color="Red" Offset="0.3"/>

               <GradientStop Color="Yellow" Offset="0.5"/>

               <GradientStop Color="Red" Offset="0.7"/>

               <GradientStop Color="Yellow" Offset="0.9"/>

           </LinearGradientBrush>

      </Polygon.Fill>

</Polygon>

<Polygon Points="200 100 200 200 300 200 300 10"

         Stroke="Blue" StrokeThickness="10"

         StrokeLineJoin="Miter"

         StrokeMiterLimit="1"

         Fill="Yellow"/>

<Polygon Points="400 10 380 60 340 75 380 100 400 140 420 100 460 75 420 60 ">

      <Polygon.Fill>

          <ImageBrush ImageSource="/Pictures/Nap.gif"/>

      </Polygon.Fill>

</Polygon>

Ellipse és Rectangle

They have a drawing ability (rectangle and ellipse) completed with Width and Height features.

Example VII.4 Ellipse and Rectangle

VII.4. Ellipse and Rectangle

<StackPanel>

        <Ellipse Width="100" Height="100" StrokeThickness="10">

            <Ellipse.Stroke>

                <LinearGradientBrush>

                    <GradientStop Offset="0.3" Color="Yellow"/>

                    <GradientStop Offset="0.6" Color="Red"/>

                </LinearGradientBrush>

            </Ellipse.Stroke>

                <Ellipse.Fill>

                    <RadialGradientBrush>

                        <GradientStop Offset="0" Color="Violet"/>

                        <GradientStop Offset="0.7" Color="Lavender"/>

                    </RadialGradientBrush>

                </Ellipse.Fill>

            </Ellipse>

            <Rectangle Width="300" Height="200"

                       Stroke="SaddleBrown">

                <Rectangle.Fill>

                <DrawingBrush Viewport="1,1,0.25,0.25" TileMode="Tile">

                    <DrawingBrush.Drawing>

                        <DrawingGroup>

                            <GeometryDrawing Brush="White">

                            </GeometryDrawing>

                            <GeometryDrawing Brush="Green">

                                <GeometryDrawing.Geometry>

                                    <GeometryGroup>

                                   <EllipseGeometry RadiusX="10" RadiusY="10"/>

                                   <EllipseGeometry RadiusX="100" RadiusY="1"/>

                                    </GeometryGroup>

                                </GeometryDrawing.Geometry>

                            </GeometryDrawing>

                        </DrawingGroup>

                    </DrawingBrush.Drawing>

                </DrawingBrush>

                </Rectangle.Fill>

            </Rectangle>

</StackPanel>