Menggambar Objek Gambaran Umum

Artikel
06/02/2023

Topik ini memperkenalkan Drawing objek dan menjelaskan cara menggunakannya untuk menggambar bentuk, bitmap, teks, dan media secara efisien. Gunakan Drawing objek saat Anda membuat clip art, melukis dengan DrawingBrush, atau menggunakan Visual objek.

Apa itu Objek Gambar

Objek Drawing menjelaskan konten yang terlihat, seperti bentuk, bitmap, video, atau baris teks. Berbagai jenis gambar menjelaskan berbagai jenis konten. Berikut ini adalah daftar berbagai jenis objek gambar.

GeometryDrawing – Menggambar bentuk.
ImageDrawing – Menggambar gambar.
GlyphRunDrawing – Menggambar teks.
VideoDrawing – Memutar file audio atau video.
DrawingGroup – Menggambar gambar lainnya. Gunakan grup gambar untuk menggabungkan gambar lain ke dalam satu gambar komposit.

Drawing objek serbaguna; ada banyak cara untuk menggunakan Drawing objek.

Anda dapat menampilkannya sebagai gambar dengan menggunakan DrawingImage dan Image kontrol.
Anda dapat menggunakannya dengan DrawingBrush untuk melukis objek, seperti Background dari Page.
Anda dapat menggunakannya untuk menggambarkan tampilan DrawingVisual.
Anda dapat menggunakannya untuk menghitung konten Visual.

WPF menyediakan jenis objek lain yang mampu menggambar bentuk, bitmap, teks, dan media. Misalnya, Anda juga dapat menggunakan Shape objek untuk menggambar bentuk, dan MediaElement kontrol menyediakan cara lain untuk menambahkan video ke aplikasi Anda. Jadi kapan Anda harus menggunakan Drawing objek? Ketika Anda dapat mengorbankan fitur tingkat kerangka kerja untuk mendapatkan manfaat performa atau ketika Anda membutuhkan Freezable fitur. Karena Drawing objek tidak memiliki dukungan untuk Tata Letak, input, dan fokus, objek tersebut memberikan manfaat performa yang membuatnya ideal untuk menggambarkan latar belakang, clip art, dan untuk gambar tingkat rendah dengan Visual objek.

Karena merupakan objek jenis Freezable , Drawing objek mendapatkan beberapa fitur khusus, yang mencakup hal-hal berikut: mereka dapat dinyatakan sebagai sumber daya, dibagikan di antara beberapa objek, dibuat baca-saja untuk meningkatkan performa, kloning, dan membuat utas aman. Untuk informasi selengkapnya tentang berbagai fitur yang disediakan oleh Freezable objek, lihat Gambaran Umum Objek Freezable.

Gambar Bentuk

Untuk menggambar bentuk, Anda menggunakan GeometryDrawing. Properti gambar geometri menggambarkan Geometry bentuk untuk menggambar, propertinya Brush menjelaskan bagaimana interior bentuk harus dicat, dan propertinya Pen menggambarkan bagaimana kerangkanya harus digambar.

Contoh berikut menggunakan GeometryDrawing untuk menggambar bentuk. Bentuk dijelaskan oleh satu GeometryGroup dan dua EllipseGeometry objek. Interior bentuk dicat dengan LinearGradientBrush dan garis luarnya digambar dengan Black Pen.

Contoh ini membuat berikut .GeometryDrawing

A GeometryDrawing of two ellipses
A GeometryDrawing

//
// Create the Geometry to draw.
//
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(
    new EllipseGeometry(new Point(50,50), 45, 20)
    );
ellipses.Children.Add(
    new EllipseGeometry(new Point(50, 50), 20, 45)
    );

//
// Create a GeometryDrawing.
//
GeometryDrawing aGeometryDrawing = new GeometryDrawing();
aGeometryDrawing.Geometry = ellipses;

// Paint the drawing with a gradient.
aGeometryDrawing.Brush =
    new LinearGradientBrush(
        Colors.Blue,
        Color.FromRgb(204,204,255),
        new Point(0,0),
        new Point(1,1));

// Outline the drawing with a solid color.
aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

