WPF：使网格适应图像答案

【问题标题】：WPF: Adapt Grid to ImageWPF：使网格适应图像
【发布时间】：2017-06-02 13:09:30
【问题描述】：

我知道在 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>

这里还有两张图片，希望能更清楚地说明我的问题到底出在哪里：

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

【问题讨论】：

你能给我们一些你的代码（这个问题所必需的部分）吗？ SO 不是代码请求网站 ;-) 你有更大的机会通过展示你自己制作的东西来帮助你。
您可以将整个 UI 放入 ViewBox 并将 Stretch 设置为 Uniform。
如果你想在按钮和圆圈之间保持相同的距离，你应该考虑使用画布面板而不是网格。 Canvas 定义了一个区域，您可以在其中显式使用相对于 Canvas 区域的坐标定位子元素：msdn.microsoft.com/en-us/library/….
@mm8 值得一试，但我还能将 Canvas 的 backgroundimage 设置为 Stretch=Uniform 吗？
当然。看我的回答。

标签： c# wpf visual-studio

【解决方案1】：

如果您想在按钮和圆圈之间保持相同的距离，您应该考虑使用 Canvas 面板而不是 Grid。

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

值得一试，但我还能将 Canvas 的 backgroundimage 设置为 Stretch=Uniform 吗？

当然。只需将 Canvas 的 Background 属性设置为 ImageBrush：

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

【讨论】：

【解决方案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 对其内部控件的尺寸做了一些奇怪的事情。

感谢大家的帮助！ :)

【讨论】：

【解决方案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 级网格的第 2 行第 2 列的左上角。

老实说，我不能说为什么需要第 3 级网格而不是在第 2 级使用行和列并让图像跨越多个行/列，我只是尝试了两种布局，只有 3 级有效正如预期的那样。

【讨论】：