我无法在 WP 8.1 的 CommandBar 内为 AppBarButton 应用自定义样式 [英] I cannot apply a custom style for an AppBarButton inside a CommandBar in WP 8.1

问题描述

我有一个非常具体的问题.我找不到这个确切问题的任何答案，所以我使用试错法来查明问题.这是我遇到问题的示例代码:

I have a very specific question. I could not find any answers for this exact problem, so I used the trial and error method to pinpoint the problem. Here is an example code I have the problem with:

<Page.BottomAppBar>
    <CommandBar x:Name="MainMenuCommandBar" ClosedDisplayMode="Minimal">
        <CommandBar.PrimaryCommands>
            <AppBarButton x:Name="otherCommandButton" Label="Egyéb" Icon="List" Click="otherCommandButton_Click" Style="{StaticResource appbarButton}">
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem x:Name="SecondaryFlyout1" Text="Névjegy" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                        <MenuFlyoutItem x:Name="SecondaryFlyout2" Text="Adatbázis mentés" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                        <MenuFlyoutItem x:Name="SecondaryFlyout3" Text="Adatbázis visszaállítás" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                        <MenuFlyoutItem x:Name="SecondaryFlyout4" Text="Terminál törlése" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                        <MenuFlyoutItem x:Name="SecondaryFlyout5" Text="Jelszavas védelem" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                        <MenuFlyoutItem x:Name="SecondaryFlyout6" Text="Nyelv váltás" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                        <MenuFlyoutItem x:Name="SecondaryFlyout7" Text="Betűméret" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                        <MenuFlyoutItem x:Name="SecondaryFlyout8" Text="Kilépés" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton x:Name="refreshCommandButton" Label="Frissítés(Bank)" Icon="Refresh" Style="{StaticResource appbarButton}"/>
            <AppBarButton x:Name="syncCommandButton" Label="Szinkronizál(PC)" Icon="Sync" Style="{StaticResource appbarButton}"/>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

我想为命令栏中的 appbarbuttons 应用自定义样式，因为标签中的文本太长，我看不到整个文本.所以我想，我会让文本更小，或者 appbarbutton 更宽.设计师向我展示了这些变化，但是当我运行程序时，没有任何变化.无论我做什么，appbarbuttons 都使用默认样式.所以当我运行程序时文本不会变小.

I wanted to apply a custom style for the appbarbuttons inside a commandbar, because the text in the Labels are too long, and I can't see the whole text. So I thought, I will make the text smaller, or the appbarbutton wider. The designer showed me the changes, but when I run the program, nothing changes. The appbarbuttons use the default styling, no matter what I do. So the text don't get smaller when I run the program.

在此之后，我试图查明问题所在.我也尝试编辑模板，但编辑副本"命令是灰色的.我觉得这很奇怪，因为我浏览了 MSDN，在那里我看到 appbarbuttons 实际上有一种我可以编辑的样式.我复制了默认样式，进行了更改，将其作为自定义样式应用到我的 app.xaml 中，但我遇到了与以前相同的问题.没有任何改变，无论我改变了风格.在所有这些失败之后，我在命令栏外面放了一个 appbarbutton.在这种情况下，一切正常.我可以编辑模板的副本，更改会在我运行程序时反映出来.另一个奇怪的情况是，menuflyoutitems 可以在命令栏中设置样式.

After this, I tried to pinpoint the problem. I tried to edit the template too, but the "edit a copy" command is grayed out. I thought this is weird, because I sweeped through MSDN, and there I saw that the appbarbuttons in fact has a style which I could edit. I copied the default style, made changes, applied it into my app.xaml as a custom style, but I met with the same problem as before. Nothing changed, no matter what I altered in the style. After all these failures, I put an appbarbutton OUTSIDE a commandbar. And at this case, everything works fine. I can edit a copy of the template, and the changes reflect when I run the program. Another weird case is, that the menuflyoutitems can be styled inside the commandbar.

抱歉解释太长，我想介绍一下我已经知道的内容.简而言之，我的问题是，有没有办法在命令栏中设置 appbarbutton 的样式?或者，如果没有，是否有其他方法可以创建自定义命令栏?

Sorry for the lengthy explanations, I wanted to present what I know already. My question in short that, is there any way to style an appbarbutton inside a commandbar? Or if not, is there any alternative to create a custom commandbar?

推荐答案

Windows Phone 上的 CommandBar 是系统 UI，除了设置前景色和背景色外，应用无法对其进行自定义.

The CommandBar on Windows Phone is system UI and cannot be customized by the app beyond setting it's foreground and background colors.

如果您想自定义单个按钮，您需要为它们实现自己的面板，而不是使用应用栏.您可以在页面底部放置一个水平堆栈面板，并在其中包含自定义的 AppBarButton.如果您希望它穿鞋和隐藏，您需要设置自己的逻辑来检测触发输入，然后应用动画将其打开和关闭.

If you want to customize the individual buttons you'll need to implement your own panel for them instead of using the app bar. You can place a horizontal Stack Panel at the bottom of your page and include customized AppBarButtons in it. If you want it to shoe and hide you will need to set your own logic to detect the triggering input and then apply an animation to side it open and closed.

这篇关于我无法在 WP 8.1 的 CommandBar 内为 AppBarButton 应用自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！