使用Rectangle的OpacityMaskProperty制作带图标按钮不生效问题咨询

你的实现存在3个核心问题： #

• 没有给Rectangle设置Fill属性：OpacityMask的作用是基于蒙版的灰度值控制元素的可见透明度，本身Rectangle没有填充色的前提下，即使蒙版生效也不会显示任何内容，相当于给完全透明的对象加蒙版，自然看不到效果。
• 错误地在OpacityMask的Visual里设置Path的填充色：OpacityMask只会读取Visual的亮度信息，所有颜色属性都会被忽略，你写的{DynamicResource RedBrush}在这里完全不会生效。
• 直接在Style的Content Setter里放UI元素会引发复用异常：该Rectangle只会被实例化一次，如果你有多个按钮引用这个样式，会抛出「元素已是其他元素的逻辑子元素」的报错。

修正后的样式代码如下： #

<Style x:Key="CancelButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
    <!-- 改用ContentTemplate，保证每个按钮使用时生成新的实例 -->
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <!-- 给Rectangle设置Fill，要红色就直接填Red或者你定义的RedBrush -->
                <Rectangle Fill="{DynamicResource RedBrush}" Width="24" Height="24">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill">
                            <VisualBrush.Visual>
                                <Canvas Width="76.0106" Height="76.0106" Clip="F1 M 0,0L 76.0106,0L 76.0106,76.0106L 0,76.0106L 0,0">
                                    <!-- 这里Path的Fill随便填，只要不是完全透明就行，OpacityMask只认亮度 -->
                                    <Path Width="34.8358" Height="32.9005" Canvas.Left="20.5862" Canvas.Top="20.5864" Stretch="Fill" Fill="Black" Data="F1 M 25.3362,20.5864L 25.3348,29.2137C 28.5107,25.8499 33.0116,23.7507 38.0029,23.7507C 47.6232,23.7507 55.422,31.5494 55.422,41.1698C 55.422,45.9799 53.4723,50.3347 50.32,53.4869L 46.401,49.5679C 48.5503,47.4187 49.8796,44.4495 49.8796,41.1699C 49.8796,34.6106 44.5623,29.2932 38.003,29.2932C 34.4855,29.2932 31.3251,30.8224 29.1504,33.2522L 38.0029,33.2531L 33.2529,38.0031L 20.5862,38.0031L 20.5862,25.3364L 25.3362,20.5864 Z "/>
                                </Canvas>
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

额外优化建议 #

其实你完全不需要用Rectangle加OpacityMask的方式实现，直接把Path作为内容放到模板里即可，写法更简单性能也更好：

<Style x:Key="CancelButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Path Width="24" Height="24" Stretch="Uniform" Fill="{DynamicResource RedBrush}" 
                      Data="F1 M 25.3362,20.5864L 25.3348,29.2137C 28.5107,25.8499 33.0116,23.7507 38.0029,23.7507C 47.6232,23.7507 55.422,31.5494 55.422,41.1698C 55.422,45.9799 53.4723,50.3347 50.32,53.4869L 46.401,49.5679C 48.5503,47.4187 49.8796,44.4495 49.8796,41.1699C 49.8796,34.6106 44.5623,29.2932 38.003,29.2932C 34.4855,29.2932 31.3251,30.8224 29.1504,33.2522L 38.0029,33.2531L 33.2529,38.0031L 20.5862,38.0031L 20.5862,25.3364L 25.3362,20.5864 Z "/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

内容的提问来源于stack exchange，提问作者Харламов Даниил