image not showing in front of button

I have an appdesigner app. It is designed with grids. There is a grid with two columns. The right column of the grid is 10x wider than the left. There is a button that spans both the left and right grid. There is also an image on the left column of a "play" image.

When the app is initialized, I am expecting the image to be shown on top of the button, but it is not. Why?

For more information, this was working fine about an hour ago. I was in the middle of editing some code in appdesigner code editor, and then appdesigner just crashed. WTF? and since then, I am unable to see the image. Two images attached shows my Design View and the app once it is started (the one with the yellow question mark). I have tried: delete and added component back, making sure the path is correct... nothing seems to work. Any help is appreciated.

[Image Analyst]

No idea unless we can try it ourselves. Can you attach the .mlapp file and the green triangle image?

[Quy]

Attached is a cpoy of the orignal mlapp, but with most codes deleted. The issue is still present.

I also attached an app1.mlapp file. It works as I would like it to work.

Answer 1

[prabhat kumar sharma]

Hello Quy,

I understand that you're facing issue with displaying an icon inside a button.

One possible solution to your problem is to incorporate the play icon directly into the button, rather than using it as a separate image in the left grid. To do this, upload your play image to the button's `Icon` property and set the `IconAlignment` property to ‘leftmargin’

.

I hope this resolves the issue.

[Quy]

This works just like how I wanted it. I can't believe I did not see that there is an icon option for a button.

Thanks!

[Quy]

Still does not solved whatever is going on, but this works just fine.

[Voss]

"Still does not solved whatever is going on, but this works just fine."

@Quy: Can you explain that apparently self-contradictory statement? Is the problem fixed or not?

[Quy]

This is the summary of the issue (summarizes from the original post): Have a grid with two column. In this grid is a button that spans both column. However, the left column also have an image. The image is supposed to be on top, but it disappears when the app is actually running.

The "workaround" to the original issue is to use the icon property of the button instead of having an additional image. And this "workaround" should be the primary way and should be done for this type of problem, and not to use an image.

Now, it "still does not solved whatever is going on" means that if I actually use a separate image for the icon instead of the button icon property, the problem is there. But I am not going to do that anymore, because to me using the icon property is the right way to go.

[Voss]

Ah, I see. Thank you for clarifying.