How to put Lable below the App Bar Icon

In my last post I have explained how to get some inbuilt Icon in XAML.

Now if you want to display label just below the icon then how can you get them.

Don't use any Stackpanel or anything else. Actually there is a hack on that. You need to use a property "AutomationProperties.Name". Here is the code snippet:

<Page

x:Class="App2.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:App2"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Page.TopAppBar>

<AppBar>

<StackPanel Orientation="Horizontal">

<Button Style="{StaticResource AppBarButtonStyle}" Content="&#xE10F;" AutomationProperties.Name="Home" />

<Button Style="{StaticResource AppBarButtonStyle}" Content="&#xE082;" AutomationProperties.Name="Bookmark"/>

</StackPanel>

</AppBar>

</Page.TopAppBar>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

</Grid>

</Page>

Happy Coding.

 

Windows 8 Dev Icons

As I started development of Windows 8 Apps in XAML-C#, from the first day I am getting some great apps from Windows Store. One of them is “Windows 8 Dev Icons”:

  

If you click any of the icons you can get the XAML Code to get this Icon:

Just copy the code “&#xE082;” and paste it into XAML and you can get a favorite vector icon.

Now I try to find out from where this code or value came. Go to MS-Word. Click on Insert tab, click on Symbol icon. Select any character, below you can see “Character Code” (here it is E082), before paste it in XAML add this “&#x” before this code. Thus you can get any symbol in XAML by this trick.

There are many apps like this. If you found similar things let me know.