locked
How to use set button image in a XAML app

    Question

  • I am new to XAML programming so forgive my ignorance. I just want to change the image of the buttons inside the AppBar. The XAML code below is from a Direct2D App (XAML) template. It shows a left arrow image on the button. How can I change the image of the button?

                        <Button Style="{StaticResource AppBarButtonStyle}" 
                                Tag="Previous" 
                                AutomationProperties.AutomationId="PreviousAppBarButton" Content="&#xE112;"  
                                AutomationProperties.Name="Previous Color" 
                                Click="OnPreviousColorPressed"/>
    
    Moreover, what is the best resolution for button image file, 32x32 pixels or some values else?
    Friday, October 05, 2012 4:55 PM

Answers

  • See Quickstart: Adding button controls .

    You can examine the AppBarButtonStyle in your StandardStyles.xaml file to see how exactly it is defined. The image here is a glyph (0xE112) from the Segoe UI Symbol font. You can change this by altering the Content property.

    Using the font glyphs is recommended since they scale well. Otherwise you can use an image file and provide versions scaled for different resolutions.

    Also look in StandardStyles.xaml for other standard app bar button styles and uncomment any you need to use. Only define your own if there aren't standard buttons which apply to your case.

    --Rob

    • Marked as answer by Leonard Friday, October 05, 2012 11:48 PM
    Friday, October 05, 2012 5:38 PM
    Owner

All replies

  • See Quickstart: Adding button controls .

    You can examine the AppBarButtonStyle in your StandardStyles.xaml file to see how exactly it is defined. The image here is a glyph (0xE112) from the Segoe UI Symbol font. You can change this by altering the Content property.

    Using the font glyphs is recommended since they scale well. Otherwise you can use an image file and provide versions scaled for different resolutions.

    Also look in StandardStyles.xaml for other standard app bar button styles and uncomment any you need to use. Only define your own if there aren't standard buttons which apply to your case.

    --Rob

    • Marked as answer by Leonard Friday, October 05, 2012 11:48 PM
    Friday, October 05, 2012 5:38 PM
    Owner
  • Thanks Rob, I think the Segoe resource satisfies most of my need. However, could you point some code samples that demonstrate how to use customized image in UI controls.
    Saturday, October 06, 2012 12:26 AM
  • There is sample XAML for a button with an image in the Quickstart I linked. You can replace the Button's contents with whatever controls you'd like.

    --Rob

    Saturday, October 06, 2012 5:41 PM
    Owner
  • I'm sorry for not reading your reference. Thanks again Rob.
    Saturday, October 06, 2012 11:37 PM