Command Bar in Windows Phone

问题

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

Please guide me to achieve the expected

回答1:

Try to follow below:

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

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

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">

Finally It should be like below.

<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.

Good Luck.

来源：https://stackoverflow.com/questions/38224842/command-bar-in-windows-phone

标签

xaml

windows-phone