我试图创建一个维恩图控制我的工作在WPF应用程序。我只是想创建一个双向维恩的那一刻，让两个圆互相重叠。

I'm trying to create a Venn diagram control for an application I'm working on in WPF. I just want to create a two way Venn at the moment, so two circles overlapping each other.

有两个特点，我试图让工作： 1.控制必须调整维恩以填充可用空间。 2.维恩的每个部分应该采取鼠标输入以及具有不同的颜色。

There are two features I'm trying to get working: 1. The control must resize the Venn to fill the available space. 2. Each section of the Venn should take mouse input as well as having a different colour.

我只是没有在同一时间做这两个...

I can do both of these just not at the same time...

目前，我的code是这样的：

At the moment my code looks like this:

<Grid>  
<Path Stretch="Uniform" Fill="Blue" >
  <Path.Data>
    <GeometryGroup>
      <CombinedGeometry GeometryCombineMode="Exclude" >
        <CombinedGeometry.Geometry1>
          <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
      <CombinedGeometry GeometryCombineMode="Exclude" >
        <CombinedGeometry.Geometry1>
          <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
      <CombinedGeometry GeometryCombineMode="Intersect">
        <CombinedGeometry.Geometry1>
          <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
    </GeometryGroup>
  </Path.Data>
</Path>

正如你可以看到我使用的几何对象为我维恩的部分，但我想有路径对象，这样我可以支持互动和风格。这可能吗？是否有这样做的更好的办法？

As you can see I'm using Geometry objects for my Venn sections but I want to have Path objects so that I can support the interaction and styles. Is this possible? Is there a better way of doing this?

谢谢！

推荐答案

如果你用你的每个CombinedGeometry对象的数据建立一个独立的路径，就可以得到不同的交互和颜色。为了得到它来调整得当，就可以把网格中的。这不会移位的起源，所以你要转移省略号可在（50,50）和（100,50）为中心。

If you use each of your CombinedGeometry objects as the Data for a separate Path, you can get different interaction and colors. In order to get it to resize properly, you can put the Grid in a ViewBox instead of setting Stretch on the path. This won't shift the origin, so you'll want to shift the ellipses to be centered at (50,50) and (100,50).

<Viewbox>
    <Grid>
        <Path Fill="Blue">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
        <Path Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude" >
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
        <Path Fill="Purple">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Intersect">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Viewbox>