how to create & add custom icons to windows app bar ??

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.

Answer 1

You can set the AppBarButton's Label and Icon properties. See Quickstart: Adding app bar buttons

Answer 2

sorry rob , unable to get what i want , i see neither label nor icon for appbarbutton .

Answer 3

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.

Answer 4

Windows 8 app  rob , i see details regarding html/js but not c#/xaml in the quickstart link you gave.

Answer 5

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

Answer 6

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=""

---

Pradeep AJ

Answer 7

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

Answer 8

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