时间戳

首页 > 解决方案 > 将 Button 的比例绑定到图像

wpf - 将 Button 的比例绑定到图像

问题描述

我有一个带有图像和按钮的简单窗口。当用户调整窗口大小时，我希望按钮以完全相同的比例与图像一起调整大小。以下是我想要的所需行为的示例。狗头周围的按钮只是延伸并与图像一起平移。

保持规模

我设法通过“路径”（上方为蓝色）实现了上述行为，但我没有设法通过按钮获得相同的行为。当用户单击按钮时，我想执行一些操作。

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

<Grid>
    <Canvas x:Name="polylineCanvas" Grid.Row="1">
        <Image x:Name="imgTraining" 
               Width="{Binding ActualWidth, ElementName=polylineCanvas, Mode=OneWay}" 
               Height="{Binding ActualHeight, ElementName=polylineCanvas, Mode=OneWay}" 
               Stretch="Uniform" 
               HorizontalAlignment="Left" 
               VerticalAlignment="Top">
        </Image>

        <Path Stroke="Blue" StrokeThickness="3">
            <Path.Data>
                <PathGeometry x:Name="polyline">
                    <PathGeometry.Transform>
                        <ScaleTransform
                        ScaleX="{Binding ActualWidth, ElementName=imgTraining}"
                        ScaleY="{Binding ActualHeight, ElementName=imgTraining}"/>
                    </PathGeometry.Transform>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Grid>

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

ButtonExtendsToMuch

这是我为按钮添加的 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 很陌生，所以很有可能我没有按照“预期的方式”做事，或者有一个完全不同的解决方案。

标签： wpfxaml

解决方案

您应该将 Image 和 Button 放在一个公共的 Viewbox 中，这会自动将它们缩放在一起。通常不需要将一个元素的大小绑定到另一个元素的实际大小。这是通过使用适当的布局面板来完成的。

在 Viewbox 内部，将有一个 Grid 作为公共父级，以及一个用于定位 Button 的 Canvas。按钮模板将在 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>

推荐阅读