Botón WPF Mouseover Image

Question

Estoy aprendiendo C# y XAML para crear aplicaciones de Windows. Quería crear un botón que tenga una imagen como fondo. Pero al pasar el cursor sobre el botón, el fondo del botón debería cambiar a otra imagen "resaltada". Intenté agregar las imágenes de fondo en Resources.resx. Tuve que crear un botón personalizado usando estilos xaml para eliminar el efecto resaltado predeterminado de un botón wpf.

Creé un botón personalizado a partir de algún código que encontré en SO. El código es (en un nuevo diccionario de recursos):

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect --> 
    <Style x:Key="StartMenuButtons" TargetType="Button"> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Margin" Value="5"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="border" 
         BorderThickness="0" 
         Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 


         <!-- UPDATE THE BUTTON BACKGROUND --> 
         <Setter Property="Background" Value="WHAT GOES HERE" TargetName="border"/> 


        </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

¿Qué debo poner de manera que los cambios de fondo a otra imagen, ya sea en mi resources.resx o en otro lugar? (No estoy seguro de dónde poner la imagen para acceder). Busqué SO, pero las soluciones que encontré no eran exactamente lo que estoy tratando. Si esta es una pregunta duplicada, me disculpo.

Resumen:

¿Cómo puedo cambiar la imagen de fondo de un botón de un ratón sobre el gatillo en XAML? ¿Dónde coloco la imagen para que se pueda acceder a ella en el código de activación?

Actualización Esto es lo que he puesto como acción de disparo, pero la imagen no se actualiza. Me aseguré de establecer la acción de creación de la imagen en el recurso y ponerlo en una carpeta llamada Recursos.

El código es:

<ControlTemplate.Triggers> 
    <Trigger Property="IsMouseOver" Value="True"> 
     <Setter Property="Background"> 
      <Setter.Value> 
      <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" /> 
      </Setter.Value> 
     </Setter> 
    </Trigger> 

La estructura de archivos es

Simon 
    Simon 
     Resources 
      all the images 
     Fonts 
     bin 
     obj 
     Properties 

Solución

El siguiente es el código completo para permitir un cambio de imagen al pasar el ratón sobre el botón:

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect --> 
    <Style x:Key="StartMenuButtons" TargetType="Button"> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Margin" Value="5"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="border" 
         BorderThickness="0" 
         Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Background" TargetName="border"> 
          <Setter.Value> 
           <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" /> 
          </Setter.Value> 
         </Setter> 

        </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Para la imagen real, la coloqué en la carpeta Recursos que se encuentra en el directorio raíz. Después de importar las imágenes allí usando la herramienta de recursos en Visual Studio, actualicé la imagen configuración de compilación a Recurso en el panel de Propiedades.

Gracias por la solución dbaseman

Answer 1

creo que es más fácil de añadir la imagen a una carpeta /Images en el proyecto. Entonces esta es la sintaxis que se utiliza:

<ControlTemplate TargetType="Button"> 
    <Border Name="border" BorderThickness="0" 
       Background="Transparent"> 
      <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" /> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

(. Asumiendo que su imagen MyImage.jpg está en la carpeta Images en la raíz de su proyecto)

Sólo asegúrese de que MyImage.jpg tiene su "Acción de generación" ajustado a "Recurso".

Answer 2

Aquí hay otra forma de hacerlo.

Puede usar los dos eventos de la imagen MouseEnter y MouseLeave. Ahora en tu código haz esto.

XAML

<Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" /> 

C#

private void image1_MouseEnter(object sender, MouseEventArgs e) 
{ 
    string packUri = @"pack://application:,,,/Resources/Polaroid.png"; 
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource; 
} 

private void image1_MouseLeave(object sender, MouseEventArgs e) 
{ 
    string packUri = @"pack://application:,,,/Resources/PolaroidOver.png"; 
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource; 
}