在WP8.1中，自定义播放/暂停按钮的播放器框架元素。

Question

我在使用播放器框架（XAML WINRT，Windows Phone 8.1 应用）时遇到了一个小的自定义问题，我想要移除播放/暂停和全屏按钮周围的圆圈：

我希望它们看起来更像这样：

我可以访问播放/暂停按钮的默认XAML：

然而，Blend不允许我创建元素的副本以便进行自定义：

你知道我该怎么做才能解决这个问题吗？或者有其他方法可以去掉播放/暂停按钮周围的圆圈吗？

编辑：

为了得到第二张图片，我使用 Photoshop 修改了全屏按钮，展示了我想要的效果。

我已经找到了一个解决方案，可以找到 AppBarButton 的 "TransportBarButtonStyle" 样式，Blend 和 Visual Studio 都无法给我这个样式。

你可以在播放器框架的 codeplex 网站上找到它： https://playerframework.codeplex.com/SourceControl/latest#Universal.Xaml.Core/Themes/Classic.xaml，你需要寻找：

<Style x:Key="TransportBarButtonStyle" TargetType="AppBarButton">

- Damien

---

这些按钮是如何设计的？你能展示一下XAML代码吗？你是否使用了AppBarButton类？（它在模板中有一个圆圈）如果是，那么为什么不使用普通的Button类呢？ - Romasz

Answer 1

在查看CodePlex之后，https://playerframework.codeplex.com/SourceControl/latest#Universal.Xaml.Core/Themes/Classic.xaml

我创建了一个新的样式，针对没有任何圆圈围绕其边框的AppBarButton：

<Style x:Key="CircleLessTransportBarButtonStyle" TargetType="AppBarButton">
    <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="IsCompact" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid x:Name="RootGrid" Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ApplicationViewStates">
                            <VisualState x:Name="FullSize"/>
                            <VisualState x:Name="Compact"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverBackgroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>-->
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>-->
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>-->
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="PointerFocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Viewbox Margin="{TemplateBinding Padding}">
                        <Grid Height="40" Width="40">
                            <!--<Ellipse x:Name="BackgroundEllipse" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}" UseLayoutRounding="False"/>
                            <Ellipse x:Name="OutlineEllipse" Stroke="{ThemeResource AppBarItemForegroundThemeBrush}" StrokeThickness="2" UseLayoutRounding="False"/>-->
                            <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw"
                                              Content="{TemplateBinding Icon}" 
                                              Foreground="{TemplateBinding Foreground}" 
                                              HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </Viewbox>
                    <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                    <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

希望这能对你有所帮助！

- Damien