À 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 qui héritent des boutons avec des graphiques xaml entièrement dessinés. Nous avons une bordure autour du bouton xaml entier et nous aimerions l'utiliser comme emplacement pour la mise à jour de l'arrière-plan lorsque MouseOver = True dans un déclencheur. Ce qu'il faut savoir, c'est comment mettre à jour l'arrière-plan de la bordure de ce bouton avec un dégradé lorsque la souris le survole.

Answer 1

Dans votre ControlTemplate , attribuez à Bordure un Nom et vous pourrez ensuite référencer cette partie de son arbre visuel dans les déclencheurs. Voici un très bref exemple de restylage d’un bouton 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 vous aide pas, nous devons en savoir plus, voir probablement votre propre XAML. Votre description ne m’indique pas très clairement quel est votre arbre visuel actuel.

Answer 2

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

Créez 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>

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

Faites-moi savoir si vous avez besoin de plus d'aide pour cela.