Egyéni átviteli vezérlők létrehozása

A MediaPlayerElement testre szabható XAML átviteli vezérlőkkel rendelkezik a hang- és videotartalmak Windows app belüli vezérléséhez. Itt bemutatjuk, hogyan szabhatja testre a MediaTransportControls sablont. Bemutatjuk, hogyan használhatja a túlcsordulás menüt, adhat hozzá egy egyéni gombot, és módosíthatja a csúszkát.

Fontos API-k: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

A kezdés előtt ismernie kell a MediaPlayerElement és a MediaTransportControls osztályokat. További információt a MediaPlayerElement vezérlő útmutatójában talál.

Jótanács

A jelen témakörben szereplő példák a Media Transport Controls minta alapulnak. A minta letölthető a kész kód megtekintéséhez és futtatásához.

Mikor érdemes testre szabni a sablont?

A MediaPlayerElement beépített átviteli vezérlőkkel rendelkezik, amelyek úgy vannak kialakítva, hogy a legtöbb video- és hanglejátszó alkalmazásban módosítás nélkül jól működjenek. Ezeket a MediaTransportControls osztály biztosítja, és olyan gombokat tartalmaz, amelyekkel lejátszhatja, leállíthatja és navigálhatja a médiatartalmakat, beállíthatja a hangerőt, teljes képernyős váltógombokat állíthat be, második eszközre vetíthet, feliratokat engedélyezhet, hangsávokat válthat, és beállíthatja a lejátszási sebességet. A MediaTransportControls olyan tulajdonságokkal rendelkezik, amelyekkel szabályozhatja, hogy az egyes gombok megjelennek-e és engedélyezve vannak-e. Az IsCompact tulajdonságot is beállíthatja annak megadására, hogy a vezérlők egy vagy két sorban jelenjenek-e meg.

Lehetnek azonban olyan helyzetek, amikor a vezérlő megjelenését tovább kell testre szabnia, vagy módosítania kell annak viselkedését. Íme néhány példa:

Módosíthatja az ikonokat, a csúszkákat és a színeket.
Helyezze át a kevésbé gyakran használt parancsgombokat egy túlcsordulási menübe.
Módosítsa a parancsok legördülő sorrendjét a vezérlő átméretezésekor.
Adjon meg egy olyan parancsgombot, amely nem szerepel az alapértelmezett készletben.

Megjegyzés:

A képernyőn látható gombok előre meghatározott sorrendben kiesnek a beépített átviteli vezérlőkből, ha nincs elég hely a képernyőn. Ha módosítani szeretné ezt a sorrendet, vagy olyan parancsokat szeretne elhelyezni, amelyek nem férnek el egy túlcsordulási menüben, testre kell szabnia a vezérlőket.

Az alapértelmezett sablon módosításával testre szabhatja a vezérlő megjelenését. A vezérlő viselkedésének módosításához vagy új parancsok hozzáadásához létrehozhat egy egyéni vezérlőt, amely a MediaTransportControlsból származik.

Jótanács

A testre szabható vezérlősablonok az XAML platform hatékony funkciói, de figyelembe kell venni a következményeket is. Amikor testre szab egy sablont, az az alkalmazás statikus részévé válik, ezért a Microsoft nem kap platformfrissítéseket a sablonhoz. Ha a Microsoft sablonfrissítéseket végez, az új sablont át kell vennie, és újra kell módosítania, hogy kihasználhassa a frissített sablon előnyeit.

Sablonstruktúra

A ControlTemplate az alapértelmezett stílus része. Ezt az alapértelmezett stílust átmásolhatja a projektbe, hogy módosíthassa. A ControlTemplate más XAML-vezérlősablonokhoz hasonló szakaszokra van osztva.

A sablon első szakasza tartalmazza a MediaTransportControls különböző összetevőinek stílusdefinícióit.
A második szakasz a MediaTransportControls által használt különböző vizualizációs állapotokat határozza meg.
A harmadik szakasz tartalmazza a Rácsot , amely a különböző MediaTransportControls-elemeket tartalmazza, és meghatározza az összetevők elrendezését.

Megjegyzés:

A sablonok módosításáról további információt a Vezérlősablonok című témakörben talál. Az IDE-ben egy szövegszerkesztővel vagy hasonló szerkesztővel megnyithatja az XAML-fájlokat a (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(SDK-verzió)\Generic fájlban. Az egyes vezérlők alapértelmezett stílusa és sablonja a generic.xaml fájlban van definiálva. A MediaTransportControls sablont a generic.xaml fájlban a "MediaTransportControls" kifejezésre kattintva találja meg.

A következő szakaszokban megtudhatja, hogyan szabhatja testre az átviteli vezérlők számos fő elemét:

Csúszka: lehetővé teszi a felhasználó számára, hogy végigpásztázza a médiatartalmat, és a folyamat előrehaladását is mutatja
CommandBar: az összes gombot tartalmazza. További információt a MediaTransportControls referenciatéma Anatomy szakaszában talál.

Az átviteli vezérlők testreszabása

Ha csak a MediaTransportControls megjelenését szeretné módosítani, létrehozhat egy másolatot az alapértelmezett vezérlőstílusról és sablonról, és módosíthatja azt. Ha azonban hozzá szeretné adni vagy módosítani szeretné a vezérlő funkcióit, létre kell hoznia egy új osztályt, amely a MediaTransportControlsból származik.

A vezérlő ismételt sablonja

A MediaTransportControls alapértelmezett stílusának és sablonjának testreszabása

Másolja az alapértelmezett stílust a MediaTransportControls stílusaiból és sablonjaiból egy ResourceDictionary-be a projektjébe.
Adjon meg egy x:key értéket a stílus azonosításához, ehhez hasonlóan.

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

Adjon hozzá egy MediaPlayerElement-et a MediaTransportControls használatával a felhasználói felülethez.
Állítsa be a MediaTransportControls elem Stílus tulajdonságát az egyéni stíluserőforrásra az itt látható módon.

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

A stílusok és sablonok módosításáról további információt a Stílusvezérlők és a Vezérlősablonok című témakörben talál.

Származtatott vezérlő létrehozása

Az átviteli vezérlők funkciójának hozzáadásához vagy módosításához létre kell hoznia egy új osztályt, amely a MediaTransportControlsból származik. A CustomMediaTransportControls nevű származtatott osztály megjelenik a Media Transport Controls mintában és a lap további példáiban.

Új osztály létrehozása a MediaTransportControlsból

Adjon hozzá egy új osztályfájlt a projekthez.
- A Visual Studio-ban válassza a Projekt > Osztály hozzáadása lehetőséget. Megnyílik az Új elem hozzáadása párbeszédpanel.
- Az Új elem hozzáadása párbeszédpanelen adja meg az osztályfájl nevét, majd kattintson a Hozzáadás gombra. (A Médiaátviteli vezérlők mintában az osztály neve CustomMediaTransportControls.)
Módosítsa az osztálykódot a MediaTransportControls osztályból való származtatáshoz.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

Másolja a MediaTransportControls alapértelmezett stílusát a projektjébe egy ResourceDictionary. Ezt a stílust és sablont módosítja. (A Médiaátviteli vezérlők mintában létrejön egy "Témák" nevű új mappa, és hozzá lesz adva egy generic.xaml nevű ResourceDictionary-fájl.)
Módosítsa a stílus TargetType elemét az új egyéni vezérlőtípusra. (In the sample, the TargetType is changed to local:CustomMediaTransportControls.) hu-HU: (A mintában a TargetType értéke local:CustomMediaTransportControls-ra változik.)

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

Állítsa be az egyéni osztály DefaultStyleKey elemét. Ez arra utasítja az egyéni osztályt, hogy egy olyan stílust használjon, amelynek TargetType értéke local:CustomMediaTransportControls.

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

Adjon hozzá egy MediaPlayerElement elemet az XAML jelöléshez, és adja hozzá a testreszabott vezérlőelemeket. Fontos megjegyezni, hogy az alapértelmezett gombok elrejtésére, megjelenítésére, letiltására és engedélyezésére használható API-k továbbra is testre szabott sablonokkal működnek.

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

Mostantól módosíthatja a vezérlőstílust és a sablont az egyéni vezérlő megjelenésének és a vezérlőkódnak a viselkedésének frissítéséhez.

A MediaTransportControls parancsgombjait át lehet helyezni egy túlcsordulási menübe, hogy a kevésbé gyakran használt parancsok rejtve legyenek, amíg a felhasználónak szüksége nem lesz rájuk.

A MediaTransportControls sablonban a parancsgombok egy CommandBar elemben találhatók. A parancssáv az elsődleges és a másodlagos parancsok fogalmával rendelkezik. Az elsődleges parancsok azok a gombok, amelyek alapértelmezés szerint megjelennek a vezérlőben, és mindig láthatók (kivéve, ha letiltja a gombot, elrejti a gombot, vagy nincs elég hely). A másodlagos parancsok egy túlfolyómenüben jelennek meg, amely akkor jelenik meg, amikor a felhasználó a hárompontos gombra (...) kattint. További információt az Alkalmazássávok és a parancssávok című cikkben talál.

Ha át szeretne helyezni egy elemet a parancssáv elsődleges parancsaiból a túlcsordulási menübe, szerkesztenie kell az XAML vezérlősablont.

Parancs áthelyezése a túlcsordulás menübe:

A vezérlősablonban keresse meg a CommandBar nevű MediaControlsCommandBarelemet.
Adjon hozzá egy SecondaryCommands szakaszt a parancssáv XAML-éhez. Tegye a PrimaryCommands záró címkéje után.

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

Ha a menüt parancsokkal szeretné feltölteni, vágja ki és illessze be a kívánt AppBarButton-objektumok XAML-ét a PrimaryCommands elemből a SecondaryCommandsbe. Ebben a példában áthelyezzük a PlaybackRateButton túlcsordulás menübe.
Vegyen fel egy címkét a gombra, és távolítsa el a stílusinformációkat az itt látható módon. Mivel a túlcsordulás menü szöveggombokból áll, hozzá kell adnia egy szövegcímkét a gombhoz, és el kell távolítania a gomb magasságát és szélességét meghatározó stílust. Ellenkező esetben nem jelenik meg megfelelően a túlcsordulás menüben.

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

Fontos

A gombot továbbra is láthatóvá kell tennie, és engedélyeznie kell ahhoz, hogy a túlcsordulás menüben használhassa. Ebben a példában a PlaybackRateButton elem csak akkor látható a lenyíló menüben, ha az IsPlaybackRateButtonVisible tulajdonság igaz. Csak akkor lesz engedélyezve, ha az IsPlaybackRateEnabled tulajdonság igaz. Ezeknek a tulajdonságoknak a beállítása az előző szakaszban látható.

Egyéni gomb hozzáadása

A MediaTransportControls testreszabásának egyik oka egy egyéni parancs hozzáadása a vezérlőhöz. Függetlenül attól, hogy elsődleges vagy másodlagos parancsként adja hozzá, a parancsgomb létrehozásának és viselkedésének módosítása ugyanaz. Az elsődleges parancsokhoz hozzáadnak egy "értékelési" gombot a Media Transport Controls minta esetén.

Egyéni parancsgomb hozzáadása

Hozzon létre egy AppBarButton-objektumot, és adja hozzá a vezérlősablon parancssorához.

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

A parancssávhoz a megfelelő helyen kell hozzáadni azt. (További információkért lásd: A túlfolyó menü használata szakasz.) A felhasználói felületen való elhelyezkedését az határozza meg, hogy a gomb hol található a markupban. Ha például azt szeretné, hogy ez a gomb jelenjen meg az elsődleges parancsok utolsó elemeként, adja hozzá az elsődleges parancsok listájának legvégén.

A gomb ikonja testre is szabható. További információ: AppBarButton-referencia .

Az OnApplyTemplate felülbírálásában szerezze meg a gombot a sablonból, és regisztráljon egy kezelőt a Click eseményhez. Ez a kód az CustomMediaTransportControls osztályba kerül.

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

    //...
}

Adjon hozzá kódot a Click eseménykezelőhöz a gomb kattintásakor bekövetkező művelet végrehajtásához. Íme az osztály teljes kódja.

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

A csúszka módosítása

A MediaTransportControls "seek" vezérlőelemét egy Csúszkaelem biztosítja. Ennek egyik módja a keresési viselkedés részletességének módosítása.

Az alapértelmezett keresési csúszka 100 részre van osztva, így a keresési viselkedés csak ennyi szakaszra korlátozódik. A kereső csúszka részletességét úgy módosíthatja, hogy lekérte a Csúszkát a MediaPlayerElement.MediaPlayer MediaPlayerMediaOpened eseménykezelőjében lévő XAML-vizualizációfáról. Ez a példa bemutatja, hogyan használhatja a VisualTreeHelpert a csúszka hivatkozásának lekérésére, majd a csúszka alapértelmezett lépésfrekvencia-gyakoriságát 1% értékről 0,1% (1000 lépés) értékre módosíthatja, ha az adathordozó 120 percnél hosszabb. A MediaPlayerElement neve 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;
  }
}

Médialejátszás

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-10