web-dev-qa-db-fra.com

WPF Image Control avec Click Event

Je souhaite utiliser un <Image> dans mon application WPF qui répond aux clics de souris. Seuls les événements «Mouse Up» et «Moue Down» sont disponibles immédiatement. Je trouve cela plutôt particulier. Existe-t-il un moyen d'étendre le contrôle ou d'utiliser un autre contrôle pour obtenir le même effet?

wpfxaml
35
Jesse Hallam

Pour approfondir la réponse de Shawn Mclean, l'une des grandes capacités de WPF est la capacité de tirer parti du comportement d'un contrôle tout en modifiant complètement son apparence. Si vous souhaitez créer une image qui se comporte comme un bouton (avec des événements de clic, une liaison de commande, une affectation de bouton par défaut, etc.), vous pouvez placer une image dans un contrôle de bouton et modifier le style de ce bouton pour supprimer le bouton "chrome". Cela vous donnera l'API Nice d'un bouton avec le look que vous désirez. Vous pouvez réutiliser ce style. Cette approche vous évitera de créer des gestionnaires d’événements dans votre code si vous avez des commandes à associer à vos nouveaux boutons d’image.

Créer un tel style est assez facile. Créez simplement une nouvelle ressource de style avec une clé nommée dans une ressource et affectez cette ressource à la propriété Style de vos boutons. Voici un exemple que j'ai jeté ensemble:

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

Utilisez MouseUp. De toute façon, vous ne pouvez pas naviguer dans le contrôle Image ni vous focaliser dessus, c’est le seul moyen de cliquer dessus.

Une autre option consiste simplement à placer l'image dans un bouton et à supprimer tous les styles en modifiant le modèle de contrôle afin qu'il ressemble à une image. De cette façon, vous pouvez vous concentrer dessus en utilisant le clavier.

29
Shawn Mclean

Vous pouvez utiliser un ensemble de 4 gestionnaires et de 2 variables booléennes:

booléens:

  1. Est cliqué
  2. Est saisi

gestionnaires:

  1. OnMouseDown- définit IsClicked true;
  2. OnMouseEnter- sets IsEntered true;
  3. OnMouseLeave - définit IsEntered sur false;
  4. OnMouseUp - if (IsClicked && IsEntered) {/ TODO your logic /} puis définit IsClicked false;

Cette construction implémente les fonctionnalités du clic classique.

1
Semm

Une autre option consiste à envelopper une Image dans une Hyperlink, comme ceci:

 <TextBlock>
    <Hyperlink Command="{Binding VisitWebsiteCommand}"
               CommandParameter="http://www.google.com"
               Cursor="Hand"
               TextDecorations="{x:Null}">
        <Image Height="50"
               Source="{StaticResource YourImageResource}"
               Width="50" />
    </Hyperlink>
</TextBlock>
0
DonBoitnott