CODEWITHSUNDEEP
c#wpfimagexamltriggers
shawn
shawn

Reputation: 93

How to make the image pop-up on mouse hovering in C# WPF

how do I make a picture that will pop up when mouse hovering over a icon like this

the xaml code for my icon

<Image x:Name="image" HorizontalAlignment="Left" Height="27" Margin="157,257,0,0" VerticalAlignment="Top" Width="26" Source="img/info.png" Cursor="Hand">
                        <Image.OpacityMask>
                            <ImageBrush ImageSource="img/info.png"/>
                        </Image.OpacityMask>
                    </Image>

Upvotes: 1

Views: 3866

Answers (4)

Alexander Bell
Alexander Bell

Reputation: 7918

You can use WPF Image.Style Trigger to change the image source from, e.g. img1.png to img2.png on MouseOver event as shown in the following sample:

Listing 1. Toggle images on Mouse Over in WPF Image control using Trigger

<Image>
  <Image.Style>
    <Style TargetType="{x:Type Image}">
      <Setter Property="Source" Value="img/img1.png"/>
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Source" Value="img/img2.png"/>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Image.Style>
</Image>

Or, you may display the image img/info.png on MouseOver event using WPFTrigger to change the Opacity property from 0 to 1 (or using custom numbers pertinent to your case, e.g. from 0.2 to 1) as shown below:

Listing 2. Display image on Mouse Over in WPF Image control using Trigger

   <Image >
        <Image.Style>
            <Style TargetType="{x:Type Image}">
            <Setter Property="Source" Value="img/Cube.jpg"/>
            <Setter Property="Opacity" Value="0" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" Value="1" />
                </Trigger>
            </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>

Important: DO NOT set the static image source as in your original code:

<Image x:Name="image" Source="img/info.png" .....

Instead, use the Setter as shown in the samples. Also, you do not need opacity mask to achieve this simple effect.

Hope this may help.

Upvotes: 2

Nitin Purohit
Nitin Purohit

Reputation: 18578

Why dont you use a Tootip over the icon

<Image x:Name="image" HorizontalAlignment="Left" Height="27" Margin="157,257,0,0" VerticalAlignment="Top" Width="26" Source="img/info.png" Cursor="Hand">
            <Image.OpacityMask>
                <ImageBrush ImageSource="img/info.png"/>
            </Image.OpacityMask>
            <Image.ToolTip>
                <ToolTip Placement="Bottom">
                    <ToolTip.Template>
                        <ControlTemplate>
                            <StackPanel>
                                <Path Margin="34,0,0,0" Fill="#e5AAAAAA" Data="M 0 16 L 16 0 L 32 16 Z"/>
                                <Image Height="100" Width="80" Source="img/bigImage.png"/>
                            </StackPanel>
                        </ControlTemplate>
                    </ToolTip.Template>
                </ToolTip>
            </Image.ToolTip>
        </Image>

Upvotes: 2

auburg
auburg

Reputation: 1475

You can wrap your xaml as a custom tooltip - see this

Upvotes: 0

hdev
hdev

Reputation: 6537

You could use the Event UIElement.MouseEnter and UIElement.MouseLeave to change the UIElement.Visibility from Visibility.Collapsed to Visibility.Visible of the ImageControl.

Or you use Trigger

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggersSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleTriggersSample" Height="100" Width="300">
    <Grid>
        <TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Blue"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                            <Setter Property="TextDecorations" Value="Underline" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

Source: http://www.wpf-tutorial.com/styles/trigger-datatrigger-event-trigger/

Upvotes: 0

Related Questions