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

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?

From stackoverflow FarrEver

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

  From Joel B Fant

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

  From Phobis