2009-08-19 6 views
4

Je suis un débutant avec WPF et je ne sais même pas où trouver la réponse à cette question. Ce XAML semble très simple pour moi:Pourquoi l'arrière-plan du bouton change-t-il?

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Grid> 
    <Button> 
     <Button.Style> 
     <Style TargetType="{x:Type Button}"> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="Green"/> 
      </Trigger>  
     </Style.Triggers> 
     </Style> 
     </Button.Style> 
     <Button.Content>Test</Button.Content> 
    </Button> 
    </Grid> 
</Page> 

Quand je souris sur le bouton, IsMouseOver changements à True et le déclencheur rend fond devient vert. Pour un instant. Ensuite, il devient bleu.

Encore mieux: si j'attache le même setter à la propriété IsFocused, une fois que je me suis concentré sur le bouton, la couleur d'arrière-plan passe entre le vert et le bleu.

Il y a quelque chose, quelque part dans le Bouton (je suppose que c'est dans n'importe quel thème par défaut sous Vista) qui le fait se comporter de cette façon. Je soupçonne qu'il y a une autre propriété que le déclencheur doit définir. Mais quoi?

Répondre

22

Vous devez modifier le Template au lieu de Style. Construit dans le modèle est quelque chose appelé ButtonChrome, et c'est ce qui provoque l'effet de mise au point bleu irritant. Voici une nouvelle templating très simple du contrôle Button, pris des styles simples fournis:

<Style TargetType="{x:Type Button}"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="OverridesDefaultStyle" Value="true"/> 
    <Setter Property="MinHeight" Value="23"/> 
    <Setter Property="MinWidth" Value="75"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type Button}"> 
     <Border 
      x:Name="Border" 
      CornerRadius="2" 
      BorderThickness="1" 
      Background="#C0C0C0" 
      BorderBrush="#404040"> 
      <ContentPresenter 
      Margin="2" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      RecognizesAccessKey="True"/> 
     </Border> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsKeyboardFocused" Value="true"> 
      <Setter TargetName="Border" Property="BorderBrush" Value="#202020" /> 
      </Trigger> 
      <Trigger Property="IsDefaulted" Value="true"> 
      <Setter TargetName="Border" Property="BorderBrush" Value="#202020" /> 
      </Trigger> 
      <Trigger Property="IsMouseOver" Value="true"> 
      <Setter TargetName="Border" Property="Background" Value="#808080" /> 
      </Trigger> 
      <Trigger Property="IsPressed" Value="true"> 
      <Setter TargetName="Border" Property="Background" Value="#E0E0E0" /> 
      <Setter TargetName="Border" Property="BorderBrush" Value="#606060" /> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="false"> 
      <Setter TargetName="Border" Property="Background" Value="#EEEEEE" /> 
      <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" /> 
      <Setter Property="Foreground" Value="#888888"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

Vous pouvez voir que par re-Templating le contrôle, vous pouvez changer son arbre visuel . L'arbre visuel dans ce modèle n'est rien de plus qu'un Border qui contient un ContentPresenter (de sorte que vous pouvez voir le contenu du bouton). J'ai effectivement enlevé le ButtonChrome de l'arbre visuel de cette façon.

+0

Merci! Quand vous dites «les styles simples fournis», de quoi parlez-vous? –

+0

Consultez cet article: http://blog.falafel.com/2008/07/17/UsingTheSimpleStylesProjectInVisualStudioToCustomizeWPFControls.aspx – Charlie

+0

@ Robert - vous pouvez les obtenir dans Expression Blend - voir ici: http://msdn.microsoft. com/fr-fr/library/cc294894 (v = expression.40) .aspx – RichardOD

6

La réponse de Charlie est bonne. Je veux simplement compléter avec une explication de ce qui se passait, et un commentaire ne semblait pas l'endroit.

La raison pour laquelle il était vert pour un instant, puis était bleu est parce que le ControlTemplate du thème par défaut pour Button avait déjà un IsMouseOverTrigger changer l'arrière-plan. Puis vous avez ajouté un autre dans votre Style. Cela ne remplace pas l'existant parce que vous pourriez avoir plusieurs Trigger s sur la même propriété et la valeur qui ont très différents Setter s et faire des choses complètement différentes.

Donc, il essayait de faire les deux, et a fait le vert en premier.

+2

C'est ce que je pensais. Est-il possible de supprimer simplement un déclencheur si vous ne le voulez pas, ou est-ce que vous reformulez le contrôle de la seule manière? –

+1

Re-templating est le seul moyen, autant que je sache. –

Questions connexes