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並在Setter中使用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"/>