Using WPF, what is the best method to update the background for a custom button control?

Question

In WPF, we are creating custom controls that inherit from button with completely drawn-from-scratch xaml graphics. We have a border around the entire button xaml and we'd like to use that as the location for updating the background when MouseOver=True in a trigger. What we need to know is how do we update the background of the border in this button with a gradient when the mouse hovers over it?

Answer 1

In your ControlTemplate, give the Border a Name and you can then reference that part of its visual tree in the triggers. Here's a very brief example of restyling a normal 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>

If that doesn't help, we'll need to know more, probably seeing your own XAML. Your description doesn't make it very clear to me what your actual visual tree is.

Answer 2

You would want to add a trigger like this...

Make a style like this:

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

Then add some resources for the gradients, like this:

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

Please let me know if you need more help with this.