<GeometryDrawing>
  <GeometryDrawing.Geometry>

    <!-- Create a composite shape. -->
    <GeometryGroup>
      <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
      <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
    </GeometryGroup>
  </GeometryDrawing.Geometry>
  <GeometryDrawing.Brush>

    <!-- Paint the drawing with a gradient. -->
    <LinearGradientBrush>
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="1.0" Color="#CCCCFF" />
    </LinearGradientBrush>
  </GeometryDrawing.Brush>
  <GeometryDrawing.Pen>

    <!-- Outline the drawing with a solid color. -->
    <Pen Thickness="10" Brush="Black" />
  </GeometryDrawing.Pen>
</GeometryDrawing>

Untuk contoh lengkapnya, lihat Membuat GeometryDrawing.

Kelas lain Geometry , seperti PathGeometry memungkinkan Anda membuat bentuk yang lebih kompleks dengan membuat kurva dan busur. Untuk informasi selengkapnya tentang Geometry objek, lihat Gambaran Umum Geometri.

Untuk informasi selengkapnya tentang cara lain untuk menggambar bentuk yang tidak menggunakan Drawing objek, lihat Bentuk dan Gambar Dasar di Gambaran Umum WPF.

Gambar

Untuk menggambar gambar, Anda menggunakan ImageDrawing. Properti ImageDrawing objek ImageSource menjelaskan gambar yang akan digambar, dan propertinya Rect menentukan wilayah tempat gambar digambar.

Contoh berikut menggambar gambar ke dalam persegi panjang yang terletak di (75.75) yaitu 100 kali 100 piksel. Ilustrasi berikut menunjukkan yang ImageDrawing dibuat oleh contoh. Batas abu-abu ditambahkan untuk menunjukkan batas ImageDrawing.

A 100 by 100 ImageDrawing drawn at (75,75)
A 100 by 100 ImageDrawing

// Create a 100 by 100 image with an upper-left point of (75,75).
ImageDrawing bigKiwi = new ImageDrawing();
bigKiwi.Rect = new Rect(75, 75, 100, 100);
bigKiwi.ImageSource = new BitmapImage(
    new Uri(@"sampleImages\kiwi.png", UriKind.Relative));

<!-- The Rect property specifies that the image only fill a 100 by 100
     rectangular area. -->
<ImageDrawing Rect="75,75,100,100" ImageSource="sampleImages\kiwi.png"/>

Untuk informasi selengkapnya tentang gambar, lihat Gambaran Umum Pencitraan.

Putar Media (Hanya Kode)

Catatan

Meskipun Anda dapat mendeklarasikan VideoDrawing dalam Extensible Application Markup Language (XAML), Anda hanya dapat memuat dan memutar medianya menggunakan kode. Untuk memutar video dalam Extensible Application Markup Language (XAML), gunakan sebagai MediaElement gantinya.

Untuk memutar file audio atau video, Anda menggunakan VideoDrawing dan MediaPlayer. Ada dua cara untuk memuat dan memutar media. Yang pertama adalah menggunakan MediaPlayer dan dengan VideoDrawing sendirinya, dan cara kedua adalah membuat sendiri MediaTimeline untuk digunakan dengan MediaPlayer dan VideoDrawing.

Catatan

Saat mendistribusikan media dengan aplikasi, Anda tidak dapat menggunakan file media sebagai sumber daya proyek, seperti yang Anda lakukan pada gambar. Dalam file proyek, Anda harus mengatur jenis media ke Content dan mengatur CopyToOutputDirectory ke PreserveNewest atau Always.

Untuk memutar media tanpa membuat media Anda sendiri MediaTimeline, Anda melakukan langkah-langkah berikut.

Buat objek MediaPlayer.

MediaPlayer player = new MediaPlayer();

Open Gunakan metode untuk memuat file media.

player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));

Buat VideoDrawing.

VideoDrawing aVideoDrawing = new VideoDrawing();

Tentukan ukuran dan lokasi untuk menggambar media dengan mengatur Rect properti .VideoDrawing
```
aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
```
Atur Player properti dengan VideoDrawing yang MediaPlayer Anda buat.
```
aVideoDrawing.Player = player;
```
Play Gunakan metode MediaPlayer untuk mulai memutar media.
```
// Play the video once.
player.Play();
```

Contoh berikut menggunakan VideoDrawing dan MediaPlayer untuk memutar file video sekali.

