how to display image in a grid using C# for WP8?

Question

i need to insert an image in a WP8. i have a stack of images. once i click the image, it has to be set as background for a grid. so i created an empty "grid1" and button. wrote the below code in the button click event, but the image doesnot get displayed !

 private void bg6_Click(object sender, RoutedEventArgs e)
    {
        System.Windows.Media.ImageBrush myBrush = new System.Windows.Media.ImageBrush();
        Image image = new Image();
        image.Source = new System.Windows.Media.Imaging.BitmapImage(
            new Uri("\\PhoneApp2\\PhoneApp2\\Assets\\bg\\bg5.jpg"));
        myBrush.ImageSource = image.Source;
       // Grid grid1 = new Grid();
        grid1.Background = myBrush;          
    }

Answer 1

It is hard to know if your image file is in the correct place and set to the right build type. I'd suggest adding an event handler to the Image failed event .

private void bg6_Click(object sender, RoutedEventArgs e)
{
  System.Windows.Media.ImageBrush myBrush = new System.Windows.Media.ImageBrush();
  Image image = new Image();
  image.ImageFailed += (s, e) => MessageBox.Show("Failed to load: " + e.ErrorException.Message);
  image.Source = new System.Windows.Media.Imaging.BitmapImage(
  new Uri("\\PhoneApp2\\PhoneApp2\\Assets\\bg\\bg5.jpg"));
  myBrush.ImageSource = image.Source;
  // Grid grid1 = new Grid();
  grid1.Background = myBrush;          
}

Answer 2

First, you don't need to use Image to fill the background from URI.

private void bg6_Click(object sender, RoutedEventArgs e)
{
    System.Windows.Media.ImageBrush myBrush = new System.Windows.Media.ImageBrush(new Uri("\\PhoneApp2\\PhoneApp2\\Assets\\bg\\bg5.jpg"));
   // Grid grid1 = new Grid();
    grid1.Background = myBrush;          
}

Second, it is a WAY better to design it in XAML and manipulate it visibility and source from code by creating the helper class with visibility and source property. Don't forget to implement INotifyPropertyChanged interface into that class.

<Grid x:Name="myGrid" DataContext="{Binding}" Visibility="{Binding Path=VisibleProperty}">
<Grid.Background>
<ImageBrush x:Name="myBrush" ImageSource="{Binding Path=SourceProperty}"></ImageBrush>
</Grid.Background>

And in code:

private void bg6_Click(object sender, RoutedEventArgs e)
{
   myGrid.DataContext=new myImagePresenterClass(new Uri("\\PhoneApp2\\PhoneApp2\\Assets\\bg\\bg5.jpg"), Visibility.Visible)
}

public class myImagePresenterClass:INotifyPropertyChanged
{
private URI sourceProperty
Public URI SourceProperty
{
get
 {
  return sourceProperty;
 }
set
 {
   sourceProperty=value;
   if(PropertyChanged!=null){PropertyChanged(this, new PropertyChangedEventArgs("SourceProperty"));}
 }
}

//Don't forget to implement the Visible property the same way as SourceProperty and the class constructor.
}

Answer 3

i found the mistake... i'm sorry guys. i didn't follow the syntax correctly. i missed the '@' in the Uri method. the correct way to represent this is

 private void bg1_Click(object sender, RoutedEventArgs e)
    {
        System.Windows.Media.ImageBrush myBrush = new System.Windows.Media.ImageBrush();
        Image image = new Image();
        image.ImageFailed += (s, i) => MessageBox.Show("Failed to load: " + i.ErrorException.Message);
        image.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri(@"/Assets/bg/bg1.jpg/", UriKind.RelativeOrAbsolute));
        myBrush.ImageSource = image.Source;
        grid1.Background = myBrush;

    }