Question

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

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

这是我用于工作中的“路径” 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>

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

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

Answer 1

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

在视图框内，将有一个网格作为公共父对象，并有一个画布来放置Button。按钮模板将在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>

将按钮的比例绑定到图像

1 个答案: