사용자 지정 전송 컨트롤 만들기Create custom transport controls

MediaPlayerElement에는 Windows 앱 내에서 오디오와 비디오 콘텐츠의 컨트롤을 관리하기 위해 사용자 지정 가능한 XAML 전송 컨트롤이 있습니다.MediaPlayerElement has customizable XAML transport controls to manage control of audio and video content within a Windows app. 여기에서 MediaTransportControls 템플릿을 사용자 지정하는 방법을 설명합니다.Here, we demonstrate how to customize the MediaTransportControls template. 오버플로 메뉴에 대한 작업을 수행하고 사용자 지정 단추를 추가하며 슬라이더를 수정하는 방법을 살펴보겠습니다.We’ll show you how to work with the overflow menu, add a custom button and modify the slider.

중요 API : MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControlsImportant APIs : MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

시작하기 전에 MediaPlayerElement 및 MediaTransportControls 클래스에 익숙해야 합니다.Before starting, you should be familiar with the MediaPlayerElement and the MediaTransportControls classes. 자세한 내용은 MediaPlayerElement 컨트롤 가이드를 참조하세요.For more info, see the MediaPlayerElement control guide.

이 항목의 예제는 미디어 전송 컨트롤 샘플에 기반을 두고 있습니다.The examples in this topic are based on the Media Transport Controls sample. 샘플을 다운로드하여 전체 코드를 보고 실행할 수 있습니다.You can download the sample to view and run the completed code.

참고

MediaPlayerElement 는 Windows 10, 버전 1607 이상에서만 사용 가능합니다.MediaPlayerElement is only available in Windows 10, version 1607 and up. 이전 버전의 Windows 10 앱을 개발하는 경우 MediaElement를 대신 사용해야 합니다.If you are developing an app for an earlier version of Windows 10 you will need to use MediaElement instead. 이 페이지의 모든 예제는 MediaElement 에서도 작동합니다.All of the examples on this page work with MediaElement as well.

템플릿을 사용자 지정해야 하는 경우When should you customize the template?

MediaPlayerElement 는 수정하지 않고도 대부분의 비디오 및 오디오 재생 앱에서 우수하게 작동하도록 설계된 기본 제공 전송 컨트롤이 있습니다.MediaPlayerElement has built-in transport controls that are designed to work well without modification in most video and audio playback apps. 이 컨트롤은 MediaTransportControls 클래스에서 제공하며 미디어 재생, 중지, 탐색 단추를 비롯하여, 볼륨 조정, 전체 화면으로 전환, 두 번째 디바이스로 캐스팅, 자막 사용, 오디오 트랙 전환 및 재생 속도 조정을 처리하는 단추를 포함합니다.They’re provided by the MediaTransportControls class and include buttons to play, stop, and navigate media, adjust volume, toggle full screen, cast to a second device, enable captions, switch audio tracks, and adjust the playback rate. MediaTransportControls에는 각 단추의 표시 여부와 사용 설정 여부를 제어할 수 있는 속성이 있습니다.MediaTransportControls has properties that let you control whether each button is shown and enabled. 또한 IsCompact 속성을 설정하여 컨트롤을 한 행에 표시할지 아니면 두 행에 표시할지 여부를 지정할 수 있습니다.You can also set the IsCompact property to specify whether the controls are shown in one row or two.

그러나 추가로 컨트롤의 모양을 사용자 지정하거나 컨트롤 동작을 변경해야 하는 시나리오가 있을 수 있습니다.However, there may be scenarios where you need to further customize the look of the control or change its behavior. 예를 들면 다음과 같습니다.Here are some examples:

  • 아이콘, 슬라이더 동작 및 색을 변경합니다.Change the icons, slider behavior, and colors.
  • 자주 사용하지 않는 명령 단추를 오버플로 메뉴로 이동합니다.Move less commonly used command buttons into an overflow menu.
  • 컨트롤 크기를 조정할 때 명령이 드롭아웃되는 순서를 변경합니다.Change the order in which commands drop out when the control is resized.
  • 기본 집합에 없는 명령 단추를 제공합니다.Provide a command button that’s not in the default set.

참고

화면에 표시된 단추는 화면에 충분한 공간이 없는 경우 미리 정의된 순서로 기본 제공 전송 컨트롤에서 삭제됩니다.The buttons visible on screen will drop out of the built-in transport controls in a predefined order if there is not enough room on screen. 이 순서를 변경하거나 오버플로 메뉴에 맞지 않은 명령을 배치하려면 컨트롤을 사용자 지정해야 합니다.To change this ordering or put commands that don't fit into an overflow menu, you will need to customize the controls.

기본 서식 파일을 수정하여 컨트롤의 모양을 사용자 지정할 수 있습니다.You can customize the appearance of the control by modifying the default template. 컨트롤의 동작을 수정하거나 새 명령을 추가하려면 MediaTransportControls에서 파생된 사용자 지정 컨트롤을 만들면 됩니다.To modify the control's behavior or add new commands, you can create a custom control that's derived from MediaTransportControls.

사용자 지정 가능한 컨트롤 템플릿은 XAML 플랫폼의 강력한 기능이지만 이 기능의 사용에 따른 결과를 고려해야 합니다.Customizable control templates are a powerful feature of the XAML platform, but there are also consequences that you should take into consideration. 템플릿을 사용자 지정하면 앱의 정적 부분이 되므로 Microsoft에서 배포하는 템플릿의 플랫폼 업데이트를 받지 못합니다.When you customize a template, it becomes a static part of your app and therefore will not receive any platform updates that are made to the template by Microsoft. Microsoft에서 템플릿을 업데이트한 경우 새 템플릿을 받아 다시 수정해야 업데이트된 템플릿의 이점을 얻을 수 있습니다.If template updates are made by Microsoft, you should take the new template and re-modify it in order to get the benefits of the updated template.

템플릿 구조Template structure

ControlTemplate은 기본 스타일의 일부입니다.The ControlTemplate is part of the default style. 이 기본 스타일을 프로젝트에 복사하여 수정할 수 있습니다.You can copy this default style into your project to modify it. ControlTemplate은 다른 XAML 컨트롤 템플릿과 비슷하게 여러 섹션으로 구분됩니다.The ControlTemplate is divided into sections similar to other XAML control templates.

  • 템플릿의 첫 번째 섹션에는 Style의 여러 구성 요소에 대한 MediaTransportControls 정의가 포함되어 있습니다.The first section of the template contains the Style definitions for the various components of the MediaTransportControls.
  • 두 번째 섹션에서는 MediaTransportControls에서 사용하는 다양한 시각적 상태를 정의합니다.The second section defines the various visual states that are used by the MediaTransportControls.
  • 세 번째 섹션에는 다양한 MediaTransportControls 요소를 포함하고 구성 요소가 배치되는 방식을 정의하는 Grid가 있습니다.The third section contains the Grid that holds that various MediaTransportControls elements together and defines how the components are laid out.

참고

템플릿을 수정하는 방법은 컨트롤 템플릿을 참조하세요.For more info about modifying templates, see Control templates. 텍스트 편집기 또는 IDE의 유사한 편집기를 사용하여 (Program Files )\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\( SDK version )\Generic에 있는 XAML 파일을 열 수 있습니다.You can use a text editor or similar editors in your IDE to open the XAML files in (Program Files )\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\( SDK version )\Generic. 각 컨트롤의 기본 스타일과 템플릿은 generic.xaml 파일에 정의되어 있습니다.The default style and template for each control is defined in the generic.xaml file. "MediaTransportControls"를 검색하여 generic.xaml에서 MediaTransportControls 템플릿을 찾을 수 있습니다.You can find the MediaTransportControls template in generic.xaml by searching for "MediaTransportControls".

다음 섹션에서는 전송 컨트롤의 기본 요소 중 몇 가지를 사용자 지정하는 방법에 대해 알아봅니다.In the following sections, you learn how to customize several of the main elements of the transport controls:

  • Slider: 사용자는 이 요소를 통해 미디어를 삭제할 수 있으며, 이 요소는 진행률도 표시합니다.Slider: allows a user to scrub through their media and also displays progress
  • CommandBar: 모든 단추를 포함합니다.CommandBar: contains all of the buttons. 자세한 내용은 MediaTransportControls 참조 항목의 구조 섹션을 참조하세요.For more info, see the Anatomy section of the MediaTransportControls reference topic.

전송 컨트롤 사용자 지정Customize the transport controls

MediaTransportControls의 모양만 수정하려는 경우 기본 컨트롤 스타일과 템플릿의 복사본을 작성하여 수정하면 됩니다.If you want to modify only the appearance of the MediaTransportControls, you can create a copy of the default control style and template, and modify that. 그러나 컨트롤 기능에 추가하거나 해당 기능을 수정하려는 경우 MediaTransportControls에서 파생되는 새 클래스를 만들어야 합니다.However, if you also want to add to or modify the functionality of the control, you need to create a new class that derives from MediaTransportControls.

컨트롤 다시 템플릿Re-template the control

