Définir le trait elliptique (couleur de la bordure) lorsque la souris y entre en wpf

Question

Ellipse possède une propriété appelée IsMouseOver, que nous pouvons utiliser pour définir la couleur de l'ellipse, tout comme le fait this post. Mais en pratique, lorsque la souris est sur ellipse, le trait sera changé (l'image que nous dessinons ellipse comme un cercle), lorsque la souris est à l'intérieur de l'ellipse (cercle), la couleur revient à la valeur d'origine. Je sais ellipse a un événement appelé MouseEnter, nous pouvons utiliser EventTrigger, mais seulement StoryBoard peut être défini dans 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> 

Tout ce que je veux, c'est que MouseEnter se produise, régler le contour de l'ellipse; lorsque MouseLeave se produit, réglez-le. Est-ce que quelqu'un a une idée?

Merci d'avance!

Answer 1

solution complète pour un CheckBox personnalisé:

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

Pour modifier les propriétés d'un AVC Ellipse utilisant Storyboard:

Trick est de définir la propriété Stroke differntly afin que nous puissions accéder à partir storyboard. StoryBoard n'a pas d'animation pour Brush, mais il en a une pour 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> 

Answer 2

Essayez ceci:

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

Hope it helps :)

Answer 3

Tout ce que je veux est quand MouseEnter arrive, réglez la course ellipse; lorsque MouseLeave se produit, réglez-le.

Il y a peu de façons de le faire

utilisant des déclencheurs de style simple et 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> 

utilisant le comportement de mélange (en utilisant le SDK de mélange)

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

Ne pas oublier d'ajouter des références à Microsoft.Expressions.Interactions et System.Windows.Interaactivity

Il est assez bavard si vous faites cela dans studio.But visuel si vous utilisez expresssion Blend croyez-moi c'est juste que quelques clics.

Answer 4

Voici une solution plus

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