locked
how to create & add custom icons to windows app bar ?? RRS feed

  • Question

  • i want to add custom icons to appbar , how to achieve this , i found documentation regarding html/js but not regarding c# & xaml , please help me.
    Wednesday, December 11, 2013 7:22 AM

Answers

  • Pradeep, please see Customize an app bar button (Windows 8) section from the Quickstart that I referenced. What you do is close to the recommended behavior, but has some subtle but important errors.

    Updating the AutomationProperties.Name to match the use of the icon is essential.

    Setting the icon from Segoe UI Symbol also works only for symbols that are available in that font. For a truly custom symbol you would need to use a Path as suggested in the documentation or replace the DataTemplate with an Image to use a png. Using a Path is generally better than an Image since it fits the UI design well and will scale and handle high contrast properly without requiring multiple images.

    --Rob

    Thursday, December 12, 2013 3:39 AM
    Moderator

All replies

  • You can set the AppBarButton's Label and Icon properties. See Quickstart: Adding app bar buttons
    Wednesday, December 11, 2013 7:32 AM
    Moderator
  • sorry rob , unable to get what i want , i see neither label nor icon for appbarbutton .
    • Proposed as answer by Maxlovexxx Thursday, December 12, 2013 2:48 AM
    • Unproposed as answer by Maxlovexxx Thursday, December 12, 2013 2:48 AM
    Wednesday, December 11, 2013 11:59 AM
  • Are you writing a Windows 8 app or Windows 8.1? The details are different in both, but both are discussed in the Quickstart I linked.

    Wednesday, December 11, 2013 4:37 PM
    Moderator
  • Windows 8 app  rob , i see details regarding html/js but not c#/xaml in the quickstart link you gave.
    Thursday, December 12, 2013 2:21 AM
  • Weird. That link goes to the Xaml doc for me.

    Windows 8 apps don't have an explicit AppBarButton, so you'll customize it by setting a style. There are sample AppBarButtonStyles in your StandardStyles.Xaml file if you created your app from anything but the blank template.

    See Customize  an app bar button (Windows 8) section from the Quickstart.

    --Rob

    Thursday, December 12, 2013 2:31 AM
    Moderator
  • Hi,

    You can get the unicode of the symbol(represented as value in the below xaml) from Microsoft Word.

     <Button Content="&#xE118;"  AutomationProperties.Name="Open File"  Style="{StaticResource AppBarButtonStyle}" Click="OpenFile"/>

    Open Microsoft Word->Insert(tab)->(select)Symbols->More Symbols->Set Font: Segoe UI Symbol and   Subset: Private Use Area

    You will get the equivalent unicode for the Selected icon. 

    Copy and Paste the code "E0D9" to  XAML to get the delete icon.

    Content="&#xE0D9;"


    Pradeep AJ

    Thursday, December 12, 2013 3:31 AM
  • Pradeep, please see Customize an app bar button (Windows 8) section from the Quickstart that I referenced. What you do is close to the recommended behavior, but has some subtle but important errors.

    Updating the AutomationProperties.Name to match the use of the icon is essential.

    Setting the icon from Segoe UI Symbol also works only for symbols that are available in that font. For a truly custom symbol you would need to use a Path as suggested in the documentation or replace the DataTemplate with an Image to use a png. Using a Path is generally better than an Image since it fits the UI design well and will scale and handle high contrast properly without requiring multiple images.

    --Rob

    Thursday, December 12, 2013 3:39 AM
    Moderator
  • Pradeep, please see Customize an app bar button (Windows 8) section from the Quickstart that I referenced. What you do is close to the recommended behavior, but has some subtle but important errors.

    Updating the AutomationProperties.Name to match the use of the icon is essential.

    Setting the icon from Segoe UI Symbol also works only for symbols that are available in that font. For a truly custom symbol you would need to use a Path as suggested in the documentation or replace the DataTemplate with an Image to use a png. Using a Path is generally better than an Image since it fits the UI design well and will scale and handle high contrast properly without requiring multiple images.

    --Rob


    Thankyou for your suggestion sir. I learnt the better way of doing this.

    Pradeep AJ

    Thursday, December 12, 2013 4:02 AM