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

Question

我使用路径几何组来构建替换WPF中的Button的几何：

<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 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 x:Name="cross" Data="M4,4 L10,10 M4,10 L10,4"/>