application bar icon button over rides original designer windows phone

Question

im using following code for showing application bar in wp app

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized" BackgroundColor="#FF3E5F99">
            <shell:ApplicationBarIconButton IconUri="/Assets/fb.png" Text="Facebook"  Click="btnFB_onClick" IsEnabled="True"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

it shows correct icon button in designer but the problem is, if i run the app it shows X as icon button instead of F Facebook icon button

Answer 1

You need to set UriKind to Relative / RelativeOrAbsolute I suggest to use following code on Page Load event

ApplicationBar appBar = new ApplicationBar();
appBar.Mode = ApplicationBarMode.Minimized;
appBar.IsMenuEnabled = true;
appBar.IsVisible = true;
appBar.BackgroundColor = Color.FromArgb(120, 0,229,249)

ApplicationBarIconButton button = new ApplicationBarIconButton();
button.IconUri = new Uri("/Assets/fb.png", UriKind.Relative);
button.Text = "Facebook";
button.Click += btnFB_onClick(null, null);
button.IsEnabled = true;
appBar.Add(button);

Answer 2

If it shows up in Designer View and not runtime it is usually because it is deployed incorrectly.

Check to see if the file in the Assets Folder has a Build Action of Content like below (just click on the file in Visual Studio Solution Explorer)

---

If the file is not in the Assets Folder then Right click on the Assets Folder -> Add Existing Item

Answer 3

@Marek problem is not solved even after i made your suggestions though.

i changed to generic share icon it works.