WPF玩起来还是挺炫酷的。我实现的效果：不同色块交叉，交叉部分颜色叠加显示。（叠加部分暂时用随机颜色代替）。单独色块点击弹出以色块颜色为主的附属面板。踩了一些坑，从简单一步步完善。

      判断是否交叉，并创建交叉区域的算法比较费事。

      完整过程代码较复杂，算法也从初始简单到复杂再到简单。

      交汇区域：  主要使用Path绘制，根据色块获取交汇区域的Intersect geometry获得。  

      判断交叉：实现了可判断任意多个色块交叉，并绘制出所有叠加区域的算法，但是色块越多，判断过程越占用资源。造成程序卡顿。最终修改为最多三个色块可进行叠加组合。

      算法描述起来比较复杂，可复用性不高，就不费文字阐述了。

      最后一个模块比较有趣，仅用简单的Ellipse， Rectangle，Line等教简单的Shape即可随意绘制出炫酷的UI效果，部分源码如下：

 <Ellipse x:Name="EllipseLoadZm" Stroke="{Binding Path=Brush}" StrokeThickness="60" Margin="-98"

                 StrokeDashArray="0.4 0.12" StrokeDashCap="Flat"

                 RenderTransformOrigin="0.5,0.5">

            <Ellipse.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Ellipse.RenderTransform>

            <Ellipse.OpacityMask>

                <RadialGradientBrush>

                    <GradientStop Color="#33FFFFFF" Offset="0.466"/>

                    <GradientStop Color="#FFFBFBFB" Offset="0.871"/>

                    <GradientStop Color="Transparent" Offset="1"/>

                    <GradientStop Color="#4EFFFFFF" Offset="0.778"/>

                    <GradientStop Color="#FFF1EDED" Offset="0.281"/>

                    <GradientStop Color="#19FFFFFF" Offset="0.003"/>

                </RadialGradientBrush>

            </Ellipse.OpacityMask>

        </Ellipse>

        <Grid Margin="-818,-99,0,-99" HorizontalAlignment="Left"

              Width="927" RenderTransformOrigin="1,0.5">

            <Path HorizontalAlignment="Right"

                  Data="{StaticResource KeyPathDataColorDescript}">

                <Path.Fill>

                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >

                        <GradientStop Color="{Binding Path=Fill}"/>

                        <GradientStop Color="Transparent" Offset="1"/>

                    </LinearGradientBrush>

                </Path.Fill>

            </Path>

            <Line Y2="418" StrokeThickness="25" StrokeDashArray="1 0.2">

                <Line.Stroke>

                    <LinearGradientBrush EndPoint="0.5,1.2" StartPoint="0.5,0">

                        <GradientStop Color="{Binding Path=Fill}" Offset="0"/>

                        <GradientStop Color="Transparent" Offset="1"/>

                    </LinearGradientBrush>

                </Line.Stroke>

            </Line>

            <Canvas Margin="21,0,206,0" >

                <Canvas.Background>

                    <SolidColorBrush Color="{Binding Path=Fill}" Opacity="0.3"/>

                </Canvas.Background>

            </Canvas>

        </Grid>

  <CombinedGeometry x:Key="KeyPathDataColorDescript" GeometryCombineMode="Exclude">

            <CombinedGeometry.Geometry1>

                <CombinedGeometry GeometryCombineMode="Intersect">

                    <CombinedGeometry.Geometry1>

                        <RectangleGeometry Rect="0,0,200,418">

                            <RectangleGeometry.Transform>

                                <TransformGroup>

                                    <ScaleTransform/>

                                    <SkewTransform AngleY="18"/>

                                    <RotateTransform />

                                    <TranslateTransform />

                                </TransformGroup>

                            </RectangleGeometry.Transform>

                        </RectangleGeometry>

                    </CombinedGeometry.Geometry1>

                    <CombinedGeometry.Geometry2>

                        <RectangleGeometry Rect="0,0,200,418">

                            <RectangleGeometry.Transform>

                                <TransformGroup>

                                    <ScaleTransform/>

                                    <SkewTransform AngleY="-18"/>

                                    <RotateTransform />

                                    <TranslateTransform />

                                </TransformGroup>

                            </RectangleGeometry.Transform>

                        </RectangleGeometry>

                    </CombinedGeometry.Geometry2>

                </CombinedGeometry>

            </CombinedGeometry.Geometry1>

            <CombinedGeometry.Geometry2>

                <EllipseGeometry RadiusX="145" RadiusY="145"

                                                 Center="195,209"/>

            </CombinedGeometry.Geometry2>

        </CombinedGeometry>