How to create a button in F # that contains both image and text?

Question

I have both a button and an image as follows:

let btnFoo = new Button() let imgBar = new BitmapImage(new System.Uri("images/whatever.png", System.UriKind.RelativeOrAbsolute)) 

I want the content of the button to contain some text as well as an image.

I can do either of these two things just fine, but they don't get me both the text and the image on the button at the same time:

 btnFoo.Content <- "Text" btnFoo.Content <- imgBar 

None of these things work:

 btnFoo.Content <- "Text " + imgBar // compiler hates this btnFoo.Content <- "Text ", imgBar // compiler is OK, but result is ugly since the image is rendered as the class text 

I also can not set the button background for the image:

 btnFoo.Background <- imgBar // compiler doesn't like this because Background expects a Media.Brush 

Any thoughts / ideas? Thanks!

Answer 1

You can create a StackPanel and add your image along with TextBlock , as these are children. then set this stack panel as button content. You can select another Panel .

Answer 2

You need to create a panel (possibly a StackPanel with Orientation = "Horizontal"). Customize the contents of the button on the panel and add text and image to the panel.