Vytvoření vlastních ovládacích prvků přenosu

MediaPlayerElement má přizpůsobitelné ovládací prvky přenosu XAML pro správu ovládání zvukového a video obsahu v rámci Windows app. Zde si ukážeme, jak přizpůsobit šablonu MediaTransportControls. Ukážeme vám, jak pracovat s přetékající nabídkou, přidat vlastní tlačítko a upravit posuvník.

Důležitá rozhraní API: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Než začnete, měli byste být obeznámeni s MediaPlayerElement a MediaTransportControls. Další informace najdete v průvodci ovládacími prvky MediaPlayerElement.

Návod

Příklady v tomto tématu jsou založené na ukázce ovládacích prvků Media Transport Controls. Ukázku si můžete stáhnout, abyste zobrazili a spustili hotový kód.

Kdy byste měli šablonu přizpůsobit?

MediaPlayerElement má integrované ovládací prvky přenosu, které jsou navrženy tak, aby dobře fungovaly bez úprav ve většině aplikací pro přehrávání videa a zvuku. Jsou poskytovány třídou MediaTransportControls a zahrnují tlačítka pro přehrávání, zastavení a navigaci multimédií, úpravu hlasitosti, přepnutí na celou obrazovku, přetypování na druhé zařízení, povolení titulků, přepnutí zvukových stop a úpravu rychlosti přehrávání. MediaTransportControls má vlastnosti, které umožňují řídit, zda je každé tlačítko zobrazeno a povoleno. Můžete také nastavit IsCompact vlastnost určit, zda jsou ovládací prvky zobrazeny v jednom řádku nebo dvou.

Mohou však existovat scénáře, kdy potřebujete dále přizpůsobit vzhled ovládacího prvku nebo změnit jeho chování. Tady je několik příkladů:

Změňte ikony, chování posuvníku a barvy.
Přesuňte méně často používaná příkazová tlačítka do rozevírací nabídky.
Změňte pořadí, ve kterém se příkazy při změně velikosti ovládacího prvku vysadí.
Zadejte příkazové tlačítko, které není ve výchozí sadě.

Poznámka:

Tlačítka viditelná na obrazovce zmizí z vestavěných ovládacích prvků dopravy v předem určeném pořadí, pokud na obrazovce není dostatek místa. Pokud chcete toto řazení změnit nebo přemístit příkazy, které se nevejdou do přetékající nabídky, budete muset upravit nastavení ovládacích prvků.

Vzhled ovládacího prvku můžete přizpůsobit úpravou výchozí šablony. Chcete-li změnit chování ovládacího prvku nebo přidat nové příkazy, můžete vytvořit vlastní ovládací prvek odvozený z MediaTransportControls.

Návod

Přizpůsobitelné řídicí šablony představují výkonnou funkci platformy XAML, ale existují i důsledky, které byste měli vzít v úvahu. Když šablonu přizpůsobíte, stane se statickou součástí vaší aplikace, a proto nebude dostávat žádné aktualizace platformy, které do šablony provádí Microsoft. Pokud microsoft provede aktualizace šablon, měli byste novou šablonu vzít a znovu ji upravit, abyste získali výhody aktualizované šablony.

Struktura šablony

ControlTemplate je součástí výchozího stylu. Tento výchozí styl můžete zkopírovat do svého project a upravit ho. ControlTemplate je rozdělený do oddílů podobných ostatním šablonám ovládacích prvků XAML.

První část šablony obsahuje definice stylu pro různé komponenty MediaTransportControls.
Druhá část definuje různé vizuální stavy, které používá MediaTransportControls.
Třetí část obsahuje mřížku, která drží různé prvky MediaTransportControls pohromadě a definuje, jak jsou komponenty rozloženy.

Poznámka:

