Özel aktarım denetimleri oluşturma

MediaPlayerElement, bir Windows app içindeki ses ve video içeriğinin denetimini yönetmek için özelleştirilebilir XAML aktarım denetimlerine sahiptir. Burada MediaTransportControls şablonunun nasıl özelleştirileceği gösterilmektedir. Taşma menüsü üzerinde çalışmayı, özel bir düğme eklemeyi ve kaydırıcıyı değiştirmeyi nasıl yapacağınızı göstereceğiz.

Önemli API'ler: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Başlamadan önce MediaPlayerElement ve MediaTransportControls sınıfları hakkında bilgi sahibi olmanız gerekir. Daha fazla bilgi için MediaPlayerElement denetim kılavuzuna bakın.

İpucu

Bu konudaki örnekler Media Aktarım Denetimleri örneğini temel alır. Tamamlanan kodu görüntülemek ve çalıştırmak için örneği indirebilirsiniz.

Şablonu ne zaman özelleştirmeniz gerekir?

MediaPlayerElement , çoğu video ve ses kayıttan yürütme uygulamasında değişiklik yapmadan iyi çalışacak şekilde tasarlanmış yerleşik aktarım denetimlerine sahiptir. MediaTransportControls sınıfı tarafından sağlanır ve medyada oynatmak, durdurmak ve gezinmek, ses düzeyini ayarlamak, tam ekranda geçiş yapmak, ikinci bir cihaza aktarmak, resim yazılarını etkinleştirmek, ses parçalarını değiştirmek ve kayıttan yürütme hızını ayarlamak için düğmeler içerir. MediaTransportControls, her düğmenin gösterilip gösterilmediğini ve etkinleştirilip etkinleştirilmediğini denetlemenize olanak sağlayan özelliklere sahiptir. Denetimlerin bir satırda mı yoksa iki satırda mı gösterileceğini belirtmek için IsCompact özelliğini de ayarlayabilirsiniz.

Ancak, denetimin görünümünü daha fazla özelleştirmeniz veya davranışını değiştirmeniz gereken senaryolar olabilir. Aşağıda bazı örnekler verilmiştir:

Simgeleri, kaydırıcı davranışını ve renkleri değiştirin.
Daha az kullanılan komut düğmelerini, taşma menüsüne taşıyın.
Denetim yeniden boyutlandırıldığında komutların çıktığı sırayı değiştirin.
Varsayılan kümede olmayan bir komut düğmesi sağlayın.

Uyarı

Ekranda görünen düğmeler, ekranda yeterli yer yoksa önceden tanımlanmış bir sırada yerleşik taşıma kontrollerinden çıkarılır. Bu sıralamayı değiştirmek veya taşma menüsüne sığmayan komutları koymak için denetimleri özelleştirmeniz gerekir.

Varsayılan şablonu değiştirerek denetimin görünümünü özelleştirebilirsiniz. Denetimin davranışını değiştirmek veya yeni komutlar eklemek için MediaTransportControls'ten türetilen özel bir denetim oluşturabilirsiniz.

İpucu

Özelleştirilebilir denetim şablonları XAML platformunun güçlü bir özelliğidir, ancak dikkate almanız gereken sonuçlar da vardır. Bir şablonu özelleştirdiğinizde, bu şablon uygulamanızın statik bir parçası haline gelir ve bu nedenle Microsoft tarafından şablonda yapılan platform güncelleştirmelerini almaz. Şablon güncelleştirmeleri Microsoft tarafından yapılıyorsa, güncelleştirilmiş şablonun avantajlarından yararlanmak için yeni şablonu alıp yeniden değiştirmeniz gerekir.

Şablon yapısı

ControlTemplate varsayılan stilin bir parçasıdır. Varsayılan bu stili değiştirmek amacıyla projenize kopyalayabilirsiniz. ControlTemplate, diğer XAML denetim şablonlarına benzer bölümlere ayrılır.

Şablonun ilk bölümü, MediaTransportControls'ün çeşitli bileşenleri için Stil tanımlarını içerir.
İkinci bölüm, MediaTransportControls tarafından kullanılan çeşitli görsel durumları tanımlar.
Üçüncü bölüm, çeşitli MediaTransportControls öğelerini bir arada tutan ve bileşenlerin nasıl yerleştirildiğini tanımlayan Kılavuz'u içerir.

Uyarı

