WPF自定义样式ToggleButton如何通过两种路径标记语法实现状态变色

你不需要完全合并所有Path，只需要把同属一类的Path合并为两个独立对象，分别对应主体和顶部蓝色条，再通过控件模板触发器控制颜色即可，具体实现如下：

步骤1：优化Path结构，消除冗余代码 #

你现有代码中4个Path两两Data重复，可合并为2个Path，方便统一管理颜色：

<Canvas Width="180" Height="180" Canvas.Left="0" Canvas.Top="0" HorizontalAlignment="Center" VerticalAlignment="Top">
    <!-- 主体部分 合并两个Path的Geometry -->
    <Path x:Name="MainPath" Stretch="Fill" StrokeLineJoin="Miter" Stroke="#FFB5BECB">
        <Path.Fill>
            <DrawingBrush>
                <DrawingGroup>
                    <GeometryDrawing Brush="#FFEDF2F7" Geometry="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z"/>
                    <GeometryDrawing Brush="#FFCDD5DE" Geometry="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z "/>
                </DrawingGroup>
            </DrawingBrush>
        </Path.Fill>
    </Path>
    <!-- 顶部蓝色条 合并两个Path的Geometry -->
    <Path x:Name="TopBarPath" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Miter" Stroke="#FF6F9FFF">
        <Path.Fill>
            <DrawingBrush>
                <DrawingGroup>
                    <GeometryDrawing Brush="#FF6F9FFF" Geometry="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z "/>
                    <GeometryDrawing Brush="#FF13487E" Geometry="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z"/>
                </DrawingGroup>
            </DrawingBrush>
        </Path.Fill>
    </Path>
</Canvas>

如果你不想修改现有Path结构，也可以给前两个主体Path分别命名，后两个顶部条Path分别命名，触发器里给同组Path设置相同颜色值，也能实现同步变色效果。

步骤2：添加触发器实现Hover变色 #

把上面的Canvas放到ToggleButton的ControlTemplate里，添加IsMouseOver触发器即可：

<Style x:Key="CustomToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="Transparent">
                    <!-- 上面优化后的Canvas代码 -->
                    <Canvas Width="180" Height="180" HorizontalAlignment="Center" VerticalAlignment="Top">
                        <Path x:Name="MainPath" Stretch="Fill" StrokeLineJoin="Miter" Stroke="#FFB5BECB">
                            <Path.Fill>
                                <DrawingBrush>
                                    <DrawingGroup>
                                        <GeometryDrawing Brush="#FFEDF2F7" Geometry="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z"/>
                                        <GeometryDrawing Brush="#FFCDD5DE" Geometry="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z "/>
                                    </DrawingGroup>
                                </DrawingBrush>
                            </Path.Fill>
                        </Path>
                        <Path x:Name="TopBarPath" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Miter" Stroke="#FF6F9FFF">
                            <Path.Fill>
                                <DrawingBrush>
                                    <DrawingGroup>
                                        <GeometryDrawing Brush="#FF6F9FFF" Geometry="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z "/>
                                        <GeometryDrawing Brush="#FF13487E" Geometry="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z"/>
                                    </DrawingGroup>
                                </DrawingBrush>
                            </Path.Fill>
                        </Path>
                    </Canvas>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!-- 可自定义Hover状态下主体颜色 -->
                        <Setter TargetName="MainPath" Property="Stroke" Value="#FF8A94A2"/>
                        <Setter TargetName="MainPath" Property="Fill">
                            <Setter.Value>
                                <DrawingBrush>
                                    <DrawingGroup>
                                        <GeometryDrawing Brush="#FFE2E8EF" Geometry="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z"/>
                                        <GeometryDrawing Brush="#FFBCC4CD" Geometry="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z "/>
                                    </DrawingGroup>
                                </DrawingBrush>
                            </Setter.Value>
                        </Setter>
                        <!-- 可自定义Hover状态下顶部条颜色 -->
                        <Setter TargetName="TopBarPath" Property="Stroke" Value="#FF4D7AFF"/>
                        <Setter TargetName="TopBarPath" Property="Fill">
                            <Setter.Value>
                                <DrawingBrush>
                                    <DrawingGroup>
                                        <GeometryDrawing Brush="#FF4D7AFF" Geometry="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z "/>
                                        <GeometryDrawing Brush="#FF0D365F" Geometry="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z"/>
                                    </DrawingGroup>
                                </DrawingBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果需要配置选中状态的颜色，也可以按照相同逻辑添加IsChecked属性的触发器。

效果参考 #

内容的提问来源于stack exchange，提问作者Richard