当鼠标在 wpf 中输入时设置椭圆描边（边框颜色）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32675814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set ellipse stroke(border color) when mouse enters it in wpf
提问by user1108069
Ellipse has a property called IsMouseOver, we can use it to set ellipse color, just like this postdoes. But in practice, when the mouse is overellipse, the stroke will be changed(image we draw ellipse as a circle), when the mouse is insidethe 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.
Ellipse 有一个叫做 IsMouseOver 的属性，我们可以用它来设置椭圆的颜色，就像这篇文章一样。但实际上，当鼠标在椭圆上时，笔触会发生变化（我们将椭圆画成圆形），当鼠标在椭圆（圆）内时，颜色会恢复到原始值。我知道 ellipse 有一个名为MouseEnter的事件，我们可以使用 EventTrigger，但在 EventTrigger 中只能设置 StoryBoard。
<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?
我想要的是当 MouseEnter 发生时，设置椭圆笔划；当 MouseLeave 发生时，将其设置回来。有谁有想法吗？
Thanks in advance!
提前致谢！
采纳答案by AnjumSKhan
Complete solution for a custom CheckBox :
自定义 CheckBox 的完整解决方案：
<Window x:Class="WpfControlTemplates.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="CustomChkBox" TargetType="CheckBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="90*" />
</Grid.ColumnDefinitions>
<Ellipse x:Name="checkButton" Grid.Column="0" Stroke="{TemplateBinding Property=BorderBrush}"></Ellipse>
<TextBlock x:Name="txtContent" Grid.Column="1" FontWeight="Bold" Foreground="{TemplateBinding Property=Foreground}" VerticalAlignment="Center" FontSize="14" HorizontalAlignment="Center" TextAlignment="Center">
<ContentPresenter />
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="checkButton" Property="Stroke" Value="Blue"/>
<Setter TargetName="checkButton" Property="Fill" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<CheckBox Template="{StaticResource CustomChkBox}" Width="100" Height="25" Foreground="Red" Content="Newsletters " Background="#FF16CF38" BorderBrush="#FF14C9C9"/>
</Grid>
</Window>
To change Ellipse Stroke properties using Storyboard :
要使用 Storyboard 更改 Ellipse Stroke 属性：
Trick is to set Stroke property differntly so that we can access it from StoryBoard. StoryBoard doesn't have any animation for Brush, but it does have one for Color.
技巧是设置不同的 Stroke 属性，以便我们可以从 StoryBoard 访问它。StoryBoard 没有任何用于 Brush 的动画，但它有一个用于 Color 的动画。
<Ellipse x:Name="checkButton" Grid.Column="1" StrokeThickness="5" Margin="82,0,61,0">
<Ellipse.Stroke>
<SolidColorBrush x:Name="StrokeColor" Color="Red"/>
</Ellipse.Stroke>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard x:Name="EllipseSB">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="StrokeThickness" To="10"/>
<ColorAnimation Storyboard.TargetName="StrokeColor" Storyboard.TargetProperty="Color" To="Blue"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<StopStoryboard BeginStoryboardName="EllipseSB"/>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
回答by faztp12
Try this :
尝试这个 ：
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="Red" TargetName="checkButton"/>
</Trigger>
</ControlTemplate.Triggers>
Hope it helps :)
希望能帮助到你 ：）
回答by Rohit
All I want is when MouseEnter happens, set ellipse stroke; when MouseLeave happens, set it back.
我想要的是当 MouseEnter 发生时，设置椭圆笔划；当 MouseLeave 发生时，将其设置回来。
There are few ways to do this
有几种方法可以做到这一点
using simple style triggers and setters
使用简单的样式触发器和设置器
<Ellipse Fill="White" StrokeThickness="10">
<Ellipse.Style>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="Stroke" Value="Red" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
using blend behavior (using blend SDK)
使用混合行为（使用混合 SDK）
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="grid">
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Height="100" Margin="109,116,0,0" Stroke="Black" VerticalAlignment="Top" Width="100">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction PropertyName="Stroke">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="Red"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction PropertyName="Stroke">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="Black"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Ellipse>
</Grid>
Don't forget to add references to Microsoft.Expressions.Interactionsand System.Windows.Interaactivity
不要忘记添加对Microsoft.Expressions.Interactions和的引用System.Windows.Interaactivity
It is pretty verbose if you do this in visual studio.But if you use Expresssion Blend trust me it's just only few clicks.
如果您在 Visual Studio 中执行此操作，则相当冗长。但如果您使用 Expresssion Blend，请相信我，只需单击几下即可。
回答by Sandesh
Here is one more solution
这是另一种解决方案
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="90*" />
</Grid.ColumnDefinitions>
<Ellipse x:Name="checkButton" Grid.Column="0" Stroke="Black" Fill="AliceBlue">
<Ellipse.Style>
<Style TargetType="{x:Type Ellipse}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0"
Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)"
To="Red" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<ColorAnimation Duration="0:0:0"
Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)"
To="Black"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<TextBlock x:Name="txtContent" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="14" HorizontalAlignment="Center" TextAlignment="Center">
<ContentPresenter />
</TextBlock>
</Grid>
