Question

我知道WPF中的图像可以适合网格。现在还有网格适应图像的可能性吗？

我想使用自动布局在图像上的某些位置放置按钮，但图像保持其原始形状（因此Stretch = Uniform）也很重要。但是，当我首先使用网格的行和列时，按钮就在我想要的位置，但是如果我在宽度而不是高度上拉伸窗口，则按钮会偏离我想要的位置（基于图像）。

我明白要做什么？有谁知道如何实现这一目标？

编辑：在我的图像上，让我们说一个圆圈，我想要一个按钮，总是靠近圆圈。好的，这是我到目前为止的代码：

<Window x:Class="VakPumpEntwurf2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid Background="#FFE62626">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="69*" />
        <ColumnDefinition Width="21*"/>
        <ColumnDefinition Width="254*" />
        <ColumnDefinition Width="173*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="55*" />
        <RowDefinition Height="19*"/>
        <RowDefinition Height="33*"/>
        <RowDefinition Height="107*" />
        <RowDefinition Height="107*" />
    </Grid.RowDefinitions>

    <Image Source="images/MyPic.png" Grid.ColumnSpan="4" Grid.RowSpan="5" >  
    </Image>

    <Button Grid.Column="1" Grid.Row="1"/>  //This Button shall be always near the circle
</Grid>

这里还有两张图片我希望更清楚我的问题在哪里：

这是我拉伸窗口宽度后按钮的位置。但实际上我希望我的按钮总是非常靠近圆圈。

Answer 1

如果要在按钮和圆圈之间保持相同的距离，则应考虑使用“画布”面板而不是“网格”。

Canvas定义了一个区域，您可以使用相对于Canvas区域的坐标显式定位子元素：https://msdn.microsoft.com/en-us/library/system.windows.controls.canvas(v=vs.110).aspx

值得一试，但是我仍然可以将Canvas的背景图像设置为Stretch = Uniform吗？

不确定。只需将Canvas的Background属性设置为ImageBrush：

<Canvas>
    <Canvas.Background>
        <ImageBrush ImageSource="bg.png" Stretch="Uniform" />
    </Canvas.Background>
    ...
</Canvas>

Answer 2

问题是，我认为解决方案在于@ mm8和@Manfred Radlwimmer建议的组合。

以下是为我制定的代码：

<Window x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="337" Width="514" Background="AliceBlue">


    <Viewbox>
        <Canvas Width="200" Height="100">
            <Canvas.Background>
                <ImageBrush ImageSource="images/pic1.png" Stretch="Uniform" />
            </Canvas.Background>
            <Button Canvas.Left="30" Content="Howdy" Canvas.Top="5" FontSize="6" Width="25" Height="16"/>
        </Canvas>
    </Viewbox>

</Window>

我可以更好地控制按钮的位置，按钮可以相对于我的图像进行缩放。但正如@Manfred Radlwimmer所说，这就是ViewBox的目的。即使ViewBox对其中的控件的尺寸做了奇怪的事情。

感谢大家的帮助！：）

Answer 3

让我们使用一些嵌套网格......

<Grid Background="#FFE62626">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <Image Source="images/MyPic.png"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="1" Grid.Column="1" Width="100" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Content="Click me 2"/>
        </Grid>
    </Grid>
</Grid>

最外面的网格正在伸展到父容器。第二级网格与其中的均匀拉伸图像大小相同。第3级网格与第二级网格大小相同，并提供比例行/列定义。该按钮位于第3级网格的第2行和第3列的左上角。

老实说，我不能说为什么需要第3级网格而不是第2级的行和列，让图像跨越多行/列，我只尝试了两种布局，只有3级一个按预期工作。

WPF：使网格适应图像

3 个答案: