How can I create a button in F# that contains both an 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'd like the button content to contain some text, AND also the 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

Neither 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't set the background of the button to 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 StackPanel and add your image along with TextBlock as it's children. then set this stack panel as buttons content. You may choose some other Panel as well.

Answer 2

You need to create a panel (probably a StackPanel with Orientation="Horizontal"). Set the content of the button to be the panel, and add the text and image to the panel.