如何在画布上保持我的按钮位置相同？

Question

I have a WPF Window that has a Image in the background as a canvas. It is a picture of a pirate ship. I want to have buttons attached to certain points on the image which stay the same even if the size of the window is altered. With a fixed Window size this is fine. Can I select Hotspots at all where my Buttons will stay in touch with the same position on the image? Or do I use percentage positioning for the buttons?

This may be a lot to ask of WPF.

The buttons are on top of the canvas.

Thanks

Answer 1

Assuming your Background Image stretches according to Window Size, I'd use a Converter and set Canvas.Top and Canvas.Left based on a percentage.

You could either code your own IValueConverter that accepts the Canvas.Height and Canvas.Width , and a ConverterParameter identifying what percentage you want of the value, or I have a fairly generic Math Converter on my blog that you are free to use if you prefer.

<Button Canvas.Top="{Binding ElementName=MyCanvas, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE*.25}"
        Canvas.Left="{Binding ElementName=MyCanvas, Path=ActualWith, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE*.25}" 
        ... />

(I forget if Height / Width or ActualHeight / ActualWidth is the more accurate value - you may need to test that one)

Answer 2

You could take a common ancestor of the canvas and buttons, give it a fixed size, and wrap it in a Viewbox . Then you can let the Viewbox take care of scaling for you. The entire scene--buttons, image, and anything else--will be scaled together, so you won't need to manually adjust any positioning.