Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
I am trying to display the name of a Photo object in a Label, but I am displaying this Photo in specific control System.Windows.Image, this control has a binding to the CurrentItem of a collection of Photos, so if I have a button to display the next Photo, I want to show in my Label the Name of the Photo(the currentItem of the collection!!!!) or another Property inside the object.
 
public class Photo
{
      Name name;
      BitmapFrame _image;
 
      public Photo(string path)
      {
            Name = path;
            Uri source = new Uri(path);
            _image = BitmapFrame.Create(_source);
      }
 
      public BitmapFrame ImageFrame { get { return _image; } set { _image = value; } }
}
 
public partial class ImageViewer : Window
{
      int currentIndex = 0;
      ObservableCollection<Photo> photos;
 
      public ImageViewer()
      {
            InitializeComponent();
 
            photos = new ObservableCollection<Photo>();
 
            Photo photo1 = new Photo(@"C:/Users/.../DSC00700.jpg");
            Photo photo2 = new Photo(@"C:/Users/../DSC00581.jpg");
            Photo photo3 = new Photo(@"C:/Users/../3882_6.jpg");
 
            photos.Add(photo1);
            photos.Add(photo2);
            photos.Add(photo3);
 
            //datacontext of the window
            this.DataContext = photos;
      }
 
      private void NextPhoto(object sender, RoutedEventArgs e)
      {
            currentIndex++;
            if (currentIndex == photos.Count)
                  currentIndex = 0;
            image.Source = photos[currentIndex].ImageFrame;
      }
}
 
the xaml code:
 
            <Image
                  Grid.Column="0"
                  Grid.Row="0"
                  Name="image"
                  Stretch="Fill"
                  DataContext ="{Binding /}"
                  Source="{Binding ImageFrame}"
            >
            </Image>
 
            <TextBlock
                  DataContext="{Binding /}" or something like this: DataContext={"Binding ElementName=image", Path=DataContext<}
                  Text="{Binding Name}">
            </TextBlock>
Posted 29-Jun-11 4:54am
zinov109

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Instead of setting the Window DataContext to the entire collection, what about setting it to the currently selected item? Then the image Source property can be binded to ImageFrame (like you have already redundantly done - you do it in code too) and the TextBlock Text property can be binded to Name like you have it. You can get rid of the DataContext binding on the TextBlock and the Image since you'd be using the inherited DataContext.
 
Note you're going to need to provide a property in your Photo class to bind to for the name...a private field isn't going to work.
 
Here's an example (I did this in Silverlight since you mention Silverlight in your tags...same things apply to WPF. Also note that I changed the URIs for my test code so I could use my images.)
    public partial class ImageTestPage : UserControl
    {
        int currentIndex = 0;
        ObservableCollection<Photo> photos = new ObservableCollection<Photo>();
 
        public ImageTestPage()
        {
            InitializeComponent();
 
            photos.Add(new Photo("Images/Airplane.png"));
            photos.Add(new Photo("Images/Silverlight_Logo.jpg"));
 
            this.DataContext = photos[currentIndex];
        }
 
        private void NextPhoto(object sender, RoutedEventArgs e)
        {
            currentIndex++;
            if (currentIndex == photos.Count)
                currentIndex = 0;
            this.DataContext = photos[currentIndex];
        }
    }
 

    public class Photo
    {
        BitmapImage _image;
 
        public Photo(string path)
        {
            Name = path;
            Uri source = new Uri(path, UriKind.Relative);
            _image = new BitmapImage(source);
        }
 
        public string Name { get; set; }
        public BitmapImage ImageFrame { get { return _image; } set { _image = value; } }
    }
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Name="nextButton" Content="Next" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" Click="NextPhoto" />
        <Image Grid.Column="0"
               Grid.Row="0"
               Stretch="Fill"
               Source="{Binding ImageFrame}" 
               Margin="40" />
        <TextBlock Text="{Binding Name}" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
    </Grid>
  Permalink  
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Guruprasad.K.Basavaraju 450
1 Sergey Alexandrovich Kryukov 325
2 Shai Vashdi 318
3 OriginalGriff 265
4 Peter Leow 171
0 Sergey Alexandrovich Kryukov 9,109
1 OriginalGriff 5,290
2 Peter Leow 4,010
3 Maciej Los 3,535
4 Abhinav S 3,263


Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 29 Jun 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid