Search code examples
xamlwindows-phone

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.

enter image description here

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

enter image description here

Please guide me to achieve the expected

Solution

  • Try to follow below:

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

    enter image description here

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

    enter image description here

    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.