Problem showing the master details of CurrentItem from a collection displayed with System.Controls.Image

Question

5.00/5 (1 vote)

See more:

, +

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&lt;}
Text="{Binding Name}">
</TextBlock>

Posted 29-Jun-11 4:54am

zinov

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Mark Salsbery · Answer 1 · 2011-06-29T09:52:00

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>