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!
Try this :
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="Red" TargetName="checkButton"/>
</Trigger>
</ControlTemplate.Triggers>
Hope it helps :)