WPF - 两个绑定到图像

时间:2013-09-22 14:28:51

标签: wpf mvvm

我有一个twoway绑定在一个页面上工作。我将通过包含声明代码(不完整)来显示数据是如何到达那里的。

<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}" />

所以我点击列表视图中的项目,它用存储的图像填充图像,我可以使用TwoWay绑定更改图像。

我的问题页面有不同的设置。我想在新窗口中显示所选列表视图项(ViewModel)。我从ViewModel中的Command调用窗口并在那里设置Window的Datacontext:

class myViewModel: INotifyPropertyChanged
{

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

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

所以我在这个窗口中没有资源,即Window.Resource

我的图片如下:

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

这显示图像,但我无法使用绑定来更改编辑时的图像。 如果我尝试:

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

绑定根本不起作用......没有显示图像。 所以我厌倦了以下列方式在Datacontext中指定TwoWay:

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

我尝试过这种方法来复制有效的方法。这也完全没有绑定,即没有显示图像。

所以我有3个问题

  1. 如何在TwoWay模式下将Image绑定到windows datacontext。

  2. 我从一开始就通过设置Datacontext来完成这一切 视图模型

  3. 有没有更好的方法将ViewModels从窗口/页面传递到窗口/页面?

  4. 感谢您的期待。

2 个答案:

答案 0 :(得分:1)

您的代码存在的问题是在视图模型中,您没有在新窗口中绑定myImage的任何属性Image。因此,为了进行绑定工作,在SelectedItem上的itemslist中创建类似viewmodel项目类型的属性,并将listview绑定到它:

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

现在,因为您已将新窗口的DataContext设置为当前的viewmodel,因此您可以将Image绑定到新窗口

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

答案 1 :(得分:0)

所以我设法通过更改问题页面上的图像绑定并保留原始设置来解决这个问题。

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

这给了我正在寻找的TwoWay绑定。