//
// Create a VideoDrawing.
//
MediaPlayer player = new MediaPlayer();

player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));

VideoDrawing aVideoDrawing = new VideoDrawing();

aVideoDrawing.Rect = new Rect(0, 0, 100, 100);

aVideoDrawing.Player = player;

// Play the video once.
player.Play();

Untuk mendapatkan kontrol waktu tambahan atas media, gunakan MediaTimeline dengan MediaPlayer objek dan VideoDrawing . Memungkinkan MediaTimeline Anda menentukan apakah video harus diulang. Untuk menggunakan MediaTimeline dengan VideoDrawing, Anda melakukan langkah-langkah berikut:

Nyatakan dan tetapkan MediaTimeline perilaku waktunya.

// Create a MediaTimeline.
MediaTimeline mTimeline =
    new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));

// Set the timeline to repeat.
mTimeline.RepeatBehavior = RepeatBehavior.Forever;

MediaClock Buat dari MediaTimeline.

// Create a clock from the MediaTimeline.
MediaClock mClock = mTimeline.CreateClock();

MediaPlayer Buat dan gunakan MediaClock untuk mengatur propertinyaClock.

MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
repeatingVideoDrawingPlayer.Clock = mClock;

VideoDrawing Buat dan tetapkan MediaPlayer ke Player properti .VideoDrawing

VideoDrawing repeatingVideoDrawing = new VideoDrawing();
repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;

Contoh berikut menggunakan MediaTimeline dengan MediaPlayer dan VideoDrawing untuk memutar video berulang kali.

//
// Create a VideoDrawing that repeats.
//

// Create a MediaTimeline.
MediaTimeline mTimeline =
    new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));

// Set the timeline to repeat.
mTimeline.RepeatBehavior = RepeatBehavior.Forever;

// Create a clock from the MediaTimeline.
MediaClock mClock = mTimeline.CreateClock();

MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
repeatingVideoDrawingPlayer.Clock = mClock;

VideoDrawing repeatingVideoDrawing = new VideoDrawing();
repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;

Perhatikan bahwa, ketika Anda menggunakan MediaTimeline, Anda menggunakan interaktif ClockController yang dikembalikan dari Controller properti MediaClock untuk mengontrol pemutaran media alih-alih metode interaktif .MediaPlayer

Gambar Teks

Untuk menggambar teks, Anda menggunakan GlyphRunDrawing dan GlyphRun. Contoh berikut menggunakan GlyphRunDrawing untuk menggambar teks "Halo Dunia".

GlyphRun theGlyphRun = new GlyphRun(
    new GlyphTypeface(new Uri(@"C:\WINDOWS\Fonts\TIMES.TTF")),
    0,
    false,
    13.333333333333334,
    new ushort[]{43, 72, 79, 79, 82, 3, 58, 82, 85, 79, 71},
    new Point(0, 12.29),
    new double[]{
        9.62666666666667, 7.41333333333333, 2.96,
        2.96, 7.41333333333333, 3.70666666666667,
        12.5866666666667, 7.41333333333333,
        4.44, 2.96, 7.41333333333333},
    null,
    null,
    null,
    null,
    null,
    null

    );

GlyphRunDrawing gDrawing = new GlyphRunDrawing(Brushes.Black, theGlyphRun);

<GlyphRunDrawing ForegroundBrush="Black">
  <GlyphRunDrawing.GlyphRun>
    <GlyphRun 
      CaretStops="{x:Null}" 
      ClusterMap="{x:Null}" 
      IsSideways="False" 
      GlyphOffsets="{x:Null}" 
      GlyphIndices="43 72 79 79 82 3 58 82 85 79 71" 
      BaselineOrigin="0,12.29"  
      FontRenderingEmSize="13.333333333333334" 
      DeviceFontName="{x:Null}" 
      AdvanceWidths="9.62666666666667 7.41333333333333 2.96 2.96 7.41333333333333 3.70666666666667 12.5866666666667 7.41333333333333 4.44 2.96 7.41333333333333" 
      BidiLevel="0">
      <GlyphRun.GlyphTypeface>
        <GlyphTypeface FontUri="C:\WINDOWS\Fonts\TIMES.TTF" />
      </GlyphRun.GlyphTypeface>
    </GlyphRun>
  </GlyphRunDrawing.GlyphRun>
