Question

使用视图框内的一个图像（在DockPanel内），我创建了一个在wpf应用程序中与我的窗口一起缩放的图像。

<Viewbox  HorizontalAlignment="Left" Name="viewbox1" VerticalAlignment="Top" Stretch="Uniform" StretchDirection="UpOnly">

    <Image Height="438" Name="image1" Stretch="Uniform" Width="277" Source="/MyAPP;component/Images/TicTacToeBoardForExample.png" MouseDown="image1_MouseDown" />
</Viewbox>

单击时如何使图片的某些区域运行不同的代码？

我希望以这样的方式做到这一点，无论图像缩放的大小（在窗口调整大小时），所需的确切区域，与图像完美缩放，以便在单击时始终触发相应的代码该地区即将开展。

Answer 1

关闭记忆你可以这样做：

public void image1_MouseDown(object sender, MouseEventArgs e)
{
  var pos = e.GetPosition(viewbox1);
  if (/* pos in range 1 */) DoTheThingInRange1();
  else if (/*pos in range 2*/) DoTheThingInRange2();
  else if (/*pos in range 3...*/) DoTheThingInRange3();
  //so on...
}

HTH

Answer 2

已经是一个老问题了，但是由于我有类似的要求，我实施了Terry的建议并希望与您分享。我使用10x10的按钮/区域。

视图：

 <Grid>
    <Image Stretch="Fill" Panel.ZIndex="1" Source="{Binding BitMapSource}" />
    <ItemsControl Panel.ZIndex="2" ItemsSource="{Binding RectangleItems}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="10" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Opacity="0.3" Content="{Binding Tag}"></Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

ViewModel：

public class MainWindowViewModel : PropertyChangedBase
{
    public MainWindowViewModel()
    {
        InitRectangles();
    }

    public BitmapSource BitMapSource => new BitmapImage(new Uri(@"C:\tmp\images\plus.png"));

    public ObservableCollection<RectangleItem> RectangleItems { get; set; }

    private void InitRectangles()
    {
        RectangleItems = new ObservableCollection<RectangleItem>();
        for (var i = 0; i < 10; i++)
        {
            for (var j = 0; j < 10; j++)
            {
                RectangleItems.Add(new RectangleItem
                {
                    X = j * 10,
                    Y = i*10,
                });
            }
        }
    }
}

和RectangleItem（模型）

public class RectangleItem
{
    public string Tag => $"{X}, {Y}";
    public double X { get; set; }
    public double Y { get; set; }
}

Answer 3

您的确切要求不明确，但如果您查看FrameworkElement上的TranslatePoint和PointToScreen方法，将会有所帮助。

Answer 4

我曾经需要做类似的事情。做了什么是把按钮放在图像上。然后你将它们的不透明度设置为0或3.0或其他东西，这样你就看不到按钮，但仍然可以点击它们。正确添加后，按钮可以随图像一起调整大小。

如何使缩放图像在WPF中具有可单击的区域

4 个答案: