嵌套WPF路徑

Question

我正在嘗試爲我在WPF中工作的應用程序創建一個維恩圖控件。我現在只想創建一個雙向維恩，所以兩個圈子相互重疊。

我試圖讓兩個功能工作：
1.控件必須調整Venn的大小以填充可用空間。
2.維恩的每個部分都應該帶有鼠標輸入以及不同的顏色。

我只是沒有在同一時間做這兩個...

目前我的代碼看起來是這樣的：

<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> 

正如你可以看到我使用幾何對象爲我的維恩部分，但我想有路徑對象，以便我可以支持交互和樣式。這可能嗎？有沒有更好的方法來做到這一點？

謝謝！

Answer 1

如果您將每個CombinedGeometry對象用作單獨路徑的數據，則可以獲得不同的交互和顏色。爲了使其正確調整大小，可以將Grid放入ViewBox而不是在路徑上設置Stretch。這不會改變原點，因此您需要將橢圓移到以（50,50）和（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>