MediaTransportControls 기본 스타일 및 템플릿을 사용자 지정하려면To customize the MediaTransportControls default style and template

  1. MediaTransportControls 스타일 및 템플릿의 기본 스타일을 프로젝트의 ResourceDictionary로 복사합니다.Copy the default style from MediaTransportControls styles and templates into a ResourceDictionary in your project.
  2. Style에 x:Key 값을 지정하여 다음과 같이 식별합니다.Give the Style an x:Key value to identify it, like this.
<Style TargetType="MediaTransportControls" x:Key="myTransportControlsStyle">
    <!-- Style content ... -->
</Style>
  1. MediaTransportControls와 함께 MediaPlayerElement를 UI에 추가합니다.Add a MediaPlayerElement with MediaTransportControls to your UI.
  2. 여기에 나와 있는 것처럼 MediaTransportControls 요소의 Style 속성을 사용자 지정 Style 리소스로 설정합니다.Set the Style property of the MediaTransportControls element to your custom Style resource, as shown here.
<MediaPlayerElement AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls Style="{StaticResource myTransportControlsStyle}"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

스타일 및 템플릿 수정에 대한 자세한 내용은 스타일링 컨트롤컨트롤 템플릿을 참조하세요.For more info about modifying styles and templates, see Styling controls and Control templates.

파생된 컨트롤 만들기Create a derived control

전송 컨트롤의 기능을 추가하거나 수정하려면 MediaTransportControls에서 파생된 새 클래스를 만들어야 합니다.To add to or modify the functionality of the transport controls, you must create a new class that's derived from MediaTransportControls. CustomMediaTransportControls라는 파생 클래스가 미디어 전송 컨트롤 샘플 및 이 페이지의 나머지 예제에 나와 있습니다.A derived class called CustomMediaTransportControls is shown in the Media Transport Controls sample and the remaining examples on this page.

MediaTransportControls에서 파생된 새 클래스를 만들려면To create a new class derived from MediaTransportControls

  1. 새 클래스 파일을 프로젝트에 추가합니다.Add a new class file to your project.
    • Visual Studio에서 프로젝트 > 클래스 추가를 선택합니다.In Visual Studio, select Project > Add Class. 새 항목 추가 대화 상자가 열립니다.The Add New Item dialog opens.
    • 새 항목 추가 대화 상자에서 클래스 파일의 이름을 입력한 다음 추가를 클릭합니다.In the Add New Item dialog, enter a name for the class file, then click Add. 미디어 전송 컨트롤 샘플에서 클래스 이름은 CustomMediaTransportControls입니다.(In the Media Transport Controls sample, the class is named CustomMediaTransportControls.)
  2. MediaTransportControls 클래스에서 파생되도록 클래스 코드를 수정합니다.Modify the class code to derive from the MediaTransportControls class.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
}
  1. MediaTransportControls의 기본 스타일을 프로젝트의 ResourceDictionary로 복사합니다.Copy the default style for MediaTransportControls into a ResourceDictionary in your project. 이는 수정하는 스타일 및 템플릿입니다.This is the style and template you modify. (미디어 전송 컨트롤 샘플에서 "Themes"라는 새 폴더가 생성되고 generic.xaml이라는 ResourceDictionary 파일이 추가됩니다.(In the Media Transport Controls sample, a new folder called "Themes" is created, and a ResourceDictionary file called generic.xaml is added to it.)
  2. 스타일의 TargetType을 새 사용자 지정 컨트롤 유형으로 변경합니다.Change the TargetType of the style to the new custom control type. (샘플에서 TargetType이 local:CustomMediaTransportControls로 변경됩니다.)(In the sample, the TargetType is changed to local:CustomMediaTransportControls.)
xmlns:local="using:CustomMediaTransportControls">
...
<Style TargetType="local:CustomMediaTransportControls">
  1. 사용자 지정 클래스의 DefaultStyleKey를 설정합니다.Set the DefaultStyleKey of your custom class. 이렇게 하면 사용자 지정 클래스가 local:CustomMediaTransportControls의 TargetType과 함께 Style을 사용합니다.This tells your custom class to use a Style with a TargetType of local:CustomMediaTransportControls.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }
}
  1. MediaPlayerElement를 XAML 태그에 추가하고 사용자 지정 전송 컨트롤을 여기에 추가합니다.Add a MediaPlayerElement to your XAML markup and add the custom transport controls to it. 한 가지 주의할 점은 기본 단추를 숨기고 표시하고, 사용하지 않도록 설정하고, 사용하도록 설정하는 API는 사용자 지정된 템플릿에서 여전히 작동한다는 것입니다.One thing to note is that the APIs to hide, show, disable, and enable the default buttons still work with a customized template.
