除非有源，否则MouseUp / Click on Image不起作用

Question

I have 15 images.. where I have "On Mouse Up", have it open up a windows explorer browser window so they can choose what image to put as the source.

the thing is if there is nothing in the image source originally.. mouse up doesn't work...

is there any way around this?

private void Image_MouseUp(object sender, MouseButtonEventArgs e)
        {
            // Configure open file dialog box 
            Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
            dlg.FileName = ""; // Default file name 
            dlg.DefaultExt = ".png"; // Default file extension 
            dlg.Filter = "PNG Files (.png)|*.png|TGA Files (.tga)|*.tga|All Files (*.*)|*.*"; // Filter files by extension 

            // Show open file dialog box 
            Nullable<bool> result = dlg.ShowDialog();

            // Process open file dialog box results 
            if (result == true)
            {
                ((Image)sender).Source = (ImageSource)new ImageSourceConverter().ConvertFromString(dlg.FileName);
            }
        }

Edit for Vimal CK:

<GroupBox Width="75" Height="75">
                            <Border MouseLeftButtonUp="Image_MouseUp1">
                                <Image Name="RedPick5_Image" Height="45" Width="45"></Image>
                            </Border>
                        </GroupBox>

private void Image_MouseUp1(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show("in here");
            // Configure open file dialog box 
            Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
            dlg.FileName = ""; // Default file name 
            dlg.DefaultExt = ".png"; // Default file extension 
            dlg.Filter = "PNG Files (.png)|*.png|TGA Files (.tga)|*.tga|All Files (*.*)|*.*"; // Filter files by extension 

            // Show open file dialog box 
            Nullable<bool> result = dlg.ShowDialog();

            // Process open file dialog box results 
            if (result == true)
            {
                RedPick5_Image.Source = (ImageSource)new ImageSourceConverter().ConvertFromString(dlg.FileName);
            }
        }

Answer 1

There is no workaround to this. It is by design. An Image without Source is more or less equal to null and so hit testing (clicking with mouse around) is not available. As soon you set the Source the Image will have the capability to participate in hit testing.

If you would take a control and set its background color to null you would notice that clicking is not being handled.

Answer 2

I have a work around on this issue. Modify your XAML by adding a border control like below. Since the MouseLeftButtonUp is an attached event. So you can hook this event to any FrameworkElement like below.

<Border MouseLeftButtonUp="Image1_MouseUp">
   <Image Name="Image1"
          Width="200"
          Height="200">
   </Image>
</Border>

Your code required a slight change as follows

private void Image1_MouseUp(object sender, MouseButtonEventArgs e)
{
        Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
        dlg.FileName = ""; // Default file name 
        dlg.DefaultExt = ".png"; // Default file extension 
        dlg.Filter = "PNG Files (.png)|*.png|TGA Files (.tga)|*.tga|All Files (*.*)|*.*"; // Filter files by extension 

        // Show open file dialog box 
        Nullable<bool> result = dlg.ShowDialog();

        // Process open file dialog box results 
        if (result == true)
        {
            Image1.Source = (ImageSource)new ImageSourceConverter().ConvertFromString(dlg.FileName);
        }

    }

instead of using ((Image)sender).Source , assign the image directly to Image control. Please check if it feasible for you.

Answer 3

By default Background for Border is null which does not respond to HitTest ie won't respond to MouseEvents. All you need is to set Background to Transparent for your border which will enable it for hit test scenarios.

<GroupBox Width="75" Height="75">
   <Border MouseLeftButtonUp="Image_MouseUp1" Background="Transparent">
       <Image Name="RedPick5_Image" Height="45" Width="45"></Image>
   </Border>
</GroupBox>