¿Por qué el evento “mouseover” para un botón solo se activa en el contenido y no en el propio botón?
Me pregunto por qué el evento IsMouseOver se utiliza en un botón solo se activa una vez que se ha tocado el contenido y no cuando se ha tocado el botón. ¿Cómo hacer que funcione en el botón y no en el contenido?
El punto azul es donde se mantuvo el puntero del ratón.
Botón sin reaccionar:
Imagen de botón sin reaccionar
Botón que reacciona cuando lo mantengo en el contenido (la rejilla cambia de color para simular el efecto táctil del botón estándar):
El botón permanece iluminado cuando salgo del contenido, ¿por qué no se activa también?
Imagen de botón que permanece iluminado
Código para la creación del estilo:
<!-- Diseño del botón con evento genérico de IsMouseOver -->
<style x:key="BtnMouseOver" targettype="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid Name="GridMouseOver" Background="Black" Opacity="0.2" Visibility="Hidden"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridMouseOver" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</style>
Código para su uso:
<button x:name="btnMenuToggle" width="60" horizontalalignment="Left" style="{StaticResource BtnMouseOver}" click="btnMenuToggle_Click">
<textblock text="Bars" foreground="White" fontsize="30" fontfamily="{StaticResource FaFreeSolid}"></textblock>
</button>
davy.ai
El problema aquí no está en el evento IsMouseOver en sí, sino en la disposición del botón y el contenido dentro de él. El evento IsMouseOver se activa cuando el puntero del mouse se encuentra sobre los límites del botón, pero en este caso, el contenido (el TextBlock) está absorbiendo los eventos del mouse y no los está pasando al botón. Es por eso que el evento IsMouseOver solo se activa cuando se toca el contenido, y no cuando se toca el botón en sí.
Para hacer que el evento IsMouseOver funcione en el botón y no solo en el contenido, puedes ajustar la disposición del botón para que el contenido no se solape con los límites del botón. Una forma de hacer esto es envolver el contenido en otro elemento, como un Border o un Grid, y aplicar el estilo a ese elemento en lugar del botón en sí. Por ejemplo:
En este caso, el evento IsMouseOver se activará cuando el puntero del mouse se encuentre sobre el elemento Border, que tiene los mismos límites que el botón en sí.