<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>

이제 컨트롤 스타일 및 템플릿을 수정하여 사용자 지정 컨트롤의 모양을 업데이트하고 제어 코드를 수정하여 해당 동작을 업데이트할 수 있습니다.You can now modify the control style and template to update the look of your custom control, and the control code to update its behavior.

오버플로 메뉴에 대한 작업Working with the overflow menu

MediaTransportControls 명령 단추를 오버플로 메뉴로 이동하면 사용자가 필요로 할 때까지 자주 사용하지 않는 명령이 숨겨집니다.You can move MediaTransportControls command buttons into an overflow menu, so that less commonly used commands are hidden until the user needs them.

MediaTransportControls 템플릿에서 명령 단추는 CommandBar 요소에 포함되어 있습니다.In the MediaTransportControls template, the command buttons are contained in a CommandBar element. 명령 모음에는 기본 및 보조 명령의 개념이 있습니다.The command bar has the concept of primary and secondary commands. 기본 명령은 컨트롤에 기본적으로 표시되는 단추이며 항상 표시됩니다(단추를 비활성화하거나 숨기지 않은 경우 또는 충분한 공간이 있는 경우).The primary commands are the buttons that appear in the control by default and are always visible (unless you disable the button, hide the button or there is not enough room). 보조 명령은 사용자가 줄임표(...) 단추를 클릭할 때 나타나는 오버플로 메뉴에 표시됩니다.The secondary commands are shown in an overflow menu that appears when a user clicks the ellipsis (…) button. 자세한 내용은 앱 바 및 명령 모음 문서를 참조하세요.For more info, see the App bars and command bars article.

명령 모음 기본 명령의 요소를 오버플로 메뉴로 이동하려면 XAML 컨트롤 템플릿을 편집해야 합니다.To move an element from the command bar primary commands to the overflow menu, you need to edit the XAML control template.

오버플로 메뉴로 명령을 이동하려면 다음을 수행합니다.To move a command to the overflow menu:

  1. 컨트롤 템플릿에서 MediaControlsCommandBar라는 CommandBar 요소를 찾습니다.In the control template, find the CommandBar element named MediaControlsCommandBar.
  2. SecondaryCommands 섹션을 CommandBar에 대한 XAML에 추가합니다.Add a SecondaryCommands section to the XAML for the CommandBar. 이 섹션을 PrimaryCommands의 닫는 태그 뒤에 넣습니다.Put it after the closing tag for the 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>
  1. 명령으로 이 메뉴를 채우려면 원하는 AppBarButton 개체에 대한 XAML을 PrimaryCommands에서 잘라내어 SecondaryCommands에 붙여넣습니다.To populate the menu with commands, cut and paste the XAML for the desired AppBarButton objects from the PrimaryCommands to the SecondaryCommands. 이 예제에서 PlaybackRateButton를 오버플로 메뉴로 이동합니다.In this example, we move the PlaybackRateButton to the overflow menu.

  2. 다음과 같이 단추에 레이블을 추가하고 스타일 지정 정보를 제거합니다.Add a label to the button and remove the styling information, as shown here. 오버플로 메뉴는 텍스트 단추로 구성되어 있기 때문에 단추에 텍스트 레이블을 추가하고 단추의 너비와 높이를 설정하는 스타일도 제거해야 합니다.Because the overflow menu is comprised of text buttons, you must add a text label to the button and also remove the style that sets the height and width of the button. 그러지 않으면 단추가 오버플로 메뉴에 제대로 나타나지 않습니다.Otherwise, it won't appear correctly in the overflow menu.

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

중요

여전히 단추를 보이게 하고 오버플로 메뉴에서 사용할 수 있도록 설정해야 합니다.You must still make the button visible and enable it in order to use it in the overflow menu. 이 예제에서 IsPlaybackRateButtonVisible 속성이 true가 아니면 PlaybackRateButton 요소가 오버플로 메뉴에서 보이지 않습니다.In this example, the PlaybackRateButton element isn't visible in the overflow menu unless the IsPlaybackRateButtonVisible property is true. IsPlaybackRateEnabled 속성이 true가 아니면 사용되지 않습니다.It's not enabled unless the IsPlaybackRateEnabled property is true. 이러한 속성 설정은 이전 섹션에 나와 있습니다.Setting these properties is shown in the previous section.

사용자 지정 단추 추가Adding a custom button

