Customizing the Caption Settings Pane in Windows 8.1 Xaml Apps


Developers can customize the caption settings pane by modifying the style of the SettingsFlyout and the style and/or the control template of the CaptionSettingsControl.

Modifying the CaptionSettingsControl template

  1. Open the page with the MediaPlayer in Blend for Visual Studio 2013
  2. In the Assets pane in Blend type "CaptionSettingsControl" in the search box
  3. With the page's top-level Grid selected in the Objects and Timeline pane, double-click on the CaptionSettingsControl in the Assets pane and the control will be inserted onto the page. This control will be deleted later so you don't need to modify any of its properties.
  4. Select the [CaptionSettingsControl] instance in the Objects and Timeline pane, right click, and select Edit Template...Edit a Copy...
  5. In the #Create Style Resource* dialog, name the style resource and press OK.
  6. Make any modifications to the control template but don't rename any of the named elements.
  7. When you are done modifying the control template click on the CaptionSettingsControl button at the top of the design canvas.
  8. Select the MediaPlayer control in the Objects and Timeline pane
  9. in the Properties pane, open the Plugins (Collection) in the Miscellaneous section. With the CaptionSettingsPlugin selected, go to the SettingsControlStyle* in the Miscellaneous section.
  10. Press the small square box to the right of the field and select Local Resource... and then the style you created in step 5, then press OK.
  11. You can now delete the CaptionSettingsControl from your application page.
  12. If you need to modify the control template again, open the Resources pane and you will see it listed under the page root. Pressing the button to the right of the name, edits the Style. Right-clicking on the style in the Objects and Timeline view resource, you will see an option to edit the template.

Setting the SettingsControlStyle in Xaml

        <CaptionSettings1:TTMLCaptionSettingsPlugin SettingsControlStyle="{StaticResource CaptionSettingsControlStyle1}"/>

Setting the SettingsControlStyle in C#

var plugin = new Microsoft.PlayerFramework.TTML.CaptionSettings.TTMLCaptionSettingsPlugin();

plugin.SettingsControlStyle = this.Resources["CaptionSettingsControlStyle1"] as Style;

Last edited Jan 9, 2014 at 9:35 PM by mscherotter, version 4