À l'aide de WPF, quelle est la meilleure méthode pour mettre à jour l'arrière-plan d'un contrôle de bouton personnalisé?

Question

Dans WPF, nous créons des contrôles personnalisés héritant du bouton avec des graphiques xaml complètement dessinés à partir de zéro. Nous avons une bordure autour du bouton xaml et nous aimerions l'utiliser comme emplacement pour mettre à jour l'arrière-plan lorsque MouseOver = True dans un trigger. Ce que nous devons savoir, c'est comment mettre à jour l'arrière-plan de la bordure de ce bouton avec un dégradé lorsque la souris passe dessus?

Answer 1

Dans votre ControlTemplate, donnez Border un Name et vous pouvez ensuite référencer cette partie de son arborescence visuelle dans les triggers. Voici un exemple très bref de restyling un Button normal:

<Style 
    TargetType="{x:Type Button}"> 
    <Setter 
     Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Name="customBorder" 
        CornerRadius="5" 
        BorderThickness="1" 
        BorderBrush="Black" 
        Background="{StaticResource normalButtonBG}"> 
        <ContentPresenter 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center" /> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger 
         Property="IsMouseOver" 
         Value="True"> 
         <Setter 
          TargetName="customBorder" 
          Property="Background" 
          Value="{StaticResource hoverButtonBG}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Si cela ne fonctionne pas, nous aurons besoin d'en savoir plus, voir probablement votre propre XAML. Votre description ne me rend pas très clair quel est votre véritable arbre visuel.

Answer 2

Vous voulez ajouter un déclencheur comme celui-ci ...

Faire un style comme celui-ci:

<Style x:Key="ButtonTemplate" 
      TargetType="{x:Type Button}"> 
    <Setter Property="Foreground" 
        Value="{StaticResource ButtonForeground}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate 
       TargetType="{x:Type Button}"> 
       <Grid 
        SnapsToDevicePixels="True" 
        Margin="0,0,0,0"> 
        <Border Height="20" 
            x:Name="ButtonBorder" 
            BorderBrush="{DynamicResource BlackBorderBrush}"> 
         <TextBlock x:Name="button" 
              TextWrapping="Wrap" 
              Text="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
              SnapsToDevicePixels="True" 
              Foreground="#FFFFFFFF" 
              Margin="6,0,0,0" 
              VerticalAlignment="Center"/> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <!-- Disabled --> 
        <Trigger Property="IsMouseOver" 
            Value="True"> 
         <Setter TargetName="ButtonBorder" 
             Property="Background" 
             Value="{DynamicResource ButtonBackgroundMouseOver}" /> 
         <Setter TargetName="ButtonBorder" 
             Property="BorderBrush" 
             Value="{DynamicResource ButtonBorderMouseOver}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

ajouter ensuite des ressources pour les gradients, comme ceci:

<LinearGradientBrush x:Key="ButtonBackgroundMouseOver" 
             EndPoint="0.5,1" 
             StartPoint="0.5,0"> 
    <GradientStop Color="#FF000000" 
           Offset="0.432"/> 
    <GradientStop Color="#FF808080" 
           Offset="0.9"/> 
    <GradientStop Color="#FF848484" 
           Offset="0.044"/> 
    <GradientStop Color="#FF787878" 
           Offset="0.308"/> 
    <GradientStop Color="#FF212121" 
           Offset="0.676"/> 
</LinearGradientBrush> 

S'il vous plaît laissez-moi savoir si vous avez besoin de plus d'aide avec ceci.