在WPF中设置图像上方的按钮位置 [英] Setting a buttons position above image in WPF

问题描述

好吧，我在WPF中有一个Window，我想在图像中设置按钮位置。

图像显示一块硬件（An 电子移液器 [ ^ ]），用于其中我正在开发的硬件模拟（移液器连接到医疗仪器，模拟器旨在让仪器的开发人员测试连接和他们用来控制移液器的通信协议（是的，移液器具有RS232连接）。



无论如何，我现在想按顺序在图像上添加按钮让用户更好地了解他点击的按钮。无论如何，我尝试了一个带边距的解决方案：

 <  < span class =code-leadattribute> Grid     Grid.Column   =  0    VerticalAlignment   =  Top >  
 <   Grid.RowDefinitions  >  
 <   RowDefinition  >  <   / RowDefinition   >  
 <   RowDefinition  >  <   / RowDefinition  >  
 <   / Grid.RowDefinitions  >  
 <  标签    Grid.Row   =  0 > 移液键<   /标签 >  
 
 <  图片   名称  =  pipMenuImage    Grid.Row   =  1    MouseDown   =  Image_MouseDown   <跨度类= 代码属性> SizeChanged将 <跨度类= 代码关键字> =  <跨度类= 代码关键字 > pipMenuImage_SizeChanged <跨度class =code-attribute>  来源  =  pic.jpg >  <   / Image  >  
 <  按钮    x：名称  =  pipKeyButton    Grid.Row   =  1    Horizo​​ntalAlignment   = 右    VerticalAlignment   = 底部   单击  =  pipKeyButton_Click   保证金  =  0,0,87 ，61   高度  =  25   宽度  =  54 >  
 <   TextBlock  >  <  运行   文本  =  Pip Key   /  >  <   / TextBlock  >  
 <   /按钮 >  
 <   / Grid  >  

问题是边距是静态的，按钮不会停留在图像上所需的位置（它会滑落图像上显示的按钮，结束了图像中的某个地方。

我还想过捕捉图像的Click-Event然后计算光标的位置，并定义按钮的范围（然后，每次点击事件，我计算光标是否位于图像的背景上）。这种可能性会失败，因为用户必须看到他点击了一个按钮，因此我必须在图像上添加叠加图像，向用户显示他刚刚点击的内容。

最好的办法是拥有类似WinForm锚点的东西，但是他们在WPF中得到了一个蠢蠢欲动，尽管被使用了，但是找不到它们。所以这里有一个问题：任何其他的想法我怎么可能在WPF中保持图像上的按钮相对位置？

解决方案

我会使用画布。您可以将画布的背景设置为图像画笔，然后将按钮控件添加到画布。这样他们就可以在画布上附加属性，你可以定义一个内部网格来布局控件，使它们正确拉伸/定位。





添加链接到stackoverflow.com线程，OP：Ron Beyer，看评论

http://stackoverflow.com/questions/14085164/grid-with-background-image-and-color [ ^ ]

 <  网格    Grid.Column   =  0 < span class =code-attribute>   VerticalAlignment   = 热门 >  
 <   Grid.RowDefinitions  >  
 <   RowDefinition  >  <   / RowDefinition  >  
 <   RowDefinition  >  <   / RowDefinition  >  
 <  <跨度类= 代码leadattribute > / Grid.RowDefinitions  <跨度类= 代码关键字>>  
 <跨度class =code-keyword><  标签    Grid.Row   =   0 > 移液键< ;   / Label  >  
 
 <  图片   名称  =  pipMenuImage    Grid.Row   =  1    MouseDown   =  Image_MouseDown    SizeChanged   =  pipMenuImage_SizeChanged   来源  =  pic.jpg >  <   / Image  >  
 <  按钮    x：名称  =  pipKeyButton    Grid.Row   =  1    Horizo​​ntalAlignment   = 右    VerticalAlignment   = 底部   点击  =   pipKeyButton_Click   保证金 < span class =code-keyword> =  0,0,87,61   高度  =  25   宽度  =  54 >  
 <   TextBlock  >  <  运行   文本  = 点密钥  /  >  <   / TextBlock  >  
 <   /按钮 >  
 <   / Grid  >  

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:

<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?

解决方案

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[^]

<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>

这篇关于在WPF中设置图像上方的按钮位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！