Grafik dan Multimedia

Artikel
06/02/2023

Windows Presentation Foundation (WPF) menyediakan dukungan untuk multimedia, grafik vektor, animasi, dan komposisi konten, sehingga memudahkan pengembang untuk membangun antarmuka dan konten pengguna yang menarik. Menggunakan Visual Studio, Anda dapat membuat grafik vektor atau animasi kompleks dan mengintegrasikan media ke dalam aplikasi Anda.

Topik ini memperkenalkan fitur grafis, animasi, dan media WPF, yang memungkinkan Anda menambahkan grafik, efek transisi, suara, dan video ke aplikasi Anda.

Catatan

Menggunakan jenis WPF dalam layanan Windows sangat tidak disarankan. Jika Anda mencoba menggunakan jenis WPF dalam layanan Windows, layanan mungkin tidak berfungsi seperti yang diharapkan.

Yang Baru dengan Grafis dan Multimedia di WPF 4

Beberapa perubahan telah dibuat terkait dengan grafik dan animasi.

Pembulatan Tata Letak

Saat tepi objek berada di tengah perangkat piksel, sistem grafis independen DPI dapat membuat artefak penyajian, seperti tepi kabur atau semi transparan. Versi WPF sebelumnya menyertakan snapping piksel untuk membantu menangani kasus ini. Silverlight 2 memperkenalkan pembulatan tata letak, yang merupakan cara lain untuk memindahkan elemen sehingga tepi jatuh pada seluruh batas piksel. WPF sekarang mendukung pembulatan tata letak dengan properti terlampir UseLayoutRounding pada FrameworkElement.
Komposisi Singgahan

Dengan menggunakan kelas BitmapCache dan BitmapCacheBrush baru, Anda dapat menyimpan bagian kompleks dari pohon visual sebagai bitmap dan sangat meningkatkan waktu penyajian. Bitmap tetap responsif terhadap input pengguna, seperti klik mouse, dan Anda dapat melukisnya ke elemen lain seperti kuas apa pun.
Dukungan Pixel Shader 3

WPF 4 dibangun di atas dukungan ShaderEffect yang diperkenalkan dalam WPF 3.5 SP1 dengan memungkinkan aplikasi menulis efek dengan menggunakan Pixel Shader (PS) versi 3.0. Model shader PS 3.0 lebih canggih daripada PS 2.0, yang memungkinkan lebih banyak efek pada perangkat keras yang didukung.
Fungsi Permudah

Anda dapat meningkatkan animasi dengan fungsi meringankan, yang memberi Anda kontrol tambahan atas perilaku animasi. Misalnya, Anda dapat menerapkan ElasticEase ke animasi untuk memberi animasi perilaku pegas. Untuk informasi selengkapnya, lihat jenis permudah di namespace layanan System.Windows.Media.Animation.

Grafik dan perenderan

WPF mencakup dukungan untuk grafis 2D berkualitas tinggi. Fungsionalitasnya termasuk kuas, geometri, gambar, bentuk, dan transformasi. Untuk informasi selengkapnya, lihat Grafik. Penyajian elemen grafis didasarkan pada Visual kelas. Struktur objek visual pada layar dijelaskan oleh pohon visual. Untuk informasi selengkapnya, lihat Gambaran Umum Penyajian Grafis WPF.

Bentuk 2D

WPF menyediakan pustaka yang umum digunakan, bentuk 2D yang digambar vektor, seperti persegi panjang dan elipsis, yang ditunjukkan oleh ilustrasi berikut.

Diagram showing ellipses and rectangles.

Bentuk WPF intrinsik ini bukan hanya bentuk: mereka adalah elemen yang dapat diprogram yang mengimplementasikan banyak fitur yang Anda harapkan dari kontrol yang paling umum, yang mencakup input keyboard dan mouse. Contoh berikut menunjukkan cara menangani peristiwa MouseUp yang dimunculkan dengan mengklik elemen Ellipse.

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Window1" >
  <Ellipse Fill="LightBlue" MouseUp="ellipseButton_MouseUp" />
</Window>

public partial class Window1  : Window
{
    void ellipseButton_MouseUp(object sender, MouseButtonEventArgs e)
    {
        MessageBox.Show("You clicked the ellipse!");
    }
}

