Modifier le style de la bordure environnante sur la souris sur

Question

J'ai un Grid avec un Border autour d'elle. Sur la souris sur le Grid, je veux changer le style sur le Border. Comment ferais-je cela? Voilà ce que j'ai essayé, sans succès jusqu'à présent:

<Border Name="Border" BorderBrush="Transparent" BorderThickness="1" CornerRadius="2"> 
    <Grid> 
     <Grid.Style> 
      <Style TargetType="{x:Type Grid}"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Border" Property="BorderBrush" Value="#FFB9D7FC" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Grid.Style> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 

     ... 
    </Grid> 
</Border> 

Lors de la tentative de construire ce XAML, je reçois l'erreur

propriété TargetName ne peut pas être sur un Setter Style.

mais je ne peux pas penser à un autre moyen de le faire. L'aide serait très appréciée. Utiliser n'importe quel code-behind est hors de question.

Answer 1

Vous devez faire ce qui suit:

1. Retirez le BorderBrush de la définition des frontières. Les déclencheurs peuvent remplacer les propriétés définies par les setters dans les styles, mais pas les propriétés définies directement dans la balise. Placez le déclencheur dans la bordure plutôt que dans la grille (voir les exemples fournis par les autres).

2. En ce qui concerne le test de recherche sur la grille: Mettre une boîte transparente derrière la grille de sorte que MouseOver est toujours capturé:

Exemple de code pour le point 3:

<Grid> 
    <Rectangle Fill="Transparent" /><!-- make sure that the mouse is always over "something" --> 
    <Grid Name="myGrid">  
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <TextBlock Name="myText">sadasdsa</TextBlock> 
    </Grid> 
</Grid> 

Answer 2

Merde, c'était difficile.

1. Abandonnez la bordure transparente. Il semble se combiner avec la brosse colorée, vous empêchant de voir la frontière.
2. Vous pouvez avoir le déclencheur directement sur la bordure elle-même.

3. Si vous souhaitez que le déclenchement se fasse uniquement sur la grille, vous pouvez utiliser PyBinding pour l'attacher au bon contrôle. (Je ne sais pas comment faire cela sans PyBinding.)

   <Border Name="myBorder" Margin="4" BorderThickness="4" CornerRadius="2"> 
       <Border.Style> 
          <Style TargetType="{x:Type Border}"> 
          <Style.Triggers> 
          <!-- option 1 --> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="BorderBrush" Value="#FFB9D7FC" /> 
          </Trigger> 
          <!-- option 2 --> 
           <DataTrigger Binding="{p:PyBinding $[myBorder.IsMouseOver]}" Value="True"> 
           <Setter Property="BorderBrush" Value="#FFB9D7FC" /> 
          </DataTrigger> 
         </Style.Triggers> 
         </Style> 
       </Border.Style> 
       <Grid Name="myGrid">  
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Name="myText">sadasdsa</TextBlock> 
       </Grid> 
   </Border> 
   

Answer 3

Définissez les déclencheurs directement sur l'objet Border. En outre, ne pas régler la BorderBrush sur l'objet Border, mais également définir avec la gâchette:

<Border.Style> 
     <Style TargetType="{x:Type Border}"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Border.BorderBrush" Value="Yellow" /> 
       </Trigger> 
       <Trigger Property="IsMouseOver" Value="False"> 
        <Setter Property="Border.BorderBrush" Value="Black" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Border.Style> 

En outre, si vous éprouvez des difficultés à voir ce que les déclencheurs sont à, vérifier comment déboguer déclencheurs here. Peut être très utile.
Espérons que cela aide.

Answer 4

Que pensez-vous de cela?

<Border BorderThickness="1" CornerRadius="2"> 
     <Border.Style> 
      <Style TargetType="{x:Type Border}"> 
       <Setter Property="BorderBrush" Value="Transparent" /> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="BorderBrush" Value="#FFB9D7FC" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Border.Style> 

     <Grid Background="Transparent"> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 

      <TextBlock Name="myText">sadasdsa</TextBlock> 
     </Grid> 

    </Border>