Windows Phone Command Bar

Question

I am using the command bar on a 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 get a footer icon as shown below with any background. The icon image is simply displayed.

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

Please help me achieve the expected

Answer 1

Try the follow below:

1) Open the page in Blend that you want to change. Click on the actual control and right-click.

2) In the pop-up window, select "Create a new template" and "Define as application"

3) App.xaml. ContentPresenter . StackPanel ContentRoot. .

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

. .

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

. , , .

.