WPF Управление изображениями с Click Event

Question

Я хочу использовать <Image> в своем приложении WPF, которое реагирует на щелчки мышью. Из коробки доступны только события «Mouse Up» и «Moue Down». Я нахожу это довольно специфичным. Есть ли способ расширить элемент управления или использовать другой элемент управления для получения того же эффекта?

Answer 1

Чтобы расширить ответ Шона Маклина, одна из замечательных возможностей WPF - это возможность использовать поведение элемента управления при полном изменении внешнего вида этого элемента управления. Если вы хотите создать изображение с таким же поведением, как у кнопки (с событиями нажатия, привязкой команды, назначением кнопки по умолчанию и т. Д.), Вы можете поместить изображение в элемент управления кнопки и изменить стиль этой кнопки, чтобы удалить кнопку «хром». Это даст вам красивый API кнопки с желаемым внешним видом. Вы можете повторно использовать этот стиль, и этот подход уменьшит необходимость создавать обработчики событий в вашем коде, если у вас есть команды для привязки к новым кнопкам изображений.

Создать такой стиль довольно просто. Просто создайте новый ресурс стиля с именованным ключом в ресурсе и назначьте этот ресурс свойству Style ваших кнопок. Вот пример, который я бросил вместе:

<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

Используйте MouseUp.Вы не можете ни перемещаться, ни фокусироваться на элементе управления изображениями, так что это единственный способ щелкнуть по нему.

Другой вариант - просто поместить изображение в кнопку и удалить все стили, отредактировав шаблон элемента управления так, чтобы он выглядел какпросто изображение.Таким образом, вы можете сосредоточиться на нем с помощью клавиатуры.

Answer 3

Вы можете использовать набор из 4 обработчиков и 2 логических переменных:

булевы:

1. IsClicked
2. IsEntered

обработчики:

1. OnMouseDown - устанавливает IsClicked в значение true;
2. OnMouseEnter - устанавливает IsEntered true;
3. OnMouseLeave - устанавливает IsEntered в ложь;
4. OnMouseUp - if (IsClicked && IsEntered) {/ TODO вашей логики /}, а затем устанавливает IsClicked false;

Эта конструкция реализует функциональность классического клика.

Answer 4

Другой вариант - обернуть Image в Hyperlink, например:

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

Answer 5

3. OnMouseLeave - также устанавливается isClicked на false; В противном случае вы можете щелкнуть мышью и отпустить кнопку мыши. Затем щелкните мышью и отпустите кнопку мыши, чтобы щелчок продолжался.