Setting a buttons position above image in WPF

Question

0.00/5 (No votes)

See more:

Alright, I got a Window in WPF in which I want to set a buttons position in an image.
The image shows a piece of Hardware (An electronic pipette [^]) for which I am developing the hardware simulation (The pipette is connected to a medical instrument, and the simulator is intended to let developers of the instrument test the connection and the communication protocol they use to control the pipette (Yes, the Pipette has an RS232 connection).

Whatsoever, I now want to add Buttons onto the image in order to give the user a better idea which button he clicks. Whatever, I tried a solution with margins:

XML

<Grid Grid.Column="0" VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Label Grid.Row="0">Pipette Keys</Label>

    <Image Name="pipMenuImage" Grid.Row="1" MouseDown="Image_MouseDown" SizeChanged="pipMenuImage_SizeChanged" Source="pic.jpg"></Image>
    <Button x:Name="pipKeyButton" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="pipKeyButton_Click" Margin="0,0,87,61" Height="25" Width="54">
         <TextBlock><Run Text="Pip Key"/></TextBlock>
    </Button>
</Grid>

The problem is that the margins are static, and the button does not stay at the position it needs to stay on the image (It slips off the button shown on the image, ending up somewhere in the image).
I also thought about catching the Click-Event of the image and then calculate where the cursor is, and define ranges for the buttons (And then, on every click event, I calculate whether the cursor is located on the background of the image). This possibility falls out, since the user must see that he clicked a button, and therefore I'd have to add something like an overlay to the image, showing the user what he just clicked.
The best way would be to have something like WinForm anchors, but they got a kick up the bum in WPF and are not to be found, despite being used. So here comes the question: Any other idea how I possibly could keep a buttons relative position on an image in WPF?

Posted 17-Jan-14 4:07am

Marco Bertschi

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ron Beyer · Accepted Answer · 2014-01-17T04:12:00

Solution 1

I would, instead, use a canvas. You can set the background of the canvas to an image brush, then add the button controls to the canvas. This way they have attached properties to the canvas and you could define an internal Grid to layout the controls so that they stretch/position correctly.

[Edit - @marcobertschi]
Added Link to stackoverflow.com Thread, OP: Ron Beyer, see comments
http://stackoverflow.com/questions/14085164/grid-with-background-image-and-color[^]

Posted 17-Jan-14 4:12am

Ron Beyer

Updated 20-Jan-14 2:49am

v2

Comments

Marco Bertschi 20-Jan-14 3:21am

Ron,
thank you for your answer. Your solution seems to be applicable as long as no exact positioning is required, but not if I want to keep a buttons relative position to an image.

Ron Beyer 20-Jan-14 8:38am

Marco, you could also use a DockPanel or a grid inside the image. Maybe something like this? http://stackoverflow.com/questions/14085164/grid-with-background-image-and-color

Marco Bertschi 20-Jan-14 8:48am

Thank you Ron, but we decided that it would be too much effort to make it resizable. We are leaving it at a static size, until someone comes up and complains.

Member 10558492 · Accepted Answer · 2014-01-29T07:30:00

XML

<Grid Grid.Column="0" VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Label Grid.Row="0">Pipette Keys</Label>

    <Image Name="pipMenuImage" Grid.Row="1" MouseDown="Image_MouseDown" SizeChanged="pipMenuImage_SizeChanged" Source="pic.jpg"></Image>
    <Button x:Name="pipKeyButton" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="pipKeyButton_Click" Margin="0,0,87,61" Height="25" Width="54">
         <TextBlock><Run Text="Pip Key"/></TextBlock>
    </Button>
</Grid>

Setting a buttons position above image in WPF

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Setting a buttons position above image in WPF

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us