Další informace o úpravách šablon najdete v tématu Řídicí šablony. Pomocí textového editoru nebo podobných editorů ve vašem IDE můžete otevřít soubory XAML v (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(SDK version)\Generic. Výchozí styl a šablona pro každý ovládací prvek je definována v souboru generic.xaml . Šablonu MediaTransportControls najdete v generic.xaml vyhledáním "MediaTransportControls".

V následujících částech se dozvíte, jak přizpůsobit několik hlavních součástí ovládacích prvků přepravy:

Posuvník: Umožňuje uživateli procházet médium a také zobrazit průběh
CommandBar: obsahuje všechna tlačítka. Další informace najdete v části Anatomy referenčního tématu MediaTransportControls.

Přizpůsobit dopravní ovládací prvky

Pokud chcete změnit pouze vzhled Ovládacích prvků MediaTransportControls, můžete vytvořit kopii výchozího stylu ovládacího prvku a šablony a upravit ji. Nicméně, pokud chcete přidat nebo upravit funkce ovládacího prvku, musíte vytvořit novou třídu, která je odvozena z MediaTransportControls.

Opětovné vytvoření šablony ovládacího prvku

Přizpůsobení výchozího stylu a šablony MediaTransportControls

Zkopírujte výchozí styl ze stylů a šablon MediaTransportControls do ResourceDictionary ve vašem projektu.
Dejte stylu hodnotu x:Klíč k identifikaci, například takto.

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

Do uživatelského rozhraní přidejte MediaPlayerElement s ovládacími prvky MediaTransportControls.
Nastavte vlastnost Style elementu MediaTransportControls na vlastní styl, jak je znázorněno zde.

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

Další informace o úpravě stylů a šablon naleznete v tématech Stylování ovládacích prvků a Šablony ovládacích prvků.

Vytvoření odvozeného ovládacího prvku

Chcete-li přidat nebo upravit funkce ovládacích prvků přenosu, je nutné vytvořit novou třídu odvozenou z MediaTransportControls. Odvozená třída s názvem CustomMediaTransportControls je zobrazena v ukázce Media Transport Controls a zbývající příklady na této stránce.

Vytvoření nové třídy odvozené z MediaTransportControls

Přidejte do project nový soubor třídy.
- V Visual Studio vyberte Project > Přidat třídu. Otevře se dialogové okno Přidat novou položku.
- V dialogovém okně Přidat novou položku zadejte název souboru třídy a klikněte na tlačítko Přidat. (V ukázce Ovládací prvky přenosu médií má třída název CustomMediaTransportControls.)
Upravte kód třídy tak, aby byl odvozen z MediaTransportControls třídy.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

Zkopírujte výchozí styl pro MediaTransportControls do ResourceDictionary v project. Toto je styl a šablona, kterou upravujete. (V ukázce ovládacích prvků přenosu médií se vytvoří nová složka s názvem Motivy a do ní se přidá soubor ResourceDictionary s názvem generic.xaml.)
Změňte typ TargetType stylu na nový typ vlastního ovládacího prvku. (V ukázce se typ TargetType změní na local:CustomMediaTransportControls.)

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

Nastavte DefaultStyleKey vaší vlastní třídy. Vaší vlastní třídě se říká, aby používala styl s TargetType local:CustomMediaTransportControls.

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

Přidejte do kódu XAML mediaPlayerElement a přidejte do něj vlastní ovládací prvky přenosu. Je potřeba poznamenat, že rozhraní API pro skrytí, zobrazení, zakázání a povolení výchozích tlačítek stále fungují s přizpůsobenou šablonou.

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

Teď můžete upravit styl ovládacího prvku a šablonu, abyste aktualizovali vzhled vlastního ovládacího prvku a kód ovládacího prvku tak, aby aktualizoval jeho chování.

Příkazová tlačítka MediaTransportControls můžete přesunout do přetečené nabídky, aby byly méně často používané příkazy skryté, dokud je uživatel nepotřebuje.

V šabloně MediaTransportControls jsou příkazová tlačítka obsažena v elementu CommandBar . Panel příkazů má koncept primárních a sekundárních příkazů. Primární příkazy jsou tlačítka, která se ve výchozím nastavení zobrazují v ovládacím prvku a jsou vždy viditelná (pokud tlačítko nezakážete, tlačítko skryjete nebo není dostatek místa). Sekundární příkazy se zobrazí v rozbalovací nabídce, která se objeví, když uživatel klikne na tlačítko se třemi tečkami (...). Další informace najdete v článku Pruhy aplikací a panely příkazů .

Pokud chcete přesunout prvek z primárních příkazů panelu příkazů do přetékající nabídky, musíte upravit šablonu ovládacího prvku XAML.

Přesunutí příkazu do nabídky přetečení:

V šabloně ovládacího prvku vyhledejte element CommandBar s názvem MediaControlsCommandBar.
Přidejte oddíl SecondaryCommands do XAML pro CommandBar. Umístěte ji za koncovou značku PrimaryCommands.

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

Chcete-li naplnit nabídku příkazy, vyjměte a vložte XAML pro požadované objekty AppBarButton z HlavníchPříkazů do SekundárníchPříkazů. V tomto příkladu přesuneme PlaybackRateButton do nabídky přetečení.
Přidejte k tlačítku popisek a odeberte informace o stylu, jak je znázorněno tady. Protože se nabídka přetečení skládá z textových tlačítek, musíte k tlačítku přidat textový popisek a také odebrat styl, který nastavuje výšku a šířku tlačítka. Jinak se v nabídce přetečení nezobrazí správně.

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

Důležité

Aby bylo možné tlačítko použít ve skryté nabídce, musíte ho i nadále zviditelnit a aktivovat. V tomto příkladu není prvek PlaybackRateButton viditelný v nabídce přetečení, pokud vlastnost IsPlaybackRateButtonVisible není nastavena na true. Není aktivováno, pokud vlastnost IsPlaybackRateEnabled je true. Nastavení těchto vlastností je zobrazeno v předchozí části.

Přidání vlastního tlačítka

Jedním z důvodů, proč byste mohli chtít přizpůsobit Ovládací prvek MediaTransportControls, je přidat do ovládacího prvku vlastní příkaz. Bez ohledu na to, jestli ho přidáte jako primární nebo sekundární příkaz, je postup vytvoření příkazového tlačítka a úprava jeho chování stejný. V ukázce ovládacích prvků Media Transport Controls se do primárních příkazů přidá tlačítko hodnocení.

Přidání vlastního příkazového tlačítka

Vytvořte objekt AppBarButton a přidejte ho do CommandBar v šabloně ovládacího prvku.

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

Musíte ho přidat do příkazového řádku v příslušném umístění. (Další informace najdete v části Práce s rozbalovací nabídkou.) Umístění v uživatelském rozhraní je určeno umístěním tlačítka v kódu. Pokud například chcete, aby se toto tlačítko zobrazoval jako poslední prvek v primárních příkazech, přidejte ho na konec seznamu primárních příkazů.

Ikonu tlačítka můžete také přizpůsobit. Další informace najdete v referenčních informacích k AppBarButtonu .

V přepsání OnApplyTemplate získejte tlačítko ze šablony a zaregistrujte obslužný program pro jeho událost Click. Tento kód jde do CustomMediaTransportControls třídy.

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

    //...
}

Přidejte kód do obslužné rutiny události Click, která provede akci, která nastane po kliknutí na tlačítko. Tady je úplný kód pro třídu.

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

Změna posuvníku

Ovládací prvek "seek" MediaTransportControls je poskytován prvkem Slider. Jedním ze způsobů, jak ho přizpůsobit, je změnit členitost chování hledání.

Výchozí posuvník pro vyhledávání je rozdělen na 100 částí, takže chování vyhledávání je omezeno právě na těchto 100 sekcí. V obslužné rutině události MediaOpened na MediaPlayerElement.MediaPlayer můžete změnit nastavení jemnosti posuvníku hledání tím, že získáte posuvník z vizuálního stromu XAML. Tento příklad ukazuje, jak pomocí nástroje VisualTreeHelper získat odkaz na posuvník a potom změnit výchozí frekvenci kroku posuvníku z 1% na 0,1% (1000 kroků), pokud je médium delší než 120 minut. MediaPlayerElement má název 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;
  }
}

přehrávání médií

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-11-25