</GlyphRunDrawing>

adalah GlyphRun objek tingkat rendah yang ditujukan untuk digunakan dengan presentasi dokumen format tetap dan skenario cetak. Cara yang lebih sederhana untuk menggambar teks ke layar adalah dengan menggunakan Label atau TextBlock. Untuk informasi selengkapnya tentang GlyphRun, lihat Gambaran umum Pengenalan Objek GlyphRun dan Elemen Glyphs.

Gambar Komposit

A DrawingGroup memungkinkan Anda menggabungkan beberapa gambar ke dalam satu gambar komposit. Dengan menggunakan DrawingGroup, Anda dapat menggabungkan bentuk, gambar, dan teks ke dalam satu Drawing objek.

Contoh berikut menggunakan DrawingGroup untuk menggabungkan dua GeometryDrawing objek dan ImageDrawing objek. Contoh ini menghasilkan output berikut.

A DrawingGroup with multiple drawings
Gambar komposit

//
// Create three drawings.
//
GeometryDrawing ellipseDrawing =
    new GeometryDrawing(
        new SolidColorBrush(Color.FromArgb(102, 181, 243, 20)),
        new Pen(Brushes.Black, 4),
        new EllipseGeometry(new Point(50,50), 50, 50)
    );

ImageDrawing kiwiPictureDrawing =
    new ImageDrawing(
        new BitmapImage(new Uri(@"sampleImages\kiwi.png", UriKind.Relative)),
        new Rect(50,50,100,100));

GeometryDrawing ellipseDrawing2 =
    new GeometryDrawing(
        new SolidColorBrush(Color.FromArgb(102,181,243,20)),
        new Pen(Brushes.Black, 4),
        new EllipseGeometry(new Point(150, 150), 50, 50)
    );

// Create a DrawingGroup to contain the drawings.
DrawingGroup aDrawingGroup = new DrawingGroup();
aDrawingGroup.Children.Add(ellipseDrawing);
aDrawingGroup.Children.Add(kiwiPictureDrawing);
aDrawingGroup.Children.Add(ellipseDrawing2);

<DrawingGroup>

  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="50,50" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
  <ImageDrawing ImageSource="sampleImages\kiwi.png" Rect="50,50,100,100"/>
  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="150,150" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
</DrawingGroup>

A DrawingGroup juga memungkinkan Anda menerapkan masker opasitas, transformasi, efek bitmap, dan operasi lainnya ke kontennya. DrawingGroupoperasi diterapkan dalam urutan berikut: OpacityMask, , Opacity, BitmapEffect ClipGeometry, GuidelineSet, lalu Transform.

Ilustrasi berikut menunjukkan urutan DrawingGroup penerapan operasi.

DrawingGroup order of operations
Urutan operasi DrawingGroup

Tabel berikut ini menjelaskan properti yang bisa Anda gunakan untuk memanipulasi DrawingGroup konten objek.

Properti	Deskripsi	Ilustrasi
OpacityMask	Mengubah keburaman bagian konten yang DrawingGroup dipilih. Misalnya, lihat Cara: Mengontrol Keburaman Gambar.
Opacity	Mengubah opasitas DrawingGroup konten secara seragam. Gunakan properti ini untuk membuat Drawing transparan atau sebagian transparan. Misalnya, lihat Cara: Menerapkan Masker Opasitas ke Gambar.
BitmapEffect	BitmapEffect Menerapkan ke DrawingGroup isi. Misalnya, lihat Cara: Menerapkan BitmapEffect ke Gambar.
ClipGeometry	DrawingGroup Klip konten ke wilayah yang Anda jelaskan menggunakan Geometry. Misalnya, lihat Cara: Mengklip Gambar .
GuidelineSet	Memposisikan piksel independen perangkat ke piksel perangkat di sepanjang panduan yang ditentukan. Properti ini berguna untuk memastikan bahwa grafik yang sangat rinci dirender dengan tajam pada tampilan DPI rendah. Misalnya, lihat Menerapkan Set Pedoman ke Gambar.
Transform	DrawingGroup Mengubah konten. Misalnya, lihat Cara: Menerapkan Transformasi ke Gambar.

Menampilkan Gambar sebagai Gambar

Untuk menampilkan Drawing dengan Image kontrol, gunakan DrawingImage sebagai Image kontrol Source dan atur DrawingImage properti objek DrawingImage.Drawing ke gambar yang ingin Anda tampilkan.

Contoh berikut menggunakan DrawingImage dan Image kontrol untuk menampilkan GeometryDrawing. Contoh ini menghasilkan output berikut.

A GeometryDrawing of two ellipses
GambarImage

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SDKSample
{
    public class DrawingImageExample : Page
    {

        public DrawingImageExample()
        {

            //
            // Create the Geometry to draw.
            //
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50,50), 45, 20)
                );
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50, 50), 20, 45)
                );

            //
            // Create a GeometryDrawing.
            //
            GeometryDrawing aGeometryDrawing = new GeometryDrawing();
            aGeometryDrawing.Geometry = ellipses;

            // Paint the drawing with a gradient.
            aGeometryDrawing.Brush =
                new LinearGradientBrush(
                    Colors.Blue,
                    Color.FromRgb(204,204,255),
                    new Point(0,0),
                    new Point(1,1));

            // Outline the drawing with a solid color.
            aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

            //
            // Use a DrawingImage and an Image control
            // to display the drawing.
            //
            DrawingImage geometryImage = new DrawingImage(aGeometryDrawing);

            // Freeze the DrawingImage for performance benefits.
            geometryImage.Freeze();

            Image anImage = new Image();
            anImage.Source = geometryImage;
            anImage.HorizontalAlignment = HorizontalAlignment.Left;

            //
            // Place the image inside a border and
            // add it to the page.
            //
            Border exampleBorder = new Border();
            exampleBorder.Child = anImage;
            exampleBorder.BorderBrush = Brushes.Gray;
            exampleBorder.BorderThickness = new Thickness(1);
            exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
            exampleBorder.VerticalAlignment = VerticalAlignment.Top;
            exampleBorder.Margin = new Thickness(10);

            this.Margin = new Thickness(20);
            this.Background = Brushes.White;
            this.Content = exampleBorder;
        }
    }
}

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Background="White" Margin="20">

  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Margin="10">

    <!-- This image uses a Drawing object for its source. -->
    <Image>
      <Image.Source>
        <DrawingImage PresentationOptions:Freeze="True">
          <DrawingImage.Drawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                  <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush>
                  <GradientStop Offset="0.0" Color="Blue" />
                  <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
              <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingImage.Drawing>
        </DrawingImage>
      </Image.Source>
    </Image>
  </Border>

</Page>

Mengecat Objek dengan Gambar

A DrawingBrush adalah jenis kuas yang melukis area dengan objek gambar. Anda dapat menggunakannya untuk melukis hampir semua objek grafis dengan gambar. Properti Drawing dari menggambarkan DrawingBrush Drawing. Untuk merender Drawing dengan DrawingBrush, tambahkan ke kuas menggunakan properti kuas Drawing dan gunakan kuas untuk melukis objek grafis, seperti kontrol atau panel.

Contoh berikut menggunakan DrawingBrush untuk melukis Fill dengan Rectangle pola yang dibuat dari GeometryDrawing. Contoh ini menghasilkan output berikut.

A tiled DrawingBrush
GeometryDrawing yang digunakan dengan DrawingBrush

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SDKSample
{
    public class DrawingBrushExample : Page
    {

        public DrawingBrushExample()
        {

            //
            // Create the Geometry to draw.
            //
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50,50), 45, 20)
                );
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50, 50), 20, 45)
                );

            //
            // Create a GeometryDrawing.
            //
            GeometryDrawing aGeometryDrawing = new GeometryDrawing();
            aGeometryDrawing.Geometry = ellipses;

            // Paint the drawing with a gradient.
            aGeometryDrawing.Brush =
                new LinearGradientBrush(
                    Colors.Blue,
                    Color.FromRgb(204,204,255),
                    new Point(0,0),
                    new Point(1,1));

            // Outline the drawing with a solid color.
            aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

            DrawingBrush patternBrush = new DrawingBrush(aGeometryDrawing);
            patternBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
            patternBrush.TileMode = TileMode.Tile;
            patternBrush.Freeze();

            //
            // Create an object to paint.
            //
            Rectangle paintedRectangle = new Rectangle();
            paintedRectangle.Width = 100;
            paintedRectangle.Height = 100;
            paintedRectangle.Fill = patternBrush;

            //
            // Place the image inside a border and
            // add it to the page.
            //
            Border exampleBorder = new Border();
            exampleBorder.Child = paintedRectangle;
            exampleBorder.BorderBrush = Brushes.Gray;
            exampleBorder.BorderThickness = new Thickness(1);
            exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
            exampleBorder.VerticalAlignment = VerticalAlignment.Top;
            exampleBorder.Margin = new Thickness(10);

            this.Margin = new Thickness(20);
            this.Background = Brushes.White;
            this.Content = exampleBorder;
        }
    }
}

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Margin="20" Background="White">

  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Margin="10">
    <Rectangle Width="100" Height="100">
      <Rectangle.Fill>
        <DrawingBrush PresentationOptions:Freeze="True"
                      Viewport="0,0,0.25,0.25" TileMode="Tile">
          <DrawingBrush.Drawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                  <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush>
                  <GradientStop Offset="0.0" Color="Blue" />
                  <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
              <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingBrush.Drawing>
        </DrawingBrush>
      </Rectangle.Fill>

    </Rectangle>
  </Border>


