Wpf 将按钮的比例绑定到图像

我有一个带有图像和按钮的简单窗口。当用户调整窗口大小时，我希望按钮的大小与图像的比例完全相同。下面是我想要的行为的一个例子。狗头上的按钮只是随着图像延伸和平移

我用一个“路径”（上面用蓝色表示）实现了上述行为，但我没有用一个按钮实现同样的行为。我想在用户单击按钮时执行一些操作

以下是我用于工作“路径”senario的xaml代码：

我试图通过添加按钮而不是路径来应用相同的逻辑。在这种情况下，按钮的大小取决于窗口的大小（而不是图像的大小）：

下面是我为按钮添加的xaml代码：

        <Button x:Name="buttSelection" Opacity="0.5" Background="#FF000CFF">
            <Button.LayoutTransform>
                <ScaleTransform 
                    ScaleX="{Binding ActualWidth, ElementName=imgTraining}" 
                    ScaleY="{Binding ActualHeight, ElementName=imgTraining}"/>
            </Button.LayoutTransform>
        </Button>

问题：

• 如何将按钮缩放到与图像相同的比例
• 如何将此按钮的大小和位置设置为仅为图像的一部分（而不是图像本身的大小）

非常感谢您的支持

---

PS：我对wpf/xaml非常陌生，所以很有可能我没有按照“预期的方式”进行操作，或者有一个完全不同的解决方案。

您应该将图像和按钮放在一个通用的视图框中，这样可以自动将它们缩放到一起。通常不需要将一个元素的大小绑定到另一个元素的实际大小。这是通过使用适当的布局面板来完成的

在Viewbox内部，将有一个网格作为公共父级，并有一个画布来定位按钮。按钮模板将包含ContentPresenter周围的边框，可以选择显示按钮的内容

<Grid>
    <Viewbox>
        <Grid>
            <Image x:Name="imageTraining"/>
            <Canvas>
                <Button x:Name="buttonSelection" Width="200" Height="200"
                        Canvas.Left="200" Canvas.Top="200">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Border BorderThickness="10"
                                    BorderBrush="Blue"
                                    Background="Transparent">
                                <ContentPresenter
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </Canvas>
        </Grid>
    </Viewbox>
</Grid>

不客气。如果您希望在缩放图像和按钮时具有固定的边框厚度，则会变得更加困难：-）在我的情况下，没有固定的边框厚度可能更好：）

<Grid>
    <Viewbox>
        <Grid>
            <Image x:Name="imageTraining"/>
            <Canvas>
                <Button x:Name="buttonSelection" Width="200" Height="200"
                        Canvas.Left="200" Canvas.Top="200">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Border BorderThickness="10"
                                    BorderBrush="Blue"
                                    Background="Transparent">
                                <ContentPresenter
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </Canvas>
        </Grid>
    </Viewbox>
</Grid>