当鼠标进入wpf时，设置椭圆笔画(边框颜色)

本文关键字：笔画 边框 颜色 设置 鼠标 wpf | 更新日期: 2023-09-27 18:13:27

Ellipse有一个名为IsMouseOver的属性，我们可以用它来设置Ellipse的颜色，就像这篇文章一样。但在实际操作中，当鼠标在椭圆上时，笔触会发生变化(图中我们把椭圆画成圆)，当鼠标在椭圆(圆)内时，颜色恢复原值。我知道ellipse有一个事件叫做MouseEnter，我们可以使用EventTrigger，但是只有StoryBoard可以在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>

我想要的是当鼠标进入时，设置椭圆描边;当MouseLeave发生时，将其设置回来。有人知道吗?

提前感谢!

当鼠标进入wpf时，设置椭圆笔画(边框颜色)

自定义复选框的完整解决方案:

<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改变椭圆描边属性:

技巧是设置不同的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>

试试这个:

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

希望有帮助

还有一个解决方案

<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>

我想要的是当鼠标进入时，设置椭圆描边;当MouseLeave发生时，将其设置回来。

有几种方法可以做到这一点

使用简单的样式触发器和设置

  <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的引用

如果在visual studio中这样做，会非常冗长。但是如果你使用expression Blend，相信我，只需点击几下就可以了。

相关文章：