none
How to change image source on code behind ? RRS feed

  • Question

  • Currently i got 4 image, ImageDefault, Image1, Image2, Image3. When i click on either Image1, Image2 or Image3, the ImageDefault.source will change to selected image.

    I have done this using (ImageSource)FindResource("ImageName");however i want to know except this way still got what others possible way ? I saw something like uri however i don't know how to implement it...anyone can guide me on this ? Thank you. 

     

    XAML

    <Window x:Class="ImageChanging.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
      <Window.Resources >
        <ResourceDictionary >
          <ImageSource x:Key="ImageNum1">Images/Num1_Over.png</ImageSource>
          <ImageSource x:Key="ImageNum2">Images/Num2Over.png</ImageSource>
          <ImageSource x:Key="ImageNum3">Images/Num3_Over.png</ImageSource>
        </ResourceDictionary >
      </Window.Resources>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="50" />
          <RowDefinition Height="50" />
          <RowDefinition Height="50" />
          <RowDefinition Height="28" />
          <RowDefinition Height="133*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="453*" />
        </Grid.ColumnDefinitions>
        <Image x:Name="NumDefault" Grid.Row="2" Source="Images/Num1_Over.png" />
        <Image x:Name="Num1" Grid.Column="2" Source="Images/Num1_Over.png" Margin="8,0,395,0" MouseLeftButtonDown="Num1_MouseLeftButtonDown" />
        <Image x:Name="Num2" Grid.Column="2" Source="Images/Num2Over.png" Margin="125,0,278,0" MouseLeftButtonDown="Num2_MouseLeftButtonDown" />
        <Image x:Name="Num3" Grid.Column="2" Source="Images/Num3_Over.png" Margin="240,0,140,0" MouseLeftButtonDown="Num3_MouseLeftButtonDown" />
    
      </Grid>
    </Window>
    
    


    Code Behind

      public partial class MainWindow : Window
      {
        public MainWindow()
        {
          InitializeComponent();
        }
    
        private void Num1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = (ImageSource)FindResource("ImageNum1");
        }
    
        private void Num2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = (ImageSource)FindResource("ImageNum2");
        }
    
        private void Num3_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = (ImageSource)FindResource("ImageNum3");
        }
    
    
    
      }
    


     

    Monday, August 22, 2011 1:42 PM

Answers

  • Hello,

    That's the way to load an image using uri source:

     private void Num1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = new BitmapImage(new Uri("Images/Num1_Over.png", UriKind.Relative));
        }
    
        private void Num2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = new BitmapImage(new Uri("Images/Num2_Over.png", UriKind.Relative));
        }
    
        private void Num3_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = new BitmapImage(new Uri("Images/Num3_Over.png", UriKind.Relative));
        }
    

    Good Luck.

     

    • Marked as answer by AnShia Tuesday, August 23, 2011 2:57 AM
    Monday, August 22, 2011 7:53 PM

All replies

  • Hello,

    That's the way to load an image using uri source:

     private void Num1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = new BitmapImage(new Uri("Images/Num1_Over.png", UriKind.Relative));
        }
    
        private void Num2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = new BitmapImage(new Uri("Images/Num2_Over.png", UriKind.Relative));
        }
    
        private void Num3_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
          NumDefault.Source = new BitmapImage(new Uri("Images/Num3_Over.png", UriKind.Relative));
        }
    

    Good Luck.

     

    • Marked as answer by AnShia Tuesday, August 23, 2011 2:57 AM
    Monday, August 22, 2011 7:53 PM
  • Hi AnShia,

    sure, you can modify the ImageSource from codebehind but I would prefer using binding as pointed out here:

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/80d3672f-b8a2-44a0-a1b4-496b64e02361

    Regards and happy coding...


    "It's time to kick ass and chew bubble gum... and I'm all outta gum." - Duke Nukem
    Monday, August 22, 2011 8:23 PM
  • Hi AnShia,

    sure, you can modify the ImageSource from codebehind but I would prefer using binding as pointed out here:

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/80d3672f-b8a2-44a0-a1b4-496b64e02361

    Regards and happy coding...


    "It's time to kick ass and chew bubble gum... and I'm all outta gum." - Duke Nukem

    ya, just want to know others way since saw some different approaches.

    I noticed something how to i set default image on this image tag ? since the source already been bind

    on this Image should display Images/Num1.png as default, and when others image being clicked only change the image.

    <Image Height="30" Source="{Binding ElementName=mainWnd, Path=SelectedImageSource}" HorizontalAlignment="Left" Margin="190,152,0,0" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="32" />

    Tuesday, August 23, 2011 8:17 AM
  • Hi AnShia,

    sorry for the delay. Please just preset the bound property to a default value to avoid breaking the binding.


    "It's time to kick ass and chew bubble gum... and I'm all outta gum." - Duke Nukem
    Friday, August 26, 2011 4:02 PM