WPF 在 MouseOver 上更改路径填充答案

【问题标题】：WPF Change Path Fill on MouseOverWPF 在 MouseOver 上更改路径填充
【发布时间】：2017-02-24 00:38:40
【问题描述】：

我正在尝试在 MouseOver 上将 Path Fill="#ff147f2e" 更改为较浅的颜色并撞到墙上。我只是不知道如何参数化这个特定的填充颜色。任何想法或指示。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:Controller.Resources.Buttons">
    <Style x:Key="PowerButton" TargetType="{x:Type Button}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">                       
                    <Grid>                        
                        <!-- Layer 1/<Group>/<Group>/<Group>/<Path> -->
                        <Path Fill="#ff147f2e" Data="F1 M 104.825,50.080 C 104.825,77.693 82.440,100.078 54.826,100.078 C 27.213,100.078 4.825,77.693 4.825,50.080 C 4.825,22.466 27.213,0.081 54.826,0.081 C 82.440,0.081 104.825,22.466 104.825,50.080 Z"/>
                        <!-- Layer 1/<Group>/<Compound Path> -->
                        <Path Fill="#ffe5e5e5" Data="F1 M 55.146,74.711 C 41.972,74.711 31.256,63.993 31.256,50.821 C 31.256,42.275 35.873,34.323 43.305,30.073 C 44.939,29.139 47.022,29.706 47.958,31.340 C 48.893,32.974 48.325,35.057 46.691,35.992 C 41.375,39.032 38.074,44.713 38.074,50.821 C 38.074,60.234 45.733,67.893 55.146,67.893 C 64.559,67.893 72.218,60.234 72.218,50.821 C 72.218,44.713 68.916,39.032 63.600,35.992 C 61.966,35.058 61.398,32.975 62.333,31.340 C 63.269,29.705 65.350,29.138 66.986,30.073 C 74.420,34.323 79.036,42.272 79.036,50.821 C 79.036,63.993 68.320,74.711 55.146,74.711 Z M 51.737,24.895 C 51.737,23.012 53.263,21.486 55.146,21.486 C 57.029,21.486 58.555,23.012 58.555,24.895 L 58.555,48.370 C 58.555,50.253 57.029,51.779 55.146,51.779 C 53.263,51.779 51.737,50.253 51.737,48.370 L 51.737,24.895 Z M 55.146,16.008 C 36.498,16.008 21.380,31.125 21.380,49.773 C 21.380,68.421 36.496,83.538 55.146,83.538 C 73.795,83.538 88.912,68.420 88.912,49.772 C 88.912,31.124 73.795,16.008 55.146,16.008 Z"/>                          
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

使用 IsMouseOver 触发器：

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="NameOfPath" Property="Fill" Value="Colour" />
    </Trigger>
</ControlTemplate.Triggers>

你需要命名你的路径（例如<Path x:Name="NameOfPath" />）并用适当的颜色替换

【讨论】：

感谢您让我走上正确的道路。效果很好。
很高兴听到这个消息！那么考虑将其标记为答案吗？

【解决方案2】：