Şablonları değiştirme hakkında daha fazla bilgi için bkz. Denetim şablonları. XAML dosyalarını (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(SDK version)\Generic içinde açmak için IDE'nizde bir metin düzenleyicisi veya benzer düzenleyiciler kullanabilirsiniz. Her denetim için varsayılan stil ve şablon generic.xaml dosyasında tanımlanır. "MediaTransportControls" araması yaparak MediaTransportControls şablonunu generic.xaml dosyasında bulabilirsiniz.

Aşağıdaki bölümlerde, aktarım denetimlerinin birkaç ana öğesini özelleştirmeyi öğreneceksiniz:

Kaydırıcı: Kullanıcının medyasını ileri geri sarmasına izin verir ve ayrıca ilerleme durumunu gösterir
CommandBar: Tüm düğmeleri içerir. Daha fazla bilgi için MediaTransportControls başvuru konusunun Anatomi bölümüne bakın.

Aktarım denetimlerini özelleştirme

Yalnızca MediaTransportControls görünümünü değiştirmek istiyorsanız, varsayılan denetim stilinin ve şablonunun bir kopyasını oluşturabilir ve bunu değiştirebilirsiniz. Ancak, denetimin işlevselliğini de eklemek veya değiştirmek istiyorsanız, MediaTransportControls'ten türetilen yeni bir sınıf oluşturmanız gerekir.

Denetimi yeniden şablonla

MediaTransportControls varsayılan stilini ve şablonunu özelleştirmek için

MediaTransportControls stilleri ve şablonlarından varsayılan stili projenizdeki bir ResourceDictionary'ye kopyalayın.
Stili tanımlamak için stile bir x:Key değeri verin, örneğin:

<Style TargetType="MediaTransportControls" x:Key="myTransportControlsStyle">
    <!-- Style content ... -->
</Style>

Kullanıcı arabiriminize MediaTransportControls ile bir MediaPlayerElement ekleyin.
MediaTransportControls öğesinin Style özelliğini burada gösterildiği gibi özel Style kaynağınız olarak ayarlayın.

<MediaPlayerElement AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls Style="{StaticResource myTransportControlsStyle}"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Stilleri ve şablonları değiştirme hakkında daha fazla bilgi için bkz. Stil oluşturma denetimleri ve Denetim şablonları.

Türetilmiş bir denetim oluşturun

Aktarım denetimlerine eklemek veya işlevlerini değiştirmek için MediaTransportControls'ten türetilen yeni bir sınıf oluşturmanız gerekir. CustomMediaTransportControls adlı türetilmiş bir sınıf, Media Aktarım Denetimleri örneğinde ve bu sayfadaki diğer örneklerde gösterilir.

MediaTransportControls'ten türetilen yeni bir sınıf oluşturmak için

Projenize yeni bir sınıf dosyası ekleyin.
- Visual Studio Project > Sınıf Ekle'yi seçin. Yeni Öğe Ekle iletişim kutusu açılır.
- Yeni Öğe Ekle iletişim kutusunda, sınıf dosyası için bir ad girin ve Ekle'ye tıklayın. (Medya Aktarım Denetimleri örneğinde sınıfı olarak adlandırılır CustomMediaTransportControls.)
MediaTransportControls sınıfından türetmek için sınıf kodunu değiştirin.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

MediaTransportControls için varsayılan stili projenizdeki bir ResourceDictionary içine kopyalayın. Bu, değiştirdiğiniz stil ve şablondur. (Medya Aktarım Denetimleri örneğinde "Temalar" adlı yeni bir klasör oluşturulur ve generic.xaml adlı bir ResourceDictionary dosyası eklenir.)
Stilin TargetType'ını yeni özel denetim türüyle değiştirin. (Örnekte TargetType, local:CustomMediaTransportControls olarak değiştirilir.)

xmlns:local="using:CustomMediaTransportControls">
...
<Style TargetType="local:CustomMediaTransportControls">

Özel sınıfınızın DefaultStyleKey değerini ayarlayın. Bu, özel sınıfınıza TargetType local:CustomMediaTransportControlsdeğeriyle bir Stil kullanmasını söyler.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }
}

XAML işaretlemenize bir MediaPlayerElement ekleyin ve özel aktarım denetimlerini ekleyin. Varsayılan düğmeleri gizleme, gösterme, devre dışı bırakma ve etkinleştirme API'lerinin özelleştirilmiş bir şablonla çalışmaya devam ettiğini unutmayın.

<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>

Artık özel denetiminizin görünümünü güncelleştirmek için denetim stilini ve şablonunu, davranışını güncelleştirmek için de denetim kodunu değiştirebilirsiniz.

MediaTransportControls komut düğmelerini taşma menüsüne taşıyabilirsiniz, böylece kullanıcı ihtiyaç duyana kadar daha az yaygın kullanılan komutlar gizlenir.

MediaTransportControls şablonunda, komut düğmeleri bir CommandBar öğesinde yer alır. Komut çubuğunda birincil ve ikincil komutlar kavramı vardır. Birincil komutlar, denetimde varsayılan olarak görünen ve her zaman görünür olan düğmelerdir (düğmeyi devre dışı bırakmadığınız, düğmeyi gizlemediğiniz veya yeterli yer olmadığı sürece). Kullanıcı üç nokta (...) düğmesine tıkladığında görüntülenen taşma menüsünde ikincil komutlar gösterilir. Daha fazla bilgi için Uygulama çubukları ve komut çubukları makalesine bakın.

Bir öğeyi komut çubuğu birincil komutlarından taşma menüsüne taşımak için XAML denetim şablonunu düzenlemeniz gerekir.

Bir komutu taşma menüsüne taşımak için:

