CODEWITHSUNDEEP
c#windows-phone-8windows-phone
Daniel
Daniel

Reputation: 3364

Windows Phone Application bar icons issue

I'm developing an application on windows phone 8. The problem is the app bar icons are not showing and instead of the actual icon it just showing a cross. The funny thing is on the design page it's ok but when I run the app they are just a cross.

I've set the properties to content and don't copy but it still not working. 

<phone:PhoneApplicationPage.ApplicationBar>
     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" >
         <shell:ApplicationBarIconButton Text="Add"    
                  IconUri="/projectname;component/Assets/DefualtIcons/add.png"/>
         <shell:ApplicationBarIconButton Text="Help" 
                  IconUri="/projectname;component/Assets/DefualtIcons/help.png"/>
         <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Settings"/>
         </shell:ApplicationBar.MenuItems>
     </shell:ApplicationBar>
 </phone:PhoneApplicationPage.ApplicationBar>

Solution For those who are having the same problem as me this is the resolution:

  1. set the properties to Content and do not copy

  2. put the images in a image folder. (for some reason the folder name must be image)

  3. do not set the IconUri like any of these. even if you see the icon in the design.

    /ProjectName;component/Image/help.png

    ~/Image/help.png

    ../Image/help.png

  4. the IconUri has to be like this: /Image/help.png

Upvotes: 0

Views: 726

Answers (3)

Jaihind
Jaihind

Reputation: 2778

Change the properties of add.png and help.png to content. You did every thing right but you make mistake to set IconUri ="/projectname;component/Assets/DefualtIcons/add.png"., the way set IconUri you was used. useful only when you set Images properties to Resources. Here is the sample code, this may help you.

 <phone:PhoneApplicationPage.ApplicationBar>
         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" >
             <shell:ApplicationBarIconButton Text="Add"    
                      IconUri="/Assets/DefualtIcons/add.png"/>
             <shell:ApplicationBarIconButton Text="Help" 
                      IconUri="/Assets/DefualtIcons/help.png"/>
             <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Settings"/>
             </shell:ApplicationBar.MenuItems>
         </shell:ApplicationBar>
     </phone:PhoneApplicationPage.ApplicationBar>

Upvotes: 1

Praveen
Praveen

Reputation: 267

Try this. Assuming u have copied your icons to images folder in your project.Change the properties of images to Content and CopyAlways

<phone:PhoneApplicationPage.ApplicationBar>
     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" >
         <shell:ApplicationBarIconButton Text="Add"    
                  IconUri="/Images/DefualtIcons/add.png"/>
         <shell:ApplicationBarIconButton Text="Help" 
                  IconUri="/Images/DefualtIcons/help.png"/>
         <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Settings"/>
         </shell:ApplicationBar.MenuItems>
     </shell:ApplicationBar>
 </phone:PhoneApplicationPage.ApplicationBar>

Upvotes: 2

Pradeep Kesharwani
Pradeep Kesharwani

Reputation: 1478

I had same problem and i solve it by Adding a new Folder Image in my project and copy these images on this folder

<phone:PhoneApplicationPage.ApplicationBar>
     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" >
         <shell:ApplicationBarIconButton Text="Add"    
                  IconUri="..Image /add.png"/>
         <shell:ApplicationBarIconButton Text="Help" 
                  IconUri="..Image/help.png"/>
         <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Settings"/>
         </shell:ApplicationBar.MenuItems>
     </shell:ApplicationBar>
 </phone:PhoneApplicationPage.ApplicationBar>

Upvotes: 1

Related Questions