Modifier la propriété de contrôle enfant (contentcontrol) au passage de la souris du parent

Je suis nouveau à WPF et ne suis pas en mesure de comprendre comment modifier la propriété de l'enfant ContentControl du contrôle Button sur le survol de la souris. Mon code ressemble à ceci:Modifier la propriété de contrôle enfant (contentcontrol) au passage de la souris du parent

<Button x:Name="btnAddItem" Height="25" Width="25" Margin="5,0,0,0" 
     Style="{DynamicResource btnStyle}" ToolTip="Add Item"> 
    <ContentControl Content="ContentControl" Height="20" Width="20" 
      Template="{DynamicResource contentTemplate}" /> 
</Button>

Maintenant, quand dans le cas MouseOver du Button, je voudrais changer la taille de la Button ainsi que la taille de l'enfant ContentControl. Le ContentControl contient en fait une image vectorielle pour le Button. S'il vous plaît aider.

Source

2012-01-23 Shakti Prakash Singh

Dans WPF, vous avez tendance à ne pas redimensionner manuellement les contrôles. Au lieu de cela, vous placez le contrôle à l'intérieur d'un conteneur (c'est-à-dire 'Grid') et en ne spécifiant pas les' Width' et 'Height' du contrôle, il doit être dimensionné pour remplir le conteneur. Cela peut être utile si vous donnez une définition plus claire de ce que vous essayez de réaliser avec le dimensionnement dynamique, car il pourrait y avoir une meilleure façon de le faire. –

De même Button est déjà un ContentControl, vous n'avez donc pas besoin d'en intégrer un autre. Vous pouvez simplement définir sa propriété Content. – GazTheDestroyer

@SamuelSlade - Il y a plusieurs boutons à l'intérieur de la grille et un champ de recherche et je veux augmenter la taille pour mettre en surbrillance le bouton à cliquer. L'exigence est telle que je ne peux pas utiliser d'autre couleur pour mettre en évidence l'arrière-plan du bouton sauf blanc cassé et mon fond de grille a un dégradé blanc et gris clair qui le rend difficile à distinguer. Donc, je veux augmenter la taille du contenu pour distinguer le bouton en surbrillance. Mais j'ai utilisé votre conseil pour augmenter la taille du contenu en le laissant occuper toute la surface du bouton de contrôle. Merci. –

Votre Button s'ajustera automatiquement à la taille de son contenu, alors débarrassez-vous de ses propriétés Height et Width. Si vous souhaitez conserver l'espace entre le bord du bouton et ContentControl, utilisez la propriété Margin de ContentControl.

Ensuite, utilisez un DataTrigger dans votre Style de ContentControl changer la Height/Width lorsque la souris est dessus. Assurez-vous de définir Height/Width dans votre style plutôt que dans votre tag <ContentControl>, car si vous le définissez dans le tag, il aura la priorité sur la valeur déclenchée et ne changera jamais.

<Style x:Key="MyContentControlStyle" TargetType="{x:Type ContentControl}"> 
    <Setter Property="Height" Value="20" /> 
    <Setter Property="Width" Value="20" /> 
    <Setter Property="Margin" Value="5" /> 
    <Setter Property="Content" Value="ContentControl" /> 
    <Setter Property="Template" Value="{DynamicResource contentTemplate}" /> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding ElementName=btnAddItem, Path=IsMouseOver}" Value="True"> 
      <Setter Property="Height" Value="20" /> 
      <Setter Property="Width" Value="20" /> 
     </DataTrigger > 
    </Style.Triggers> 
</Style> 


<Button x:Name="btnAddItem" Height="25" Width="25" Margin="5,0,0,0" 
     Style="{DynamicResource btnStyle}" ToolTip="Add Item"> 
    <ContentControl Style="{StaticResource MyContentControlStyle}" /> 
</Button>

Source

2012-01-23 14:32:06 Rachel

Merci pour le beau conseil. J'ai utilisé votre exemple de code pour définir à la fois le modèle et le style pour le bouton séparément car j'utilise différentes images vectorielles pour les boutons, donc je ne peux pas définir la propriété de modèle dans le style. Et j'ai aimé l'idée d'utiliser des marges pour le contrôle du contenu. Cela a fonctionné à merveille. Mais le problème que j'ai rencontré était que l'image vectorielle que j'ai utilisée ne remplit pas tout l'espace mais est creuse comme un cercle. Donc, cela ne fonctionne que lorsque je survole la partie de l'image. Quand je suis à l'intérieur de la partie creuse, ça cesse de fonctionner. –

@ShaktiSingh Basez votre déclencheur sur la propriété 'IsMouseOver' du bouton en utilisant un 'DataTrigger' à la place. Je vais mettre à jour mon code. – Rachel

Afin de réaliser ce que je voulais, j'ai utilisé les conseils de Rachel ainsi que celui de Samuel Slade. Je l'ai fait quelque chose comme ceci:

<Button x:Name="btnEditItem" Style="{DynamicResource btnStyle}" Margin="5,0,0,0" ToolTip="Edit Item" Click="btnEditItem_Click"> 
<ContentControl x:Uid="ContentControl_5" Content="ContentControl" Template=" {DynamicResource contentTemplate}" Margin="2.5"/> 
</Button>

Je tournai la hauteur et la largeur du bouton par btnStyle via la propriété Setter et changer la hauteur et la largeur du bouton à travers les déclencheurs.

Cela m'a permis de travailler parfaitement. J'apprécie toutes vos suggestions d'aide. Je ne suis pas sûr si j'aurais pu arriver à cette conclusion car je pensais à un itinéraire différent de la propriété de contrôle des enfants. Merci encore.

Source

2012-01-24 07:09:43

Modifier la propriété de contrôle enfant (contentcontrol) au passage de la souris du parent

Répondre

Questions connexes