将子视图中的元素绑定到父ViewModel的属性

Question

Like the title says, I would like to bind an element in a child View to a property of the parent ViewModel.

Is there a Caliburn.Micro or default WPF XAML syntax to do this? I mean, this exact situation: to bind to parent ViewModel's property.

Or should I try to achieve this some other way? Is so, what would be the best/easiest way to do it?

Here is a very basic Caliburn.Micro App example:

MainWindowViewModel.cs

namespace BindingToParentVMProperty.MVVM
{
    public class MainWindowViewModel
    {
        public ChildViewModel Child { get; set; }
        public string ParentName { get; set; }

        public MainWindowViewModel()
        {
            Child = new ChildViewModel();
            ParentName = "Peter Griffin";
        }
    }
}

MainWindowView.xaml :

<UserControl x:Class="BindingToParentVMProperty.MVVM.MainWindowView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d">
    <Grid Width="200" Height="200">
        <ContentControl Name="Child" />
    </Grid>
</UserControl>

ChildViewModel.cs :

using Caliburn.Micro;

namespace BindingToParentVMProperty.MVVM
{
    public class ChildViewModel
    {
        public BindableCollection<GrandChildViewModel> GrandKids { get; set; }
        public string ChildName { get; set; }

        public ChildViewModel()
        {
            ChildName = "Stewie Griffin";
            GrandKids = new BindableCollection<GrandChildViewModel>
                {
                    new GrandChildViewModel {GrandChildName = "Stewie Griffin Jr."},
                    new GrandChildViewModel {GrandChildName = "Rupert Griffin Jr."}
                };
        }
    }
}

ChildView.xaml :

<UserControl x:Class="BindingToParentVMProperty.MVVM.ChildView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <StackPanel>
        <!-- need to bind to MainWindowViewModel.ParentName-->
        <TextBlock Text="{Binding Path=HowToBindTo_ParentName}"/>
        <ListView Name="GrandKids" />
    </StackPanel>
</UserControl>

GrandChildViewModel.cs :

namespace BindingToParentVMProperty.MVVM
{
    public class GrandChildViewModel
    {
        public string GrandChildName { get; set; }
    }
}

GrandChildView.xaml :

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             x:Class="BindingToParentVMProperty.MVVM.GrandChildView"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <StackPanel>
        <TextBlock x:Name="GrandChildName" />
        <!-- need to bind to ChildViewModel.ChildName -->
        <TextBlock Text="{Binding Path=HowToBindTo_ChildName}"/>
    </StackPanel>
</UserControl>

Answer 1

It seems like the most straightforward suggestion would be to keep some record of the parent on the child ViewModel (eg a Parent property). Since you want to have your ViewModels tied to their respective Views , I think it will become conceptually quite tricky if you start to bind to properties and include information from beyond the scope of the bound ViewModel .

Also, whilst it may not be of concern for the particular project you're working on, if you start including properties from other UserControls , you're implicitly creating a links and dependencies, which may come back to inconvenience you if you wish to re-use the controls elsewhere in a non-hierarchical context.

That said, you could traverse up your UI tree to get the required DataContext ( ViewModel ) from a parent control, and bind to the desired property using existing WPF syntax, as Kollegos suggests, by using RelativeSource and the AncestorType property.

In your case, it might look something like this:

<UserControl x:Class="BindingToParentVMProperty.MVVM.ChildView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:YourProjectNamespaceContainingParentView"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
    <!-- Set our DataContext bind to parent MainWindowViews DataContext (ViewModel) -->
    <TextBlock Text="{Binding Path=ParentName}"
        DataContext="{Binding RelativeSource={RelativeSource
                      FindAncestor, AncestorType={x:Type local:MainWindowView}},
                      Path=DataContext}"/>
    <ListView Name="GrandKids" />
</StackPanel>

RelativeSource Documentation

Answer 2

So, you can use MainWindowViewModel for all your views, but I don't know how it work with Caliburn. I dont know how you use your UserControl s, but maybe RelativeSource can help you (you can bind to DataContext of relative control for example).