Windows Phone 中的命令栏 [英] Command Bar in Windows Phone

问题描述

我使用下面的代码在 Windows 手机中使用命令栏

I am using Command Bar in windows phone using below code

<Page.BottomAppBar>
        <CommandBar Foreground="White">
            <CommandBar.PrimaryCommands>
                <AppBarButton x:Uid="Share">
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="/Assets/Share.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton Icon="Favorite"></AppBarButton>
                <AppBarButton Icon="Comment"></AppBarButton>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

我得到一个没有任何背景的页脚图标，如下所示.只是显示了图标图像.

I am getting a footer icon like below with out any background. Simply the icon image is showing.

但我需要一个像这样的页脚图标，每个图标都有一些圆形背景，前景为白色

But i need a footer icon like this with some rounded background for each icon with foreground white

请指导我实现预期

推荐答案

请尝试以下操作:

1) 在 Blend 中打开要修改的页面.单击实际控件并右键单击.

1) Open the page in Blend which you want to modify. Click on the actual Control and Right Click.

2) 从弹出窗口中选择创建新模板并定义为应用程序

2) From the popup window choose Create new template and Define In as Application

3) 它在 App.xaml 中创建默认模板的副本.现在在样式结束之前查找标签 ContentPresenter.它将被包装在名称为 ContentRoot 的 StackPanel 中.用边框包裹它.

3) It creates a copy of Default Template in App.xaml. Now Look For tag ContentPresenter before the end of style. It will be wrapped in StackPanel with Name ContentRoot. Wrap it with a Border.

<Border BorderBrush="{TemplateBinding Foreground}" CornerRadius="50" BorderThickness="2" Margin="10,0">

最后应该是这样的.

<Border BorderBrush="{TemplateBinding Foreground}" CornerRadius="50" BorderThickness="2" Margin="10,0">
    <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
        <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="20" Width="20" Margin="0,12,0,4"/>
        <TextBlock x:Name="TextLabel" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" Margin="0,0,0,6" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}"/>
    </StackPanel>
</Border>

现在返回到您的页面并将样式设置为此样式键.喜欢下面.

Now go back to your page and set the style to this style key. Like Below.

<AppBarButton Icon="Favorite" Style="{StaticResource AppBarButtonStyle1}" ></AppBarButton>

这是混合之美.不仅是这个控件，您还可以修改任何具有样式模板的控件.

This is Beauty of Blend. Not just this control, you can modify any control that has Style Template.

祝你好运.

这篇关于Windows Phone 中的命令栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！