不同颜色的 WPF 路径几何样式

Question

我使用路径几何图形组构建一个几何图形来替换 WPF 中的按钮：

<UserControl.Resources>

    <ControlTemplate x:Key="bT" TargetType="Button">

        <Path StrokeThickness="1.5" >
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="7,7" RadiusX="7" RadiusY="7" />
                    <LineGeometry StartPoint="4,4" EndPoint="10,10" />
                    <LineGeometry StartPoint="10,4" EndPoint="4,10" />
                </GeometryGroup>
            </Path.Data>

            <Path.Style>

                <Style TargetType="{x:Type Path}">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Stroke" Value="LightGray" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Stroke" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>

        </Path>
    </ControlTemplate>

</UserControl.Resources>

Button 的实现类似于

<Button Template="{StaticResource ResourceKey=bT}" />

现在我的问题是我不能用不同的颜色设计我的几何图形。例如，我想要我的 EllipseGeometry 与我的 LineGeometries 有不同的行为。有办法吗？

Answer 1

您可以在 ControlTemplate 中有多个命名路径，将 IsMouseOver 触发器移动到 ControlTemplate.Triggers 并在设置器中使用 TargetName。另请注意，ControlTemplate 中的所有路径都有一个默认样式。

<ControlTemplate TargetType="Button" x:Key="bT">
    <ControlTemplate.Resources>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Transparent"/>
            <Setter Property="Stroke" Value="LightGray"/>
            <Setter Property="StrokeThickness" Value="1.5"/>
        </Style>
    </ControlTemplate.Resources>

    <Canvas>
        <Path x:Name="circle">
            <Path.Data>
                <EllipseGeometry Center="7,7" RadiusX="7" RadiusY="7"/>
            </Path.Data>
        </Path>
        <Path x:Name="cross">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry StartPoint="4,4" EndPoint="10,10"/>
                    <LineGeometry StartPoint="10,4" EndPoint="4,10"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="circle" Property="Stroke" Value="Red"/>
            <Setter TargetName="cross" Property="Stroke" Value="Green"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

cross路径也可以使用Path Markup Syntax写得更短：

<Path x:Name="cross" Data="M4,4 L10,10 M4,10 L10,4"/>

不同颜色的 WPF 路径几何样式

WPF Path Geometry Style in different colors

c#

wpf

geometry

button

controltemplate