CODEWITHSUNDEEP
c#wpfxaml
Eric Jones
Eric Jones

Reputation: 53

WPF Change Path Fill on MouseOver

I am trying to change the Path Fill="#ff147f2e" to a lighter color on MouseOver and hit a wall. I just can not figure out how to parameterize this specific fill color. Any thoughts or pointers.

<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>

Upvotes: 3

Views: 4177

Answers (3)

Eric Jones
Eric Jones

Reputation: 53

Here is the final code in the event anyone else needs to learn this

    <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>

Upvotes: 2

Wayne
Wayne

Reputation: 82

Try this:

            <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>

Call the button with:

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

Just set the fill values of red and yellow for what ever you need in mouse over and pressed. The Opacity is just an example, I used them in my origonal button and left those.

Upvotes: -1

Dmihawk
Dmihawk

Reputation: 589

Use the IsMouseOver trigger:

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

You'll need to name your paths (e.g. <Path x:Name="NameOfPath" />) and substitute the appropriate colour in

Upvotes: 6

Related Questions