Change Playbutton Icon on the poster image

Topics: Windows 8 Xaml
Jan 10, 2013 at 2:44 PM

Hi,

I have been trying to figure out how to style the player.  I am looking at the EntertainmentTheme.xaml for inspiration, but I am unable to discover how I might modify the poster play button.

How can this be done?

Also I had a stab at changing the PlayButton but I am having to make Guesses as to how I might do this. So I edited the EntertainmentTheme.xaml with the xaml bellow but it did not work.  I had a look at how the ThumbStyle of the SeekableSlider was styled and noticed the  style target type was "Thumb"  - if this was not shown in the entertainmentTheme.xaml  How would I discover this? 

                                    <local:PlayPauseButton x:Name="PlayPauseButton" 
                                                           ViewModel="{TemplateBinding ViewModel}" 
                                                           Visibility="{Binding IsPlayPauseButtonVisible, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource VisibleIfConverter}}"
                                                           Size="140" FontSize="80" Margin="25,0,25,0" StrokeThickness="0" Background="{StaticResource ItemBackgroundThemeBrush}">
                                        <local:PlayButton>
                                            <local:PlayButton.Style>
                                                <Style TargetType="local:PlayButton">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="Button">
                                                                <Grid>
                                                                    <Image Source="Assets/play-button.png"/>
                                                                </Grid>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </local:PlayButton.Style>
                                        </local:PlayButton>
                                    </local:PlayPauseButton>

 

Feb 2, 2013 at 5:59 AM
I also have same problem to customize Play button.
Coordinator
Feb 5, 2013 at 9:49 PM
Hello all, here's an example of styling the play/pause button in the entertainment theme with a custom image:
<local:PlayPauseButton x:Name="PlayPauseButton" 
                        ViewModel="{TemplateBinding ViewModel}" 
                        Visibility="{Binding IsPlayPauseButtonVisible, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource VisibleIfConverter}}"
                        Size="140" FontSize="80" Margin="25,0,25,0" StrokeThickness="0" Background="{StaticResource ItemBackgroundThemeBrush}">
    <local:PlayPauseButton.SelectedContent>
        <Image Source="http://icons.iconarchive.com/icons/deleket/button/256/Button-Play-icon.png" Width="140" Height="140"/>
    </local:PlayPauseButton.SelectedContent>
    <local:PlayPauseButton.UnselectedContent>
        <Image Source="http://icons.iconarchive.com/icons/deleket/button/256/Button-Pause-icon.png" Width="140" Height="140"/>
    </local:PlayPauseButton.UnselectedContent>
</local:PlayPauseButton>
Note: we use the Segoe Symbol font by default so the default button template is designed to set the ContentPresenter's Foreground and Background properties to facilitate changes for hover and click (which won't have an effect on an image control). So, if you need even more customization such as hover and clicked animations, you should add a custom template to your custom style. To get Xaml to serve as a starting point, just take the MediaPlayerButtonStyle in generic.xaml.

Regards, Tim