set ellipse stroke(border color) when mouse enters it in wpf

user1108069 picture user1108069 · Sep 20, 2015 · Viewed 9.2k times · Source

Ellipse has a property called IsMouseOver, we can use it to set ellipse color, just like this post does. But in practice, when the mouse is over ellipse, the stroke will be changed(image we draw ellipse as a circle), when the mouse is inside the ellipse(circle), the color backs to original value. I know ellipse has an event called MouseEnter, we can use EventTrigger, but only StoryBoard can be set in EventTrigger.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10*" />
        <ColumnDefinition Width="90*" />
    </Grid.ColumnDefinitions>
    <Ellipse x:Name="checkButton" Grid.Column="0" Stroke="Black"></Ellipse>
    <TextBlock x:Name="txtContent" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="14" HorizontalAlignment="Center" TextAlignment="Center">
        <ContentPresenter />
    </TextBlock>
</Grid>
<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard></BeginStoryboard>
        // something like <Setter Property="Stroke" Value="Red" /> here
    </EventTrigger>
</ControlTemplate.Triggers>

All I want is when MouseEnter happens, set ellipse stroke; when MouseLeave happens, set it back. Does anyone have any idea?

Thanks in advance!

Answer

faztp12 picture faztp12 · Sep 20, 2015

Try this :

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Stroke" Value="Red" TargetName="checkButton"/>
    </Trigger>
</ControlTemplate.Triggers>

Hope it helps :)