WPF Image Control with Click Evento

Question

Deseo utilizar un <Image> en mi aplicación WPF que responde a los clics del mouse. Solo los eventos 'Mouse Up' y 'Moue Down' están disponibles de inmediato. Encuentro esto bastante particular. ¿Hay alguna manera de extender el control o una forma de usar otro control para dar el mismo efecto?

Answer 1

Para ampliar la respuesta de Shawn Mclean, una de las grandes capacidades de WPF es la capacidad de aprovechar el comportamiento de un control mientras se cambia por completo el aspecto de ese control. Si desea crear una imagen con ese comportamiento como un botón (completa con eventos de clic, enlace de comandos, asignación predeterminada de botones, etc.) puede colocar una imagen en un control de botón y volver a colocar ese botón para quitar el botón "chrome". Esto le dará la API agradable de un botón con el aspecto que desee. Puede reutilizar este estilo y este enfoque reducirá la necesidad de crear controladores de eventos en su código si tiene comandos para enlazar a sus nuevos botones de imagen.

Crear un estilo así es bastante fácil. Simplemente cree un nuevo recurso de estilo con una clave con nombre en un recurso y asigne este recurso a la propiedad Style de sus botones. Este es un ejemplo Tiré juntos:

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="ButtonStyleTestApp.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 

<Window.Resources> 
    <Style x:Key="NoChromeButton" TargetType="{x:Type Button}"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
        <ControlTemplate.Triggers>       
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="#ADADAD"/> 
          <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<Grid x:Name="LayoutRoot" Background="#FF44494D"> 
    <Button Style="{DynamicResource NoChromeButton}" Click="ButtonClicked" > 
     <Image Source="Desert.png" Stretch="None"/> 
    </Button> 
</Grid> 
</Window> 

Answer 2

Use MouseUp. No puedes desplazarte o enfocarte en el control de la imagen de todos modos, así que esa es la única forma de hacer clic en él.

Otra opción es simplemente poner la imagen en un botón y eliminar todos los estilos editando la plantilla de control para que parezca solo una imagen. De esa forma, puedes enfocarte usando el teclado.

Answer 3

Se puede utilizar un conjunto de 4 manipuladores y 2 variables booleanas:

booleanos:

1. IsClicked
2. IsEntered

manipuladores:

1. OnMouseDown- sets IsClicked true;
2. OnMouseEnter- sets IsEntered true;
3. OnMouseLeave - sets IsEntered false;
4. onmouseup - si (IsClicked & & IsEntered) {/ TODO tu lógica /} y luego conjuntos IsClicked falsa;

Esta construcción implementa la funcionalidad del clic clásico.

Answer 4

3. OnMouseLeave - también se establece is esClicked a falso; De lo contrario, puede hacer clic con el mouse y soltar el mouse. A continuación, haga clic y suelte el mouse para hacer un clic.