CODEWITHSUNDEEP
wpfmvvm
user1656632
user1656632

Reputation:

WPF - TwoWay binding to Image

I have a twoway bind that works on one page. I will show how the data gets there by including the declaration code (not complete).

<Page.Resources>
    <local:myViewModel x:Key="myList" />
</Page.Resources>

<ListView x:Name="mylvw" 
          DataContext="{StaticResource ResourceKey=myList}"
          ItemsSource="{Binding Path=myItems}"

<Image DataContext ="{Binding SelectedItem, 
                      ElementName=lvw, 
                      Mode=TwoWay}"
       Source="{Binding Path=myImage}" />

So I click on the item in the listview and it populates the image with stored image and I am able to change the image using the TwoWay bind.

My problem page has a different setup. I want to show the selected listview item (ViewModel) in a new window. I am calling the window from a Command in the ViewModel and setting the Datacontext for the Window there:

class myViewModel: INotifyPropertyChanged
{

    public ICommand OpenDetailsCommand
        {
            get { return new RelayCommand(OpenDetailsWindow); }
        }

    public void OpenDetailsWindow()
        {
            myWindow w = new myWindow();
            w.DataContext = this;
            w.Show();
        }

So I have no resource in this window i.e. Window.Resource

My image is the following:

<Image x:Name="myImage" 
       Source="{Binding Path=myImage}"/>

This shows the image but I am unable to use the binding to change the image on edit. If I try:

<Image x:Name="myImg" 
       Source="{Binding Path=myImage, Mode=TwoWay}"/>

The binding does not work at all ... no image displayed. So i tired to specify the TwoWay in the Datacontext in the following way:

<Image x:Name="myImg"
       DataContext="{Binding myImage, RelativeSource={RelativeSource FindAncestor, 
       AncestorType={x:Type Window}}, TwoWay}"
       Source="{Binding Path=myImage}"/>

I tried this as a way of replicating the one that works. This also does not bind at all i.e. no image displayed.

So I have 3 questions

  1. How can I get the Image to bind to the windows datacontext in a TwoWay mode.

  2. Am I doing this all wrong from the start by setting the Datacontext in the ViewModel?

  3. Is there a better way to pass ViewModels from window/page to window/page?

Thank you in anticipation.

Upvotes: 0

Views: 1228

Answers (2)

user1656632
user1656632

Reputation:

So I managed to solve this by changing the Image binding on the problem page and keep my original set up.

<Image
    DataContext="{Binding DataContext, ElementName=myPage, Mode=TwoWay}"
    Source="{Binding Path=myModel.myImage}" />

This gives me the TwoWay binding I was looking for.

Upvotes: 0

Nitin Purohit
Nitin Purohit

Reputation: 18580

The problem with your code is in view model you dont have any property myImage to which you have bound your Image in new window. So in order to make binding work create a property like SelectedItem of type of item in itemslist on your viewmodel and bind the listview to it like:

<ListView x:Name="mylvw" 
          DataContext="{StaticResource ResourceKey=myList}"
          ItemsSource="{Binding Path=myItems}"
SelectedItem = "{Binding SelectedItem}"

Now since you have set the DataContext of your new window to the present viewmodel so you can bind the Image on your new window as

<Image x:Name="myImage" 
       Source="{Binding Path=SelectedItem.myImage}"/>

Upvotes: 1

Related Questions