Utilizzando WPF, qual è il metodo migliore per aggiornare lo sfondo per un controllo pulsante personalizzato?
Domanda
In WPF, stiamo creando controlli personalizzati che ereditano dal pulsante con grafica xaml completamente disegnata da zero. Abbiamo un bordo attorno all'intero pulsante xaml e vorremmo usarlo come posizione per l'aggiornamento dello sfondo quando MouseOver = True in un trigger. Quello che dobbiamo sapere è come aggiornare lo sfondo del bordo in questo pulsante con una sfumatura quando il mouse passa sopra di esso?
Soluzione
Nel tuo ControlTemplate
, dai al Border
un Name
e puoi quindi fare riferimento a quella parte del suo albero visivo nei trigger. Ecco un breve esempio di restyling di un normale Button
:
<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>
Se ciò non aiuta, avremo bisogno di saperne di più, probabilmente vedendo il tuo XAML. La tua descrizione non mi rende molto chiaro quale sia il tuo vero albero visivo.
Altri suggerimenti
Vorresti aggiungere un trigger come questo ...
Crea uno stile come questo:
<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>
Quindi aggiungi alcune risorse per i gradienti, in questo modo:
<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>
Per favore fatemi sapere se avete bisogno di ulteriore aiuto con questo.