Xaml 如何更改AppBarButton圆形和图标颜色windows phone 8.1页面底部栏

我想自定义

AppBarButton

的圆圈和图标颜色，到目前为止，我尝试了以下样式，但不起作用。在设计模式下，它将圆形颜色显示为绿色。但是当我运行圆形时，颜色没有改变，我在这里做错了什么

应用程序栏按钮样式

 <Style x:Key="AppBarButtonStyle1" TargetType="AppBarButton">
        <Setter Property="Foreground" Value="Yellow"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="AppBarButton">
                    <Grid x:Name="RootGrid" Background="Transparent" Width="100">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ApplicationViewStates">
                                <VisualState x:Name="FullSize"/>
                                <VisualState x:Name="Compact">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TextLabel">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </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="Red"/>
                                        </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>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel">
                                            <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>
                        <StackPanel Margin="0,14,0,13" VerticalAlignment="Top">
                            <Grid HorizontalAlignment="Center" Height="40" Margin="0,0,0,5" Width="40">
                                <Ellipse x:Name="BackgroundEllipse" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}" Height="40" UseLayoutRounding="False" Width="40"/>
                                <Ellipse x:Name="OutlineEllipse" Height="40" Stroke="Green" StrokeThickness="4" UseLayoutRounding="False" Width="40"/>
                                <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                            </Grid>
                            <TextBlock x:Name="TextLabel" Foreground="{ThemeResource AppBarItemForegroundThemeBrush}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}" Width="88"/>
                        </StackPanel>
                        <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>

我的底线是xaml

 <Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Style="{StaticResource AppBarButtonStyle1}" Icon="Bookmarks"></AppBarButton>
        <AppBarButton Style="{StaticResource AppBarButtonStyle1}" >
            <AppBarButton.Icon>
                <SymbolIcon Symbol="Accept"></SymbolIcon>
            </AppBarButton.Icon>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>

---

您不能单独这样做。应用程序栏是系统UI，不支持自定义图标颜色

您可以通过设置CommandBar.Foreground和.Background属性来设置整个应用程序栏的主题。图标将全部以前景色绘制，命令栏本身以背景色绘制：

<Page.BottomAppBar>
    <CommandBar Foreground="Cyan" Background="Magenta">
        <AppBarButton  Icon="Bookmarks"></AppBarButton>
        <AppBarButton  >
            <AppBarButton.Icon>
                <SymbolIcon Symbol="Accept"></SymbolIcon>
            </AppBarButton.Icon>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>

如果你真的想单独定制按钮，那么你不能把它们放在应用程序栏中。相反，您可以在页面底部停靠一个小stackpanel并编辑AppBarButton的样式以更改椭圆的颜色（将其笔划设置为{TemplateBinding Foreground}将使其与AppBarButton中设置的前景匹配）

---

除了演示之外，我不推荐使用这些颜色组合：在真实的应用程序中，颜色应该从主题词典中提取，该词典在高对比度主题中返回默认值。

设置CommandBar前景颜色对AppBarButton没有任何影响，您必须单独设置AppBarButton颜色。自从您发布此答案后，情况一定发生了变化。此外，您现在可以在命令栏中单独设置颜色。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Grid.Row="1">
        <AppBarButton Foreground="Cyan" Icon="Bookmarks" Style="{StaticResource AppBarButtonStyle1}"></AppBarButton>
        <AppBarButton Foreground="Magenta" Style="{StaticResource AppBarButtonStyle1}">
            <AppBarButton.Icon>
                <SymbolIcon Symbol="Accept"></SymbolIcon>
            </AppBarButton.Icon>
        </AppBarButton>
    </StackPanel>
</Grid>