MediaTransportControls를 사용자 지정하려고 할 수 있는 한 가지 이유는 사용자 지정 명령을 컨트롤에 추가할 수 있기 때문입니다.One reason you might want to customize MediaTransportControls is to add a custom command to the control. 기본 명령으로 추가하든 아니면 보조 명령으로 추가하든 명령 단추를 만들고 해당 동작을 수정하기 위한 절차는 동일합니다.Whether you add it as a primary command or a secondary command, the procedure for creating the command button and modifying its behavior is the same. 미디어 전송 컨트롤 샘플에서 "등급" 단추가 기본 명령에 추가됩니다.In the Media Transport Controls sample, a "rating" button is added to the primary commands.

사용자 지정 명령 단추를 추가하려면To add a custom command button

  1. AppBarButton 개체를 만들고 컨트롤 템플릿의 CommandBar에 추가합니다.Create an AppBarButton object and add it to the CommandBar in the control template.
<AppBarButton x:Name="LikeButton"
              Icon="Like"
              Style="{StaticResource AppBarButtonStyle}"
              MediaTransportControlsHelper.DropoutOrder="3"
              VerticalAlignment="Center" />

적절한 위치의 명령 모음에 추가해야 합니다.You must add it to the CommandBar in the appropriate location. (자세한 내용은 오버플로 메뉴에 대한 작업 섹션을 참조하세요.) UI에 배치하는 방식은 태그 속의 단추 위치에 따라 결정됩니다.(For more information, see the Working with the overflow menu section.) How it's positioned in the UI is determined by where the button is in the markup. 예를 들어 이 단추를 기본 명령의 마지막 요소로 표시하려면 이 단추를 기본 명령 목록의 맨 끝에 추가합니다.For example, if you want this button to appear as the last element in the primary commands, add it at the very end of the primary commands list.

단추 아이콘을 사용자 지정할 수도 있습니다.You can also customize the icon for the button. 자세한 내용은 AppBarButton 참조에서 확인할 수 있습니다.For more information, see the AppBarButton reference.

  1. OnApplyTemplate 재정의에서, 템플릿의 단추를 가져와서 해당 Click 이벤트에 대한 처리기를 등록합니다.In the OnApplyTemplate override, get the button from the template and register a handler for its Click event. 이 코드는 CustomMediaTransportControls 클래스에 포함됩니다.This code goes in the CustomMediaTransportControls class.
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();
    }

    //...
}
  1. Click 이벤트 처리기에 단추를 클릭할 때 발생하는 작업을 수행하는 코드를 추가합니다.Add code to the Click event handler to perform the action that occurs when the button is clicked. 다음은 해당 클래스의 전체 코드입니다.Here's the complete code for the class.
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);
        }
    }
}

"좋아요" 단추가 추가된 사용자 지정 미디어 전송 컨트롤 추가 좋아요 단추가 있는 사용자 지정 미디어 전송 컨트롤Custom media transport controls with a "Like" button added Custom media transport control with additional like button

슬라이더 수정Modifying the slider

MediaTransportControls의 "검색" 컨트롤은 Slider 요소에서 제공됩니다.The "seek" control of the MediaTransportControls is provided by a Slider element. 이 컨트롤을 사용자 지정할 수 있는 한 가지 방법은 검색 동작의 세분성을 변경하는 것입니다.One way you can customize it is to change the granularity of the seek behavior.

기본 검색 슬라이더는 100개의 부분으로 나뉘어져 있으므로 검색 동작은 이 수만큼의 섹션으로 제한됩니다.The default seek slider is divided into 100 parts, so the seek behavior is limited to that many sections. MediaPlayerElement.MediaPlayerMediaOpened 이벤트 처리기에 있는 XAML 시각적 트리에서 Slider를 가져와서 검색 슬라이더의 세분성을 변경할 수 있습니다.You can change the granularity of the seek slider by getting the Slider from the XAML visual tree in your MediaOpened event handler on MediaPlayerElement.MediaPlayer. 이 예제는 VisualTreeHelper를 사용하여 Slider에 대한 참조를 가져온 다음 미디어가 120분보다 긴 경우 1%에서 0.1%까지(1000단계) 슬라이더의 기본 단계 빈도를 변경하는 방법을 보여 줍니다.This example shows how to use VisualTreeHelper to get a reference to the Slider, then change the default step frequency of the slider from 1% to 0.1% (1000 steps) if the media is longer than 120 minutes. MediaPlayerElement는 MediaPlayerElement1라고 합니다.The MediaPlayerElement is named 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;
  }
}