Entertainment Sample - Buttons in bottom app bar issue with Captoins and Audio track selector

Topics: Windows 8 Xaml
Feb 14, 2013 at 2:33 PM
I was looking at putting the player controls in the Bottom App Bar. However I have discovered that in the provided Entertainment Sample page, Which demonstrates how to do this, when you click on the Audio selector button in the App Bar, the selection menu appears behind the App Bar making it difficult to select the track.

Is there a way round this?
Coordinator
Feb 15, 2013 at 12:17 AM
You can set the style of the AudioSectionView and CaptionSelectorView via the plugins to control this. To do this, create a style in your xaml resources, then retrieve the style in code behind and assign it to the appropriate property on the plugin. For example:
var audioSelectionPlugin = player.Plugins.OfType<AudioSelectionPlugin>().FirstOrDefault();
audioSelectionPlugin.AudioSelectionViewStyle = this.Resources["MyAudioSelectionStyle"] as Style;

var captionSelectorPlugin = player.Plugins.OfType<CaptionSelectorPlugin>().FirstOrDefault();
captionSelectorPlugin.CaptionSelectorViewStyle = this.Resources["MyCaptionSelectorStyle"] as Style;
You can find the default styles in the generic.xaml file shipped with the player framework. Here is a custom version that should work however for your convenience:
<Style TargetType="mmppf:CaptionSelectorView" x:Key="MyCaptionSelectorStyle">
    <Setter Property="Padding" Value="0,0,0,90"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="mmppf:CaptionSelectorView">
                <Grid x:Name="LayoutRoot" Background="#00000000">
                    <Border BorderThickness="2" BorderBrush="{StaticResource ListBoxForegroundThemeBrush}" Background="{StaticResource ListBoxFocusBackgroundThemeBrush}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="{TemplateBinding Padding}">
                        <mmppf:DeselectableListBox x:Name="CaptionsList" MaxWidth="200"  ItemsSource="{Binding AvailableCaptions}" SelectedItem="{Binding SelectedCaption, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <mmppf:DeselectableListBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}"/>
                                </DataTemplate>
                            </mmppf:DeselectableListBox.ItemTemplate>
                        </mmppf:DeselectableListBox>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="mmppf:AudioSelectionView" x:Key="MyAudioSelectionStyle">
    <Setter Property="Padding" Value="0,0,0,90"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="mmppf:AudioSelectionView">
                <Grid x:Name="LayoutRoot" Background="#00000000">
                    <Border BorderThickness="2" BorderBrush="{StaticResource ListBoxForegroundThemeBrush}" Background="{StaticResource ListBoxFocusBackgroundThemeBrush}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="{TemplateBinding Padding}">
                        <ListBox x:Name="AudioList" MaxWidth="200" ItemsSource="{Binding AvailableAudioStreams}" SelectedItem="{Binding SelectedAudioStream, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}"/>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Coordinator
Feb 15, 2013 at 4:23 PM
I'd also like to add... you should (untested) be able to skip the code behind if you use implicit styles... Just drop the x:Key and put custom xaml in your app.xml.
Feb 15, 2013 at 5:34 PM
Thanks Tim