当鼠标在 wpf 中输入时设置椭圆描边(边框颜色)
set ellipse stroke(border color) when mouse enters it in wpf
Ellipse有一个属性叫做IsMouseOver,我们可以用它来设置椭圆的颜色,就像this post一样。
但实际上,当鼠标在上椭圆时,笔画会发生变化(图像我们画椭圆作为一个圆),当鼠标在里面 椭圆(圆),颜色恢复原值。
我知道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>
我想要的只是当MouseEnter发生时,设置椭圆描边;当 MouseLeave 发生时,将其设置回去。
有人有什么主意吗?
提前致谢!
试试这个:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="Red" TargetName="checkButton"/>
</Trigger>
</ControlTemplate.Triggers>
希望对您有所帮助:)
All I want is when MouseEnter happens, set ellipse stroke; when MouseLeave happens, set it back.
有几种方法可以做到这一点
使用简单风格的触发器和设置器
<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>
使用混合行为(使用混合 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>
不要忘记添加对 Microsoft.Expressions.Interactions
和 System.Windows.Interaactivity
的引用
如果你在视觉上这样做会非常冗长studio.But如果你使用 Expresssion Blend 相信我,只需点击几下。
自定义复选框的完整解决方案:
<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>
使用 Storyboard 更改 Ellipse Stroke 属性:
技巧是设置 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>
这是另一种解决方案
<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>
Ellipse有一个属性叫做IsMouseOver,我们可以用它来设置椭圆的颜色,就像this post一样。 但实际上,当鼠标在上椭圆时,笔画会发生变化(图像我们画椭圆作为一个圆),当鼠标在里面 椭圆(圆),颜色恢复原值。 我知道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>
我想要的只是当MouseEnter发生时,设置椭圆描边;当 MouseLeave 发生时,将其设置回去。 有人有什么主意吗?
提前致谢!
试试这个:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="Red" TargetName="checkButton"/>
</Trigger>
</ControlTemplate.Triggers>
希望对您有所帮助:)
All I want is when MouseEnter happens, set ellipse stroke; when MouseLeave happens, set it back.
有几种方法可以做到这一点
使用简单风格的触发器和设置器
<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>
使用混合行为(使用混合 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>
不要忘记添加对 Microsoft.Expressions.Interactions
和 System.Windows.Interaactivity
如果你在视觉上这样做会非常冗长studio.But如果你使用 Expresssion Blend 相信我,只需点击几下。
自定义复选框的完整解决方案:
<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>
使用 Storyboard 更改 Ellipse Stroke 属性:
技巧是设置 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>
这是另一种解决方案
<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>