Changing image on click

1
votes

I have placed an Image as a button in my App and I want to change the Image on clicking the button and If I leave it has to regain its original Image. Is it possible in phone 7?

2
windows-phone-7
That's very possible. Are you familiar with WPF/Silverlight? – benjer3
no,am new to the technology.jus give me sme idea so i can catch up. – Mini-Con
If you want to get yourself familiarized with everything on the WP7, there's a free e-book here. – benjer3
thank u benjer i hav that book. – Mini-Con

2 Answers

1
votes

Give your button a Click event handler and your image a name, i.e.:

<Button Click="ImageButton_Click" ...>
    <Button.Content>
        <Image Name="Image" ImageSource="ImageSource.jpg" />
    </Button.Content>
</Button>

then in the event handler

private void ImageButton_Click(object sender, RoutedEventArgs e)
{
    this.Image.ImageSource = new BitmapImage(
        new Uri("NewImageSource.jpg", UriKind.Relative));
}

When you exit the app, it either get's tombstoned (meaning it basically shuts down and loses all information except what's saved) if you navigate somewhere else or completely shuts down if you press the back button, and either of those will reset the image to its original state.

1
votes

add two namespaces

using System.Windows.Resources;
using System.Windows.Media.Imaging;

create two events for mouse enter and mouse leave

private void btn_back_MouseEnter(object sender, MouseEventArgs e)
    {
        Uri myfile = new Uri("image.png", UriKind.Relative);
        StreamResourceInfo resourceInfo = Application.GetResourceStream(myfile);
        BitmapImage myimage = new BitmapImage(myfile);
        myimage.SetSource(resourceInfo.Stream);
        btn_back.Source = myimage;
    }
    private void btn_back_MouseLeave(object sender, MouseEventArgs e)
    {
        Uri myfile = new Uri("image.png.png", UriKind.Relative);
        StreamResourceInfo resourceInfo = Application.GetResourceStream(myfile);
        BitmapImage myimage = new BitmapImage(myfile);
        myimage.SetSource(resourceInfo.Stream);
        btn_back.Source = myimage;
    }

And the xaml file is

      <Image Canvas.Left="10" Canvas.Top="17" x:Name="btn_back" Source="/NewUIChanges;component/Images/back_normal.png" Stretch="Fill"  MouseLeftButtonUp="img_cnvstop_MouseLeftButtonUp" MouseEnter="btn_back_MouseEnter" MouseLeave="btn_back_MouseLeave" />