Benutzer:MovGP0/WPF/Drawing

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
   MovGP0        Über mich        Hilfen        Artikel        Weblinks        Literatur        Zitate        Notizen        Programmierung        MSCert        Physik      


  • Brush
    • SolidColorBrush
    • LinearGradientBrush
    • RadialGradientBrush
  • Pen
  • Point
  • Rect
  • Geometry

Provide Support for Events, Data Binding, Layout, Styling, Animation, etc.

  • Line
  • Rectangle
  • Ellipse
  • Polyline
  • Polygon
  • Path
<Path Stroke="Black" Fill="Blue">
  <Path.Data>
    <PathGeometry>
      <PathFigure StartPoint="50,0" IsClosed="True">
        <LineSegment Point="100,50" />
        <LineSegment Point="50,100" />
        <LineSegment Point="0,50" />
      </PathFigure>

      <!-- may have multiple path figures -->
      <!-- regions with even number of overlapping objects are rendered transparent -->
      <PathFigure StartPoint="10,10" IsClosed="True">
        <LineSegment Point="90,10" />
        <LineSegment Point="90,90" />
        <LineSegment Point="10,90" />
      </PathFigure>
    </PathGeometry>
  </Path.Data>
</Path>
Segments
  • LineSegment
  • PolyLineSegment
  • ArcSegment
  • QuadraticBezierSegment
  • PolyQuadraticBezierSegment
  • BezierSegment
  • PolyBezierSegment
GeometryGroup
<Path Stroke="Black" Fill="Blue">
  <Path.Data>
    <PathGeometry>
      <PathFigure StartPoint="..." IsClosed="True">
        <BezierSegment Point1="..." Point2="..." Point3="..." />
        <!-- ... -->
      </PathFigure>
    </PathGeometry>

    <EllipseGeometry Center="..." RadiusX="20" RadiusY="20" />

    <!-- ... -->
  </Path.Data>
</Path>
StreamGeometry
  • Uses a single string to represent a path.
  • Letters represent different commands (M = move, C = cubic BezierSegment, L = LineSegment, z = close)
  • Less objects for Garbage Collector
<Path Stroke="Black">
  <Path.Data>
    <GeometryGroup>
      <PathGeometry Figures="M5,26 C 24,55 76,55 95,26  ... z">
    </GeometryGroup>
  </Path.Data>
</Path>
<Path Stroke="Black" Data="M5,26 C 24,55 76,55 95,26 ... z" />
CombinedGeometry
GeometryCombineMode Description
Exclude Remove region of 2nd shape from region of 1st shape
Intersect Only keep region with both shapes.
Union Keep region with at least one shape / Combine shapes to new shape.
Xor Only keep region with exactly one shape.
  • Native representation of Media Integration Layer (MIL) objects
  • more efficient. Does not create additional elements in the visual tree.
Usage as Image
<Image>
  <Image.Source>
    <DrawingImage>

      <!-- Drawing -->
      <DrawingGroup x:Name="myDrawing">
        <DrawingGroup.Transform>
          <TranslateTransform X="3" Y="5" />
        </DrawingGroup.Transform>
        <GeometryDrawing Brush="Blue">
          <GeometryDrawing.Geomtry>
            <RectangleGeometry Rect="32,8,19,36" />
            <!-- ... -->
          </GeometryDrawing.Geomtry>
        </GeometryDrawing>

        <GeometryDrawing Brush="Blue">
          <!-- ... -->
        </GeometryDrawing>
      </DrawingGroup>

    </DrawingImage>
  </Image.Source>
</Image>
Usage as Brush
<Grid>
  <Grid.Background>
    <DrawingBrush Stretch="Uniform">
      <DrawingBrush.Drawing>
        <!-- Drawing -->
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Grid.Background>
</Grid>

Composite Brush

[Bearbeiten | Quelltext bearbeiten]
  • renders any WPF element as an image
<Grid>
  <Grid.Background>
    <VisualBrush Visual="{Binding ElementName=myElement}" />
  </Grid.Background>
</Grid>
  • Image and ImageBrush
  • ImageSource
    • DrawingImage
    • BitmapSource
  • BitmapEncoder, BitmapDecoder
    • BMP, GIF, Icon, JPEG, PNG, TIFF, WMP
<Image Source="MyImage.png" />
<Rectangle>
  <Rectangle.Fill>
    <ImageBrush ImageSource="MyImage.png" />
  </Rectangle.Fill>
</Rectangle>
Viewbox
<Image Source="MyImage.png" Viewbox="0,0,0.5,1" /> <!-- only left half -->
<Image Source="MyImage.png" Viewbox="0,0,1,0.5" /> <!-- only top half -->
<Image Source="MyImage.png" Viewbox="0.5,0,1,1" /> <!-- only right half -->
<!-- draw an image with size 800*600px and cut the rest -->
<Image Source="MyImage.png" 
       Viewbox="0,0,800,600" ViewBoxUnits="Absolute" />
Viewport
<!-- only use top left to show image -->
<Image Source="MyImage.png" 
       ViewPort="0,0,0.5,0.5" />
<!-- use top left to show image and tile it over the whole available area -->
<Image Source="MyImage.png" 
       ViewPort="0,0,0.5,0.5" 
       TileMode="Tile" /> <!-- FlipX, FlipY, FlipXY -->
  • MediaElement, VideoDrawing
    • VisualBrush (not in Silverlight)
    • DrawingBrush (not possible in XAML, not in Silverlight)
    • VideoBrush (only in Silverlight)
  • supported container and codec types depend on machine configuration
<MediaElement Source="MyVideo.wmv" />