I need a little bit of help with my logic here. How can I have a picture select change image on Click?

Question

Here's what I have:

private void HeroMouseEnter(object sender, MouseEventArgs e)
    {            
        //I did things this was because it is easier to maintain code in a sense that is is a generic
        //method made for all of the heroes images.
        ((Image)sender).Source = GetGlowingImage(((Image)sender).Name);            
    }

    private void HeroMouseLeave(object sender, MouseEventArgs e)
    {
        //I did this IF conditional because I want to ask, "If the sender object
        //is the hero selected, then do NOT change the image to normal.
        if (SelectedHero != ((Image)sender).Name)
        {
            //I did things this was because it is easier to maintain code in a sense that is is a generic
            //method made for all of the heroes images.
            ((Image)sender).Source = GetNormalImage(((Image)sender).Name);                             
        }            
    }

    private void HeroMouseClick(object sender, MouseEventArgs e)
    {
        if (!HasSelectedAHeroBefore)
        {
            HasSelectedAHeroBefore = true;
            //Created a generic way to play the announcers voice according to where a user clicked.
            string soundfile = "AnnouncerVoice/" + ((Image)sender).Name + ".mp3";
            soundPlayer.Open(new Uri(soundfile, UriKind.Relative));
            soundPlayer.Play();

            //I call the MouseEnter event in order to have the clicked picture glow and set the Selected bool to true 
            //to keep it highlighted.
            SelectedHero = ((Image)sender).Name; 
        }
        else if (HasSelectedAHeroBefore)
        {
            //Created a generic way to play the announcers voice according to where a user clicked.
            string soundfile = "AnnouncerVoice/" + ((Image)sender).Name + ".mp3";
            soundPlayer.Open(new Uri(soundfile, UriKind.Relative));
            soundPlayer.Play();

            //I call the MouseEnter event in order to have the clicked picture glow and set the Selected bool to true 
            //to keep it highlighted.
            SelectedHero = ((Image)sender).Name;
            PreviousSelectedHero = ((Image)sender).Name;
        }

    }

The cliffnotes of what I want. When a user moves his mouse around my pictures, I want the pictures to Glow. I achieve this by changing the image to a photoshopped one (with glow) on MouseEnter. On MouseLeave, I switch the pic back to normal.

When a user click, I want the clicked Image to stay with the Glow one I made. All the while when the user moves his mouse I still want them to glow on MouseEnter and deglow on MouseLeave.

Finally, if a user click an image different than the selected one, the clicked picture must stay selected (glowing) like the one before.

I'm so stumped and I'm sure it's an easy fix, I'm just a bit rusty.

Thanks tremendously for the help. :D

Edit: Aplogise, I forgot to mention what isn't working. EVERYTHING words exacty how I want it to, however when I click another image, the previous one stays glowing (like selected), until I enter the mouse on it and leave it.

Edit2: I've added something that may work. But I don't know how to select a Image control by it's name. Any help?

else if (HasSelectedAHeroBefore)
        {
            //Created a generic way to play the announcers voice according to where a user clicked.
            string soundfile = "AnnouncerVoice/" + ((Image)sender).Name + ".mp3";
            soundPlayer.Open(new Uri(soundfile, UriKind.Relative));
            soundPlayer.Play();

            //I call the MouseEnter event in order to have the clicked picture glow and set the Selected bool to true 
            //to keep it highlighted.
            PreviousSelectedHero = SelectedHero;
            //Here I want to select the Image control by it's Name property. But it says I can't convert string to Image. ANy help?

            GetNormalImage(((Image)PreviousSelectedHero).Name);
            SelectedHero = ((Image)sender).Name;

        }

Answer 1

As an alternative to creating multiple images, you could use Triggers and BitMapEffects to accomplish much of this behavior. There is a good tutorial here on making an image have a glow effect on mouseover. You could use a similar approach with a DataTrigger to keep the glow effect on as long as the image is the 'selected' one.

Sample style setting to 'glow' an image on mouseover:

  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="BitmapEffect">
        <Setter.Value>
          <OuterGlowBitmapEffect GlowColor="Red" GlowSize="4"/>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>

How you might use something similar to keep the selected image glowing regardless of mouseover:

<Style.Triggers>
    <DataTrigger Binding={Binding Path=IsSelected} Value="True">
      <Setter Property="BitmapEffect">
        <Setter.Value>
          <OuterGlowBitmapEffect GlowColor="Red" GlowSize="4"/>
        </Setter.Value>
      </Setter>
    </DataTrigger>
</Style.Triggers>

Answer 2

Could try in HeroMouseClick...

PreviousSelectedHero = SelectedHero;
SelectedHero = ((Image)sender).Name;

EDIT2: I'm assuming Xaml that looks something like this:

<StackPanel Name = "myContainer>
    <Image Name="heroOne" Source="source1.gif" />
    <Image Name="heroTwo" Source="source2.gid" />
</StackPanel>

Then in the codebehind you can do:

using System.Linq;  //EDIT - you'll need this for any Linq query

var hero = 
    (from Image i in myContainer.Children
     where i.Name == previousSelectedHero.Name
     select i).Single(); 
     //this selected the Image from the StackPanel "myContainer" using the Images name attribue
     //and assigns it to hero

 hero.Source = GetNormalImage(hero.Name); 
//this should then set the deselected image back to its original source

Where "myContainer" is whatever you've got all the images stored in (such as a Stackpanel or grid or even a list of some sort). Given that this hinges on the images being stored in a certain way and that I've written it off the top of my head it may or may not be useful. That said it should select the image you want to change, and change it back to the original.

More Edit2: I'm assuming its the Linq statement that you're struggling with. here is a link to what Linq is about, and here is a bunch of samples.

Answer 3

Hi Papuccino,

I'd solve it like this (pseudo code):

class HeroControl
{
  bool IsSelected {get;set;}

  MouseEnter()
  {
    if (!IsSelected) 
    {
      SetGlow(true);
    }
  }

  MouseLeave()
  {
    if (!IsSelected)
    {
      SetGlow(false);
    }
  }

  MouseDown()
  {
    IsSelected = true;

    // May be event invocation or method call or any other way.
    NotifySelectedHeroChanged(this); 
  }
}

class HeroesContainer
{
  List Heroes;

  OnCurrentHeroChanged(newHero, oldHero)
  {
   oldHero.IsSelected = false;
   // update new hero if needed.
  }
}

Yeah, quite abstract. But who knows, maybe it would help you somehow :).

Cheers, Anvaka.