在ContentPresenter中应用样式到Path（BasedOn不起作用！）

Question

我无法将鼠标悬停样式应用于ContentPresenter内部的Path。

我有一个包含ContentPresenter的按钮样式：

<Style x:Key="ContentButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <ContentPresenter
                x:Name="contentPresenter"
                Content="{TemplateBinding Content}">
                    <ContentPresenter.Resources>
                    <Style TargetType="{x:Type Path}"
                        BasedOn="{StaticResource ContentButtonPathStyle}"/>
                    </ContentPresenter.Resources>
                </ContentPresenter>

这是一种样式，可以在路径上实现鼠标悬停效果：

<Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" Value="#FF00FF10"/>
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeThickness" Value="6"/>
        </Trigger>
    </Style.Triggers>
    <Setter Property="Stroke" Value="Red"/>
    <Setter Property="Fill">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB4B3E7" Offset="0"/>
                <GradientStop Color="#FF0800FF" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

我还有一个图标资源文件，其中包含一个带有Viewbox的路径：

<Viewbox x:Key="MyIcon">
    <Grid>
        <Path Data="M78,296 L37.5,306.5 45.5,354.5 123.5,343.5 z" />
    </Grid>
</Viewbox>

最后，我创建一个按钮并将Viewbox资源分配给内容：

<Button Style="{DynamicResource ContentButton}">
    <ContentPresenter Content="{DynamicResource MyIcon}"/>
</Button>

使用“BasedOn”来为ContentPresenter的内容设置样式是我在这里发现的一种技巧：http://social.msdn.microsoft.com/forums/en-US/wpf/thread/412b1747-60e9-4b9a-8f8f-bd56f3aff875/。然而，这对我不起作用……我花了很多时间来尝试解决这个问题！有什么想法吗？谢谢！

---

好的，基于Mackho的出色回答，这是我的最终XAML。我还添加了一个DataTrigger来处理IsPressed，效果很棒！希望能帮助到其他人……首先是样式：

<Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource=
                {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True">
                <Setter Property="Fill" Value="Yellow"/>
                <Setter Property="Stroke" Value="Blue"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource=
                {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsPressed}" Value="True">
                <Setter Property="Fill" Value="Red"/>
                <Setter Property="Stroke" Value="Black"/>
            </DataTrigger>
        </Style.Triggers>
        <Setter Property="Fill" Value="Green"/>
        <Setter Property="Stroke" Value="Red"/>
    </Style>

下一步，是图标本身：

<Viewbox Stretch="Fill" x:Shared="False" x:Key="MyIcon">
        <Path StrokeThickness="6" Data="M160.26077,0.5 L196.5,36.739223 232.73923,0.5 251.12399,18.884777 214.88478,55.124001 251.12399,91.363222 232.73923,109.748 196.5,73.508779 160.26077,109.748 141.87601,91.363222 178.11522,55.124001 141.87601,18.884777 z" Stretch="Fill"/>
    </Viewbox>

然后，模板如下：

<Style x:Key="ContentButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ControlTemplate.Resources>
                        <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/>
                    </ControlTemplate.Resources>
                    <Grid  Background="Transparent"><ContentPresenter /></Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

最后，让我们放置几个使用模板和样式的按钮：

<Grid>
    <Button Style="{DynamicResource ContentButton}" HorizontalAlignment="Left" Width="128" Height="128" VerticalAlignment="Top" Margin="85.5,87,0,0">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
    <Button Style="{DynamicResource ContentButton}" Height="64" VerticalAlignment="Top" Margin="0,87,204.5,0" HorizontalAlignment="Right" Width="64">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
    <Button Style="{DynamicResource ContentButton}" Height="96" VerticalAlignment="Bottom" Margin="234,0,0,66.5" HorizontalAlignment="Left" Width="96">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
    <Button Style="{DynamicResource ContentButton}" Height="32" VerticalAlignment="Bottom" Margin="0,0,138.5,130.5" HorizontalAlignment="Right" Width="32">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
</Grid>

- user1084857

Answer 1

问题不在于“BasedOn”，您可以定义整个样式，而不是使用BasedOn，它仍然无法工作。您只需要将自己的样式移动到ControlTemplate资源中，就一定能够正常工作。

        <Style x:Key="ContentButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/>
                        </ControlTemplate.Resources>
                        <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}">
                        </ContentPresenter>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

坦白说，我不知道为什么它不能在ContentPresenter资源中工作 :)

编辑

如果您想根据按钮鼠标悬停更改路径样式，则需要将鼠标悬停属性绑定到按钮上，并将样式移动到路径集合内，请参见下面。

        <Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource=
                    {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True">
                    <Setter Property="Fill" Value="#FF00FF10"/>
                    <Setter Property="Stroke" Value="Red"/>
                    <Setter Property="StrokeThickness" Value="6"/>
                </DataTrigger>
            </Style.Triggers>
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFB4B3E7" Offset="0"/>
                        <GradientStop Color="#FF0800FF" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>


        <Style x:Key="ContentButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ContentPresenter x:Name="contentPresenter" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <Viewbox x:Key="MyIcon">
            <Grid Background="Transparent">
                <Grid.Resources>
                    <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/>
                </Grid.Resources>
                <Path Data="M78,296 L37.5,306.5 45.5,354.5 123.5,343.5 z" />
            </Grid>
        </Viewbox>

请注意，如果只是基于另一种样式并未进行任何修改是毫无意义的。您可以使用以下方法：

<Path Style="{StaticResource ContentButtonPathStyle}" Data="...." />

希望这能有所帮助。

- MaRuf

---

+1，这绝对有效！顺便说一下，另一个解决方案是将Viewbox包装在DataTemplate中，并将其分配给按钮的ContentTemplate。我也不确定为什么绑定内容不起作用。:( - Justin XL

使用<ControlTemplate.Resources>对我有用！还有一个问题：现在，鼠标悬停只在路径本身上起作用...而不是视图框/按钮！因此，当鼠标触及路径的某些部分时，我的鼠标悬停会闪烁。是否有一种方法可以使鼠标悬停效果在鼠标滚动到按钮上时发生，而不仅仅是路径？谢谢！ - user1084857