在MouseOver上更改用作按钮模板的路径的填充颜色

时间:2015-04-08 21:25:43

标签: wpf xaml styles controltemplate

我有一个设置Template设置的按钮,以显示Path包裹的VisualBrushPath已分配Fill,但我希望在按下鼠标时更改Fill颜色。

Visual Brush

<VisualBrush x:Key="EditIconBrush" Stretch="Uniform">
    <VisualBrush.Visual>
        <Canvas Width="24" Height="24">
            <Path Fill="White" Data="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" />
        </Canvas>
    </VisualBrush.Visual>
</VisualBrush>

按钮模板

<ControlTemplate x:Key="ButtonIconTemplate" 
                 TargetType="Button">
    <Grid>
        <Rectangle Fill="Transparent" />
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    </Grid>
</ControlTemplate>

<Button DockPanel.Dock="Right" Margin="0 0 10 0" 
        Command="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=DataContext.AddFieldCommand}"
        Template="{StaticResource ButtonIconTemplate}">                                        
    <Rectangle Width="20" Height="20" Fill="{DynamicResource EditIconBrush}" />
</Button>

我是否需要两个不同版本的Path,每种颜色一个?或者这可以通过风格实现吗?我希望在鼠标悬停时增加路径的大小并将其颜色从灰色变为白色,然后减小尺寸,并在鼠标离开时将颜色从白色更改为灰色。

我尝试将Path的{​​{1}}属性绑定到Fill的{​​{1}}属性,使用Button作为recommend in another post。我基本上想要达到该线程中原始海报所需的相同概念。不同之处在于我的Path位于资源字典中,而不属于我的Foreground本身。

绑定到前景尝试

RelativePath

我不确定如何解决此问题。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

使用IsMouseOver触发器:

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="NameOfPath" Property="Fill" Value="Colour" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="2" ScaleY="2" />
            </Setter.Value>
        </Setter>
        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
    </Trigger>
</ControlTemplate.Triggers>

您需要为路径命名(例如<Path x:Name="NameOfPath" />),并使用适当的颜色替换正确的颜色以使用RenderTransform比例