locked
AppBar icon from Image

    Question

  • Hi,

    Need to place Share icon in app bar which is not from any font. I refered to sample and created one same for my requirement. But it does not fit up. Do I need to do any other modifications for it to fit up.

                

    Above smiley is one I found in sample( Sample uses Light Theme) and I created in same manner for share with white color(My App uses Dark Theme). It could not fit up the requirement.

    Do I need to follow the same specs(It is for HTML5/JS Apps, But I use XAML) as specified here.

    If not how icon should be designed for Dark Theme?


    Thanks & Regards Tejaswi Chandrapatla

    Thursday, March 20, 2014 9:17 AM

All replies

  • can you show your xaml?

    and what kind of color is the appbar? the image will be draw on it. so if your icon is black and the appbar is back it wont be visible no.


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Thursday, March 20, 2014 10:11 AM
  • Appbar color is black. Hence I have choosen white icon.

    Here is my Xaml snippet

     <Page.BottomAppBar>
    <AppBar x:Name="BottomAppBar" >
      <StackPanel   Orientation="Horizontal" HorizontalAlignment="Right">
     <AppBarButton x:Name="btn_Share" Label="Share">
      <AppBarButton.Icon>
     <BitmapIcon UriSource="ms-appx:///Assets/Images/sharewhite.png"/>
    </AppBarButton.Icon>
                                                             </AppBarButton>
     </StackPanel>
     </AppBar>
     </Page.BottomAppBar>

    Here is how it looks like..

    Unlike Add or Edit it looks like that. The icon size is 28X28.


    Thanks & Regards Tejaswi Chandrapatla

    Thursday, March 20, 2014 10:20 AM
  • build action is set to content?

    can share the icon with me so can try it out myself?


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#


    Thursday, March 20, 2014 10:29 AM
  • Here is the link  for image in my OneDrive.

    Thanks & Regards Tejaswi Chandrapatla

    Thursday, March 20, 2014 10:43 AM
  • works here.. its just too big to show in the circle. make it smaller. and check the build action of the file properties. build action need to be content.

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Thursday, March 20, 2014 11:02 AM
  • Thanks Dave.

    I will make it smaller. The Build action is already set to content only.


    Thanks & Regards Tejaswi Chandrapatla

    Thursday, March 20, 2014 11:25 AM
  • I made it smaller.. checked it.. The icon is now blurred or not clear..


    Thanks & Regards Tejaswi Chandrapatla

    Friday, March 21, 2014 10:37 AM