Search code examples
xmlwpfpathareaismouseover

Set IsMouseOver property for the entire control and not on the DrawingData


I am drawing a triangle using a Path, and the IsMouseOver property is true only if the mouse pointer is over the triangle. I would like it to be True also when the pointer is over the background of path (transparent). How can I obtain this result?

<!-- language: lang-xml -->
<Style TargetType="{x:Type Path}">
    <Setter Property="Stretch" Value="Uniform"/>
    <Setter Property="Fill" Value="#FF9C9C9C"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" Value="#FFBDBDBD"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect x:Name="DropShadowEffect" BlurRadius="12" Color="#FF9C9C9C" ShadowDepth="0"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

<Path Margin="6,0,0,0" StrokeThickness="0" Width="35" Height="17" Data="M0,0 L8,5, 0,10 Z"/>

Solution

  • Perhaps you have not asked the correct question? You showed your code (which works just fine) and said

    I would like [the IsMouseOver property to be] True also when the pointer is over the background of path

    The IsMouseOver property is true when you put the mouse over the centre (where the Background is) of the Path. However, your title says

    Set IsMouseOver property for the entire control and not on the DrawingData

    which is of course, something very different (and a good reason to read over your question before posting it). If you want to have the Path.Effect change when you put your mouse over the entire control then you simply have to write a Style that accesses that control instead. Again, you failed to let us know what type that control might be, so I'll just assume that it is a Window. Try this:

    <Style TargetType="{x:Type Path}">
        <Setter Property="Stretch" Value="Uniform"/>
        <Setter Property="Fill" Value="#FF9C9C9C"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource 
                AncestorType={x:Type Window}}}" Value="True">
                <Setter Property="Fill" Value="#FFBDBDBD"/>
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect x:Name="DropShadowEffect" BlurRadius="12" 
                            Color="#FF9C9C9C" ShadowDepth="0"/>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    

    If that is still not what you're after, then perhaps it would be an idea to be more specific about what you do want.


    UPDATE >>>

    Now that you've explained that the Path is in a Button, I can suggest that you simply add a Style for the Button to change the Cursor:

    <Style TargetType="{x:Type Button}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Cursor" Value="Hand" />
            </Trigger>
        </Style.Triggers>
    </Style>