locked
[WP8.1]AppBarButton.Icon is not correctly displayed in CommandBar RRS feed

  • Question

  • We're porting a Windows 8.1 app to Windows Phone 8.1 with Visual Studio Express 2013. We use customized .png images for AppBarButton.Icon in Page.BottomAppBar.CommandBar. Here is the XAML code:

        <Page.BottomAppBar>
            <CommandBar>
                <AppBarButton>
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="Assets/Information.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton>
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="Assets/3D.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton>
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="Assets/Home.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>            
                <AppBarButton>
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="Assets/Preferences.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>
            </CommandBar>
        </Page.BottomAppBar>

    The display result is shown below. Note that the second button (squared in red) from the left

    The original image is

    The image is displayed fine in AppBar (Windows 8.1 app) with a slightly different XAML syntax

        <Button x:Uid="AppBar_Dimension"
            BorderThickness="0" Background="#FF000000" Height="100" Width="100">
            <Image Source="Assets/3D.png"/-->                        
        </Button>

    Could anyone help, thanks!


    • Edited by David_FF Monday, November 14, 2016 2:21 PM title tag
    Sunday, November 13, 2016 10:35 AM

All replies

  • Try to use a ContentTemplate to display the Image:

    <AppBarButton>
                    <AppBarButton.ContentTemplate>
                        <DataTemplate>
                            <Image Source="Assets/3D.png" />
                        </DataTemplate>
                    </AppBarButton.ContentTemplate>
                </AppBarButton>


    Please refer to the following thread for more information: https://social.msdn.microsoft.com/Forums/en-US/dec02456-4d47-4e5e-9a0c-bbb0da2fb582/how-to-create-add-custom-icons-to-windows-app-bar-?forum=winappswithcsharp

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Sunday, November 13, 2016 11:05 AM
  • Thank you very much for your help. The issue is, though it looks right in Visual Studio as this:

    the images on the buttons are invisible when the app is deployed and run on a real device:

    Sunday, November 13, 2016 12:39 PM
  • Hi Leonard,

    Since “icon images should use a white foreground on a transparent background using an alpha channel”, the “3D” word which is black colored in the png file could not display as expected. To solve it, you need to change the black area to transparent.
    https://msdn.microsoft.com/en-us/library/windows/apps/ff431806%28v=vs.105%29.aspx?f=255&MSPPError=-2147217396 

    Best Regards,
    David

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Proposed as answer by David_FF Monday, November 21, 2016 3:52 PM
    Tuesday, November 15, 2016 10:25 AM