Membuat kontrol transportasi kustom
MediaPlayerElement memiliki kontrol transportasi XAML yang dapat disesuaikan untuk mengelola kontrol konten audio dan video dalam aplikasi Windows. Di sini, kami menunjukkan cara menyesuaikan templat MediaTransportControls. Kami akan menunjukkan kepada Anda cara bekerja dengan menu luapan, menambahkan tombol kustom dan memodifikasi slider.
API Penting: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls
Sebelum memulai, Anda harus terbiasa dengan kelas MediaPlayerElement dan MediaTransportControls. Untuk informasi selengkapnya, lihat panduan kontrol MediaPlayerElement.
Tip
Contoh dalam topik ini didasarkan pada sampel Kontrol Transportasi Media. Anda dapat mengunduh sampel untuk melihat dan menjalankan kode yang telah selesai.
Catatan
MediaPlayerElement hanya tersedia di Windows 10, versi 1607 dan yang lebih baru. Jika Anda mengembangkan aplikasi untuk versi Windows 10 yang lebih lama, Anda harus menggunakan MediaElement sebagai gantinya. Semua contoh di halaman ini juga berfungsi dengan MediaElement .
Kapan Anda harus mengkustomisasi templat?
MediaPlayerElement memiliki kontrol transportasi bawaan yang dirancang agar berfungsi dengan baik tanpa modifikasi di sebagian besar aplikasi pemutaran video dan audio. Mereka disediakan oleh kelas MediaTransportControls dan menyertakan tombol untuk memutar, menghentikan, dan menavigasi media, menyesuaikan volume, mengalihkan layar penuh, mentransmisikan ke perangkat kedua, mengaktifkan keterangan, beralih trek audio, dan menyesuaikan laju pemutaran. MediaTransportControls memiliki properti yang memungkinkan Anda mengontrol apakah setiap tombol ditampilkan dan diaktifkan. Anda juga dapat mengatur properti IsCompact untuk menentukan apakah kontrol ditampilkan dalam satu atau dua baris.
Namun, mungkin ada skenario di mana Anda perlu menyesuaikan tampilan kontrol lebih lanjut atau mengubah perilakunya. Berikut adalah beberapa contoh:
- Ubah ikon, perilaku penggiser, dan warna.
- Pindahkan tombol perintah yang kurang umum digunakan ke menu luapan.
- Ubah urutan drop out perintah saat kontrol diubah ukurannya.
- Berikan tombol perintah yang tidak ada di set default.
Catatan
Tombol yang terlihat di layar akan keluar dari kontrol transportasi bawaan dalam urutan yang telah ditentukan sebelumnya jika tidak ada cukup ruang di layar. Untuk mengubah urutan ini atau menempatkan perintah yang tidak pas ke dalam menu luapan, Anda harus menyesuaikan kontrol.
Anda dapat menyesuaikan tampilan kontrol dengan memodifikasi templat default. Untuk mengubah perilaku kontrol atau menambahkan perintah baru, Anda dapat membuat kontrol kustom yang berasal dari MediaTransportControls.
Tip
Templat kontrol yang dapat disesuaikan adalah fitur canggih dari platform XAML, tetapi ada juga konsekuensi yang harus Anda pertimbangkan. Saat Anda menyesuaikan templat, templat tersebut menjadi bagian statis dari aplikasi Anda dan oleh karena itu tidak akan menerima pembaruan platform apa pun yang dibuat untuk templat oleh Microsoft. Jika pembaruan templat dibuat oleh Microsoft, Anda harus mengambil templat baru dan memodifikasinya kembali untuk mendapatkan manfaat templat yang diperbarui.
Struktur templat
ControlTemplate adalah bagian dari gaya default. Anda dapat menyalin gaya default ini ke dalam proyek Anda untuk mengubahnya. ControlTemplate dibagi menjadi beberapa bagian yang mirip dengan templat kontrol XAML lainnya.
- Bagian pertama templat berisi definisi Gaya untuk berbagai komponen MediaTransportControls.
- Bagian kedua mendefinisikan berbagai status visual yang digunakan oleh MediaTransportControls.
- Bagian ketiga berisi Grid yang menyatukan berbagai elemen MediaTransportControls dan menentukan bagaimana komponen ditata.
Catatan
Untuk informasi selengkapnya tentang memodifikasi templat, lihat Templat kontrol. Anda dapat menggunakan editor teks atau editor serupa di IDE Anda untuk membuka file XAML di (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(versi SDK)\Generic. Gaya dan templat default untuk setiap kontrol ditentukan dalam file generic.xaml . Anda dapat menemukan templat MediaTransportControls di generic.xaml dengan mencari "MediaTransportControls".
Di bagian berikut, Anda mempelajari cara mengkustomisasi beberapa elemen utama kontrol transportasi:
- Slider: memungkinkan pengguna untuk menggosok melalui media mereka dan juga menampilkan kemajuan
- CommandBar: berisi semua tombol. Untuk informasi selengkapnya, lihat bagian Anatomi dari topik referensi MediaTransportControls.
Menyesuaikan kontrol transportasi
Jika Anda hanya ingin mengubah tampilan MediaTransportControls, Anda dapat membuat salinan gaya kontrol dan templat default, dan memodifikasinya. Namun, jika Anda juga ingin menambahkan atau memodifikasi fungsionalitas kontrol, Anda perlu membuat kelas baru yang berasal dari MediaTransportControls.
Templat ulang kontrol
Untuk mengkustomisasi gaya dan templat default MediaTransportControls
- Salin gaya default dari gaya dan templat MediaTransportControls ke dalam ResourceDictionary di proyek Anda.
- Beri Gaya nilai x:Key untuk mengidentifikasinya, seperti ini.
<Style TargetType="MediaTransportControls" x:Key="myTransportControlsStyle">
<!-- Style content ... -->
</Style>
- Tambahkan MediaPlayerElement dengan MediaTransportControls ke UI Anda.
- Atur properti Gaya elemen MediaTransportControls ke sumber daya Gaya kustom Anda, seperti yang ditunjukkan di sini.
<MediaPlayerElement AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls Style="{StaticResource myTransportControlsStyle}"/>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
Untuk informasi selengkapnya tentang memodifikasi gaya dan templat, lihat Kontrol gaya dan Templat kontrol.
Membuat kontrol turunan
Untuk menambahkan atau mengubah fungsionalitas kontrol transportasi, Anda harus membuat kelas baru yang berasal dari MediaTransportControls. Kelas turunan yang disebut CustomMediaTransportControls ditampilkan dalam sampel Kontrol Transportasi Media dan contoh yang tersisa di halaman ini.
Untuk membuat kelas baru yang berasal dari MediaTransportControls
- Tambahkan file kelas baru ke proyek Anda.
- Di Visual Studio, pilih Tambahkan Kelas Proyek > . Dialog Tambahkan Item Baru terbuka.
- Dalam dialog Tambahkan Item Baru, masukkan nama untuk file kelas, lalu klik Tambahkan. (Dalam sampel Kontrol Transportasi Media, kelas diberi nama
CustomMediaTransportControls.)
- Ubah kode kelas untuk berasal dari kelas MediaTransportControls.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
}
- Salin gaya default untuk MediaTransportControls ke dalam ResourceDictionary di proyek Anda. Ini adalah gaya dan templat yang Anda ubah. (Dalam sampel Kontrol Transportasi Media, folder baru yang disebut "Tema" dibuat, dan file ResourceDictionary yang disebut generic.xaml ditambahkan ke dalamnya.)
- Ubah TargetType gaya ke jenis kontrol kustom baru. (Dalam sampel, TargetType diubah menjadi
local:CustomMediaTransportControls.)
xmlns:local="using:CustomMediaTransportControls">
...
<Style TargetType="local:CustomMediaTransportControls">
- Atur DefaultStyleKey dari kelas kustom Anda. Ini memberi tahu kelas kustom Anda untuk menggunakan Gaya dengan TargetType dari
local:CustomMediaTransportControls.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
public CustomMediaTransportControls()
{
this.DefaultStyleKey = typeof(CustomMediaTransportControls);
}
}
- Tambahkan MediaPlayerElement ke markup XAML Anda dan tambahkan kontrol transportasi kustom ke dalamnya. Satu hal yang perlu diperhatikan adalah bahwa API untuk menyembunyikan, menampilkan, menonaktifkan, dan mengaktifkan tombol default masih berfungsi dengan templat yang disesuaikan.
<MediaPlayerElement Name="MediaPlayerElement1" AreTransportControlsEnabled="True" Source="video.mp4">
<MediaPlayerElement.TransportControls>
<local:CustomMediaTransportControls x:Name="customMTC"
IsFastForwardButtonVisible="True"
IsFastForwardEnabled="True"
IsFastRewindButtonVisible="True"
IsFastRewindEnabled="True"
IsPlaybackRateButtonVisible="True"
IsPlaybackRateEnabled="True"
IsCompact="False">
</local:CustomMediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
Anda sekarang dapat mengubah gaya kontrol dan templat untuk memperbarui tampilan kontrol kustom Anda, dan kode kontrol untuk memperbarui perilakunya.
Bekerja dengan menu luapan
Anda dapat memindahkan tombol perintah MediaTransportControls ke menu luapan, sehingga perintah yang kurang umum digunakan disembunyikan hingga pengguna membutuhkannya.
Dalam templat MediaTransportControls, tombol perintah terkandung dalam elemen CommandBar . Bilah perintah memiliki konsep perintah primer dan sekunder. Perintah utama adalah tombol yang muncul di kontrol secara default dan selalu terlihat (kecuali Anda menonaktifkan tombol, menyembunyikan tombol atau tidak ada cukup ruang). Perintah sekunder ditampilkan di menu luapan yang muncul saat pengguna mengklik tombol elipsis (...). Untuk informasi selengkapnya, lihat artikel Bilah aplikasi dan bilah perintah.
Untuk memindahkan elemen dari perintah utama bilah perintah ke menu luapan, Anda perlu mengedit templat kontrol XAML.
Untuk memindahkan perintah ke menu luapan:
- Di templat kontrol, temukan elemen CommandBar bernama
MediaControlsCommandBar. - Tambahkan bagian SecondaryCommands ke XAML untuk CommandBar. Letakkan setelah tag penutup untuk PrimaryCommands.
<CommandBar x:Name="MediaControlsCommandBar" ... >
<CommandBar.PrimaryCommands>
...
<AppBarButton x:Name='PlaybackRateButton'
Style='{StaticResource AppBarButtonStyle}'
MediaTransportControlsHelper.DropoutOrder='4'
Visibility='Collapsed'>
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
...
</CommandBar.PrimaryCommands>
<!-- Add secondary commands (overflow menu) here -->
<CommandBar.SecondaryCommands>
...
</CommandBar.SecondaryCommands>
</CommandBar>
Untuk mengisi menu dengan perintah, potong dan tempel XAML untuk objek AppBarButton yang diinginkan dari PrimaryCommands ke SecondaryCommands. Dalam contoh ini, kami memindahkan ke
PlaybackRateButtonmenu luapan.Tambahkan label ke tombol dan hapus informasi gaya, seperti yang ditunjukkan di sini. Karena menu luapan terdiri dari tombol teks, Anda harus menambahkan label teks ke tombol dan juga menghapus gaya yang mengatur tinggi dan lebar tombol. Jika tidak, itu tidak akan muncul dengan benar di menu luapan.
<CommandBar.SecondaryCommands>
<AppBarButton x:Name='PlaybackRateButton'
Label='Playback Rate'>
</AppBarButton>
</CommandBar.SecondaryCommands>
Penting
Anda masih harus membuat tombol terlihat dan mengaktifkannya untuk menggunakannya di menu luapan. Dalam contoh ini, elemen PlaybackRateButton tidak terlihat di menu luapan kecuali properti IsPlaybackRateButtonVisible benar. Ini tidak diaktifkan kecuali properti IsPlaybackRateEnabled benar. Pengaturan properti ini diperlihatkan di bagian sebelumnya.
Menambahkan tombol kustom
Salah satu alasan Anda mungkin ingin menyesuaikan MediaTransportControls adalah menambahkan perintah kustom ke kontrol. Baik Anda menambahkannya sebagai perintah utama atau perintah sekunder, prosedur untuk membuat tombol perintah dan memodifikasi perilakunya sama. Dalam sampel Kontrol Transportasi Media, tombol "peringkat" ditambahkan ke perintah utama.
Untuk menambahkan tombol perintah kustom
- Buat objek AppBarButton dan tambahkan ke CommandBar di templat kontrol.
<AppBarButton x:Name="LikeButton"
Icon="Like"
Style="{StaticResource AppBarButtonStyle}"
MediaTransportControlsHelper.DropoutOrder="3"
VerticalAlignment="Center" />
Anda harus menambahkannya ke CommandBar di lokasi yang sesuai. (Untuk informasi selengkapnya, lihat bagian Menu bekerja dengan luapan.) Bagaimana posisinya di UI ditentukan oleh di mana tombol berada di markup. Misalnya, jika Anda ingin tombol ini muncul sebagai elemen terakhir dalam perintah utama, tambahkan di bagian paling akhir daftar perintah utama.
Anda juga dapat menyesuaikan ikon untuk tombol . Untuk informasi selengkapnya, lihat referensi AppBarButton.
- Di penimpaan OnApplyTemplate, dapatkan tombol dari templat dan daftarkan handler untuk peristiwa Klik. Kode ini masuk kelas
CustomMediaTransportControls.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
// ...
protected override void OnApplyTemplate()
{
// Find the custom button and create an event handler for its Click event.
var likeButton = GetTemplateChild("LikeButton") as Button;
likeButton.Click += LikeButton_Click;
base.OnApplyTemplate();
}
//...
}
- Tambahkan kode ke penanganan aktivitas Klik untuk melakukan tindakan yang terjadi saat tombol diklik. Berikut adalah kode lengkap untuk kelas .
public sealed class CustomMediaTransportControls : MediaTransportControls
{
public event EventHandler< EventArgs> Liked;
public CustomMediaTransportControls()
{
this.DefaultStyleKey = typeof(CustomMediaTransportControls);
}
protected override void OnApplyTemplate()
{
// Find the custom button and create an event handler for its Click event.
var likeButton = GetTemplateChild("LikeButton") as Button;
likeButton.Click += LikeButton_Click;
base.OnApplyTemplate();
}
private void LikeButton_Click(object sender, RoutedEventArgs e)
{
// Raise an event on the custom control when 'like' is clicked.
var handler = Liked;
if (handler != null)
{
handler(this, EventArgs.Empty);
}
}
}
Memodifikasi pengguncur
Kontrol "cari" mediaTransportControls disediakan oleh elemen Slider . Salah satu cara Anda dapat menyesuaikannya adalah dengan mengubah granularitas perilaku pencarian.
Pengguncur pencarian default dibagi menjadi 100 bagian, sehingga perilaku pencarian terbatas pada banyak bagian tersebut. Anda dapat mengubah granularitas penggeser pencarian dengan mendapatkan Penggeser dari pohon visual XAML di penanganan aktivitas MediaOpened Anda di MediaPlayerElement.MediaPlayer. Contoh ini memperlihatkan cara menggunakan VisualTreeHelper untuk mendapatkan referensi ke Penggeser, lalu mengubah frekuensi langkah default penggeser dari 1% menjadi 0,1% (1000 langkah) jika media lebih dari 120 menit. MediaPlayerElement diberi nama MediaPlayerElement1.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
MediaPlayerElement1.MediaPlayer.MediaOpened += MediaPlayerElement_MediaPlayer_MediaOpened;
base.OnNavigatedTo(e);
}
private void MediaPlayerElement_MediaPlayer_MediaOpened(object sender, RoutedEventArgs e)
{
FrameworkElement transportControlsTemplateRoot = (FrameworkElement)VisualTreeHelper.GetChild(MediaPlayerElement1.TransportControls, 0);
Slider sliderControl = (Slider)transportControlsTemplateRoot.FindName("ProgressSlider");
if (sliderControl != null && MediaPlayerElement1.NaturalDuration.TimeSpan.TotalMinutes > 120)
{
// Default is 1%. Change to 0.1% for more granular seeking.
sliderControl.StepFrequency = 0.1;
}
}
Artikel terkait
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk