WPF中可点击图像映射的最佳方法 [英] best way for clickable image map in wpf

问题描述

我在c#WPF中有一个包含很多部分的图像 我要使每个部分都单击以使思考 我试图将图像拆分为多个部分，并在每个事件上创建事件 图片，但问题是图片的嵌套部分 制作图像地图的最佳方法是什么?

I have an image with many parts in c# WPF I want make each part click make think I have tried to split the image to parts and make event on each image but the problem is the nested part of images what is the best way to make image map ?

推荐答案

您可以使用Microsoft Expression Studio中包含的Expression Design轻松完成此操作.这是您要执行的步骤:

You can do it easily with Expression Design which is included in Microsoft Expression Studio. This is steps you gonna do:

1. 将图像添加到Expression Design.
2. 然后，您可以使用PaintBrush工具根据需要将图像拆分为多个部分.
3. 然后，您必须将其导出到xaml.在导出窗口中，您可以选择Xaml Silverlight 3

以画布为格式，以路径为文本.

Canvas as format and Paths as Text.

如您所知，它将图像上绘制的对象自动转换为具有所有坐标的路径对象.

As you understand, it automatically converts objects you draw on your image to path object with all coordinates on it.

然后，您可以复制导出的xaml并将其粘贴到您的应用程序中.

Then you can copy exported xaml and paste it to your application.

您可以从Dreamspark免费下载Expression Studio.

You can download Expression Studio from Dreamspark for free.

我刚刚制作了样本并将其导出到xaml:

I have just made sample and exported it to xaml:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled1" Width="62" Height="62" Clip="F1 M 0,0L 62,0L 62,62L 0,62L 0,0" UseLayoutRounding="False">
    <Canvas x:Name="Layer_1" Width="62" Height="62" Canvas.Left="0" Canvas.Top="0">
        <Image x:Name="Image" Source="Untitled1_files/image0.png" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="0">
            <Image.RenderTransform>
                <TransformGroup>
                    <MatrixTransform Matrix="1,0,0,1,-929.667,-510.667"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Path x:Name="Path" Width="159.722" Height="161.743" Canvas.Left="82.757" Canvas.Top="-0.415951" Stretch="Fill" Fill="#FFE7DEDE" Data="F1 M 82.8307,30.8333C 81.8859,46.01 90.3304,60.6249 90.3304,75.831C 90.3304,88.8304 91.9427,101.93 90.3304,114.829C 89.0281,125.247 87.0101,136.367 90.3304,146.327C 95.3301,161.327 119.518,161.327 135.328,161.327C 157.018,161.327 175.778,144.86 193.825,132.828C 209.523,122.363 235.198,120.495 241.823,102.83C 243.994,97.0391 240.326,90.2367 237.323,84.8306C 230.656,72.8294 223.759,60.756 214.824,50.3323C 205.057,38.9377 205.748,18.0458 192.325,11.3342C 183.723,7.03329 173.332,8.29683 163.827,6.83447C 144.945,3.92956 125.479,-3.30947 106.83,0.834766C 94.3289,3.61269 83.6265,18.0524 82.8307,30.8333 Z "/>
    </Canvas>
</Canvas>

导出的部分是Path对象.您可以在它上做任何您想做的事.例如，您可以为此路径处理MouseClick事件，并更改路径的背景....

The exported part is Path object. You can do whatever you want on it. For example you can handle MouseClick event for this path and change background of path....

这篇关于WPF中可点击图像映射的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！