这是最终代码，以备其他人需要学习时使用

    <Style x:Key="PowerButton" TargetType="{x:Type Button}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">

                    <Grid>

                        <!-- <Path> -->
                        <Path x:Name="Power" Fill="#FF147D2E" Data="F1 M 104.825,50.080 C 104.825,77.693 82.440,100.078 54.826,100.078 C 27.213,100.078 4.825,77.693 4.825,50.080 C 4.825,22.466 27.213,0.081 54.826,0.081 C 82.440,0.081 104.825,22.466 104.825,50.080 Z"/>

                        <!-- <Compound Path> -->
                        <Path Fill="White" Data="F1 M 55.146,74.711 C 41.972,74.711 31.256,63.993 31.256,50.821 C 31.256,42.275 35.873,34.323 43.305,30.073 C 44.939,29.139 47.022,29.706 47.958,31.340 C 48.893,32.974 48.325,35.057 46.691,35.992 C 41.375,39.032 38.074,44.713 38.074,50.821 C 38.074,60.234 45.733,67.893 55.146,67.893 C 64.559,67.893 72.218,60.234 72.218,50.821 C 72.218,44.713 68.916,39.032 63.600,35.992 C 61.966,35.058 61.398,32.975 62.333,31.340 C 63.269,29.705 65.350,29.138 66.986,30.073 C 74.420,34.323 79.036,42.272 79.036,50.821 C 79.036,63.993 68.320,74.711 55.146,74.711 Z M 51.737,24.895 C 51.737,23.012 53.263,21.486 55.146,21.486 C 57.029,21.486 58.555,23.012 58.555,24.895 L 58.555,48.370 C 58.555,50.253 57.029,51.779 55.146,51.779 C 53.263,51.779 51.737,50.253 51.737,48.370 L 51.737,24.895 Z M 55.146,16.008 C 36.498,16.008 21.380,31.125 21.380,49.773 C 21.380,68.421 36.496,83.538 55.146,83.538 C 73.795,83.538 88.912,68.420 88.912,49.772 C 88.912,31.124 73.795,16.008 55.146,16.008 Z"/>

                    </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Power" Property="Fill" Value="#FF00B400" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【讨论】：

【解决方案3】：

试试这个：

            <Style x:Key="PowerButton" TargetType="{x:Type Button}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">

                        <Grid>
                            <!-- Layer 1/<Group>/<Group>/<Group>/<Path> -->
                            <Path Name="PowerButtonPath" Fill="#ff147f2e" Data="F1 M 104.825,50.080 C 104.825,77.693 82.440,100.078 54.826,100.078 C 27.213,100.078 4.825,77.693 4.825,50.080 C 4.825,22.466 27.213,0.081 54.826,0.081 C 82.440,0.081 104.825,22.466 104.825,50.080 Z"/>
                            <!-- Layer 1/<Group>/<Compound Path> -->
                            <Path Fill="#ffe5e5e5" Data="F1 M 55.146,74.711 C 41.972,74.711 31.256,63.993 31.256,50.821 C 31.256,42.275 35.873,34.323 43.305,30.073 C 44.939,29.139 47.022,29.706 47.958,31.340 C 48.893,32.974 48.325,35.057 46.691,35.992 C 41.375,39.032 38.074,44.713 38.074,50.821 C 38.074,60.234 45.733,67.893 55.146,67.893 C 64.559,67.893 72.218,60.234 72.218,50.821 C 72.218,44.713 68.916,39.032 63.600,35.992 C 61.966,35.058 61.398,32.975 62.333,31.340 C 63.269,29.705 65.350,29.138 66.986,30.073 C 74.420,34.323 79.036,42.272 79.036,50.821 C 79.036,63.993 68.320,74.711 55.146,74.711 Z M 51.737,24.895 C 51.737,23.012 53.263,21.486 55.146,21.486 C 57.029,21.486 58.555,23.012 58.555,24.895 L 58.555,48.370 C 58.555,50.253 57.029,51.779 55.146,51.779 C 53.263,51.779 51.737,50.253 51.737,48.370 L 51.737,24.895 Z M 55.146,16.008 C 36.498,16.008 21.380,31.125 21.380,49.773 C 21.380,68.421 36.496,83.538 55.146,83.538 C 73.795,83.538 88.912,68.420 88.912,49.772 C 88.912,31.124 73.795,16.008 55.146,16.008 Z"/>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="True">
                                <Setter TargetName="PowerButtonPath" Property="Opacity" Value=".75" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="PowerButtonPath" Property="Opacity" Value=".35" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsMouseOver" Value="True">
                                <Setter Property="Path.Fill" TargetName="PowerButtonPath" Value="Red" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                                <Setter Property="Path.Fill" TargetName="PowerButtonPath" Value="Yellow" />
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

调用按钮：

                <Button Style="{StaticResource PowerButton}" />

只需将鼠标悬停并按下即可根据需要设置红色和黄色的填充值。不透明度只是一个例子，我在我的原始按钮中使用了它们并留下了它们。

【讨论】：