How to set app bar button image via resource or programmatically in windows store app

Question

I want to load an AppBar programmatically, but I'm having trouble setting the image to a bitmap. Is this allowed? Or can only the Segoe UI Symbol characters be used?

I tried doing it in a resource:

<Style x:Key="StudyAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="StudyAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Study"/>
    <Setter Property="Content">
        <Setter.Value>
            <Image Source="Assets/AppBar/Study.png" />
        </Setter.Value>
    </Setter>
</Style>

No bitmap appears.

I can set the bitmap programmatically:

        Uri _BaseUri = new Uri("ms-appx:///");
        foreach (MenuItem menuItem in Model.MainMenu.MenuItems)
        {
            Button button = new Button();
            button.Name = menuItem.Name;
            button.Click += AppBar_Click;
            button.Tag = menuItem.Name;
            Style style = (Style)App.Instance.Resources["AppBarButtonStyle"];
            button.Style = style;
            Image image = new Image();
            Uri uri = new Uri(_BaseUri, "Assets/AppBar/" + menuItem.Name + ".png");
            image.Source = new BitmapImage(uri);
            image.Width = 25;
            image.Height = 25;
            button.Content = image;
            AutomationProperties.SetName(button, menuItem.Title);
            TopLeftPanel.Children.Add(button);
        }

but if I do:

button.Content = "\uE10F";

I don't see the home character.

In general, are there any examples or guidelines for using custom images in app bars? Segoe doesn't have applicable images for all my menu items.

Unfortunately my app is pretty complex, with two levels of menus, so any suggestions on handling this would be appreciated. Basically, I'm trying to turn my website http://www.jtlanguage.com into an app.

Thanks.

-John

Answer 1

You have to create your own style, AppBarButtonStyle can't be used with image. I recommend you to check this MSDN forum thread, it might be helpful to you. how I can customize my AppBarIcons Images?. Please don't forget to accept this answer if you find your solution.