</Page>

Kelas ini DrawingBrush menyediakan berbagai opsi untuk meregangkan dan memilah kontennya. Untuk informasi selengkapnya tentang DrawingBrush, lihat gambaran umum Melukis dengan Gambar, Gambar, dan Visual .

Merender Gambar dengan Visual

DrawingVisual adalah jenis objek visual yang dirancang untuk merender gambar. Bekerja langsung di lapisan visual adalah opsi bagi pengembang yang ingin membangun lingkungan grafis yang sangat disesuaikan, dan tidak dijelaskan dalam gambaran umum ini. Untuk informasi selengkapnya, lihat gambaran umum Menggunakan Objek DrawingVisual .

Objek DrawingContext

Kelas ini DrawingContext memungkinkan Anda mengisi Visual atau Drawing dengan konten visual. Banyak objek grafis tingkat bawah tersebut menggunakan DrawingContext karena menggambarkan konten grafis dengan sangat efisien.

DrawingContext Meskipun metode gambar tampak mirip dengan metode gambar dari jenisnyaSystem.Drawing.Graphics, mereka sebenarnya sangat berbeda. DrawingContext digunakan dengan sistem grafis mode yang dipertahankan, sementara System.Drawing.Graphics jenis digunakan dengan sistem grafis mode langsung. Ketika Anda menggunakan DrawingContext perintah gambar objek, Anda benar-benar menyimpan serangkaian instruksi penyajian (meskipun mekanisme penyimpanan yang tepat tergantung pada jenis objek yang memasok DrawingContext) yang nantinya akan digunakan oleh sistem grafis; Anda tidak menggambar ke layar secara real time. Untuk informasi selengkapnya tentang cara kerja sistem grafis Windows Presentation Foundation (WPF), lihat Gambaran Umum Penyajian Grafis WPF.

Namun, Anda tidak pernah langsung membuat DrawingContextinstans ; Anda dapat memperoleh konteks gambar dari metode tertentu, seperti DrawingGroup.Open dan DrawingVisual.RenderOpen.

Menghitung Konten Visual

Selain kegunaannya yang lain, Drawing objek juga menyediakan model objek untuk menghitung konten Visual.

Contoh berikut menggunakan GetDrawing metode untuk mengambil DrawingGroup nilai Visual dan menghitungnya.

public void RetrieveDrawing(Visual v)
{
    DrawingGroup drawingGroup = VisualTreeHelper.GetDrawing(v);
    EnumDrawingGroup(drawingGroup);
}

// Enumerate the drawings in the DrawingGroup.
public void EnumDrawingGroup(DrawingGroup drawingGroup)
{
    DrawingCollection dc = drawingGroup.Children;

    // Enumerate the drawings in the DrawingCollection.
    foreach (Drawing drawing in dc)
    {
        // If the drawing is a DrawingGroup, call the function recursively.
        if (drawing is DrawingGroup group)
        {
            EnumDrawingGroup(group);
        }
        else if (drawing is GeometryDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is ImageDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is GlyphRunDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is VideoDrawing)
        {
            // Perform action based on drawing type.
        }
    }
}

Bagikan melalui