Partial Public Class Window1
    Inherits Window
    Private Sub ellipseButton_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
        MessageBox.Show("You clicked the ellipse!")
    End Sub
End Class

Ilustrasi berikut menunjukkan output untuk markup XAML dan code-behind sebelumnya.

A message box saying

Untuk informasi selengkapnya, lihat Bentuk dan Gambar Dasar di Gambaran Umum WPF. Untuk sampel pengantar, lihat Sampel Elemen Bentuk.

Geometri 2D

Ketika bentuk 2D yang disediakan WPF tidak cukup, Anda dapat menggunakan dukungan WPF untuk geometri dan jalur untuk membuat sendiri. Ilustrasi berikut menunjukkan bagaimana Anda dapat menggunakan geometri untuk membuat bentuk, sebagai kuas gambar, dan untuk mengklip elemen WPF lainnya.

Screenshot showing how you can use geometries to create shapes.

Untuk informasi selengkapnya, lihat Gambaran Umum Geometri. Untuk sampel pengantar, lihat Sampel Geometri.

Efek 2D

WPF menyediakan pustaka kelas 2D yang dapat Anda gunakan untuk membuat berbagai efek. Kemampuan penyajian 2D WPF memberikan kemampuan untuk melukis elemen antarmuka pengguna yang memiliki gradien, bitmap, gambar, dan video; dan untuk memanipulasinya dengan menggunakan rotasi, penskalaan, dan condong. Ilustrasi berikut memberikan contoh banyak efek yang dapat Anda capai dengan menggunakan kuas WPF.

Illustration showing the different WPF brushes and paint elements.

Untuk informasi selengkapnya, lihat Gambaran Umum Kuas WPF. Untuk sampel pengantar, lihat Sampel Brushes.

Penyajian 3D

WPF menyediakan serangkaian kemampuan penyajian 3D yang terintegrasi dengan dukungan grafis 2D di WPF agar Anda dapat membuat tata letak, antarmuka pengguna, dan visualisasi data yang lebih menarik. Di salah satu ujung spektrum, WPF memungkinkan Anda merender gambar 2D ke permukaan bentuk 3D, yang ditunjukkan oleh ilustrasi berikut.

Screenshot of a sample showing 3D shapes with different textures.

Untuk informasi selengkapnya, lihat Gambaran Umum Grafis 3D. Untuk sampel pengantar, lihat Sampel Solids 3D.

Animasi

Gunakan animasi untuk membuat kontrol dan elemen tumbuh, kocok, putar, dan pudar; dan untuk membuat transisi halaman yang menarik, dan banyak lagi. Karena WPF memungkinkan Anda untuk menganimasikan sebagian besar properti, Anda tidak hanya dapat menganimasikan sebagian besar objek WPF, Anda juga dapat menggunakan WPF untuk menganimasikan objek kustom yang Anda buat.

Screenshot of an animated cube.

Untuk informasi selengkapnya, lihat gambaran umum Animation. Untuk sampel pengantar, lihat Galeri Contoh Animasi.

Media

Gambar, video, dan audio adalah cara yang kaya media untuk menyampaikan informasi dan pengalaman pengguna.

Gambar

Gambar, yang mencakup ikon, latar belakang, dan bahkan bagian animasi, adalah bagian inti dari sebagian besar aplikasi. Karena Anda sering perlu menggunakan gambar, WPF mengekspos kemampuan untuk bekerja dengannya dengan berbagai cara. Ilustrasi berikut ini hanya memperlihatkan salah satu cara tersebut.

Styling sample screenshot

Untuk informasi selengkapnya, lihat Gambaran Umum Pencitraan.

Video dan Audio

Fitur inti dari kemampuan grafis WPF adalah memberikan dukungan asli untuk bekerja dengan multimedia, yang mencakup video dan audio. Contoh berikut menunjukkan cara menyisipkan pemutar media ke dalam aplikasi.

<MediaElement Source="media\numbers.wmv" Width="450" Height="250" />

MediaElement mampu memutar video dan audio, dan cukup dapat diperluas untuk memungkinkan pembuatan antarmuka pengguna kustom yang mudah.

Untuk informasi selengkapnya, lihat gambaran umum Multimedia.

Bagikan melalui