Mit WPF, was ist die beste Methode, den Hintergrund für eine benutzerdefinierte Tastensteuerung zu aktualisieren?

Question

In WPF schaffen wir individuelle Steuerelemente, die XAML-Grafiken mit vollständig gezeichnet von Grund auf von Taste erben. Wir haben einen Rahmen um den gesamten Knopf XAML und wir möchten, dass als Standort verwenden, für die Aktualisierung des Hintergrunds, wenn Mouseover = True in einem Trigger. Was müssen wir wissen, ist, wie wir den Hintergrund der Grenze in dieser Taste mit einem Gradienten aktualisieren, wenn die Maus darüber bewegt wird?

Answer 1

In Ihrem ControlTemplate gibt dem Border einen Name und Sie können dann in dem Auslöser, dass ein Teil ihrer visuellen Struktur verweisen. Hier ist ein sehr kurzes Beispiel eine normale Button Restyling:

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

Wenn das nicht hilft, werden wir mehr wissen müssen, wahrscheinlich Ihre eigene XAML zu sehen. Ihre Beschreibung macht es nicht ganz klar zu mir, was Ihre tatsächlichen visuellen Struktur ist.

Answer 2

Sie würde einen Trigger wie folgt hinzufügen wollen ...

Machen Sie einen Stil wie folgt aus:

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

Dann fügen Sie einige Ressourcen für die Gradienten, wie folgt aus:

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

Bitte lassen Sie mich wissen, wenn Sie mehr Hilfe brauchen.