Denetim şablonunda adlı MediaControlsCommandBarCommandBar öğesini bulun.
CommandBar için XAML'ye bir SecondaryCommands bölümü ekleyin. Bunu PrimaryCommands için kapanış etiketinden sonra yerleştirin.

<CommandBar x:Name="MediaControlsCommandBar" ... >  
  <CommandBar.PrimaryCommands>
...
    <AppBarButton x:Name='PlaybackRateButton'
                    Style='{StaticResource AppBarButtonStyle}'
                    MediaTransportControlsHelper.DropoutOrder='4'
                    Visibility='Collapsed'>
      <AppBarButton.Icon>
        <FontIcon Glyph="&#xEC57;"/>
      </AppBarButton.Icon>
    </AppBarButton>
...
  </CommandBar.PrimaryCommands>
<!-- Add secondary commands (overflow menu) here -->
  <CommandBar.SecondaryCommands>
    ...
  </CommandBar.SecondaryCommands>
</CommandBar>

Menüyü komutlarla doldurmak için, primarycommands içindeki istenen AppBarButton nesnelerinin XAML'sini kesip SecondaryCommands'a yapıştırın. Bu örnekte, PlaybackRateButton öğesini taşma menüsüne taşıyoruz.
Düğmeye bir etiket ekleyin ve burada gösterildiği gibi stil bilgilerini kaldırın. Taşma menüsü metin butonlarından oluştuğu için, butona bir metin etiketi eklemeniz ve aynı zamanda butonun yüksekliğini ve genişliğini ayarlayan stili kaldırmanız gerekmektedir. Aksi takdirde, açılır menüde düzgün görünmez.

<CommandBar.SecondaryCommands>
    <AppBarButton x:Name='PlaybackRateButton'
                  Label='Playback Rate'>
    </AppBarButton>
</CommandBar.SecondaryCommands>

Önemli

Düğmeyi taşma menüsünde kullanabilmek için görünür hale getirip etkinleştirmeniz gerekir. Bu örnekte, IsPlaybackRateButtonVisible özelliği true olmadığı sürece PlaybackRateButton öğesi taşma menüsünde görünmez. IsPlaybackRateEnabled özelliği true olmadığı sürece etkinleştirilmez. Bu özelliklerin ayarlanması önceki bölümde gösterilmiştir.

Özel düğme ekleme

MediaTransportControls'i özelleştirmek istemenin bir nedeni, denetime özel bir komut eklemektir. İster birincil komut ister ikincil komut olarak ekleyin, komut düğmesini oluşturma ve davranışını değiştirme yordamı aynıdır. Media Aktarım Denetimleri örneğinde birincil komutlara bir "derecelendirme" düğmesi eklenir.

Özel komut düğmesi eklemek için

Bir AppBarButton nesnesi oluşturun ve bunu denetim şablonundaki CommandBar'a ekleyin.

<AppBarButton x:Name="LikeButton"
              Icon="Like"
              Style="{StaticResource AppBarButtonStyle}"
              MediaTransportControlsHelper.DropoutOrder="3"
              VerticalAlignment="Center" />

Uygun konumdaki CommandBar'a eklemeniz gerekir. (Daha fazla bilgi için Taşma menüsü ile çalışma bölümüne bakınız.) Kullanıcı arabiriminde konumlandırılması, düğmenin işaretlemede bulunduğu yere göre belirlenir. Örneğin, bu düğmenin birincil komutlarda son öğe olarak görünmesini istiyorsanız, birincil komutlar listesinin en sonuna ekleyin.

Düğmenin simgesini de özelleştirebilirsiniz. Daha fazla bilgi için AppBarButton dökümanına bakın.

OnApplyTemplate geçersiz kılma yönteminde, düğmeyi şablondan alın ve Click olayı için bir işleyici kaydedin. Bu kod sınıfına CustomMediaTransportControls gider.

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();
    }

    //...
}

Düğmeye tıklandığında gerçekleşen eylemi gerçekleştirmek için Click olay işleyicisine kod ekleyin. Sınıfın tam kodu aşağıdadır.

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);
        }
    }
}

Kaydırıcıyı değiştirme

MediaTransportControls 'un "arama" denetimi bir Slider öğesi tarafından sağlanır. Bunu özelleştirmenin bir yolu, arama davranışının ayrıntı düzeyini değiştirmektir.

Varsayılan arama kaydırıcısı 100 bölüme bölünür, bu nedenle arama davranışı bu kadar çok bölümle sınırlıdır. MediaOpened olay işleyicinizde MediaPlayerElement.MediaPlayer üzerindeki XAML görsel ağacından Kaydırıcıyı alarak arama kaydırıcısının kademeliliğini değiştirebilirsiniz. Bu örnek, VisualTreeHelper kullanılarak Kaydırıcıya bir referans almayı ve ardından, medya 120 dakikadan uzunsa kaydırıcının varsayılan adım frekansını %1'den %0,1'e (1000 adım) değiştirme işlemini göstermektedir. MediaPlayerElement olarak adlandırılır 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;
  }
}

Medya oynatma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-03-05