Binding child DataContext from within DataTrigger - wpf

Question

I have been trying to develop a bar of RadioButtons (styled as ToggleButtons) which select which content is displayed in a ContentControl. I have been able to use a DataTrigger to display the proper view in the ContentControl based on which RadioButton is checked, but I am also trying to bind a view model from the parent DataContext into the child's DataContext, without success. A minimum sample is as follows:
<Window x:Class="WpfApplication1.MainWindow"
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"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" >
<RadioButton Name="rbShowChild" Content="Show Child" Style="{StaticResource {x:Type ToggleButton}}" />
</StackPanel>
<ContentControl Grid.Row="1">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=rbShowChild}" Value="True">
<Setter Property="Content">
<Setter.Value>
<local:ChildView DataContext="{Binding ChildViewModel, PresentationTraceSources.TraceLevel=High}"/>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
</Window>
The Binding to the ChildViewModel seems to be the part that is not working as expected. For completeness, here is the related ChildView.
<UserControl x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<StackPanel>
<TextBlock Text="Child" />
<TextBlock Text="{Binding Text}" />
</StackPanel>
</Grid>
</UserControl>
And the ViewModels:
namespace WpfApplication1
{
public class ChildViewModel
{
public string Text { get; set; }
public ChildViewModel()
{
Text = "It works!";
}
}
public class MainWindowViewModel
{
public ChildViewModel ChildViewModel { get; set; }
public MainWindowViewModel()
{
ChildViewModel = new ChildViewModel();
}
}
}
And the MainWindow DataContext is set as follows:
var window = new MainWindow()
{
DataContext = new MainWindowViewModel()
};
window.Show();
The Output window (with PresentationTraceSources.TraceLevel=High) shows this:
System.Windows.Data Error: 3 : Cannot find element that provides DataContext. BindingExpression:Path=ChildViewModel; DataItem=null; target element is 'ChildView' (Name=''); target property is 'DataContext' (type 'Object')
which leads me to think that somehow the MainWindow.DataContext is not the DataContext used to resolve the "{Binding ChildViewModel}" expression in the trigger, but I couldn't find any DataContext property on the trigger, nor have I been able to find anything in my searches to suggest an answer for this.
I would very much appreciate any suggestions to resolve this.

Answer 1

UPDATE: Looks like the issue is with how you are setting the data context.
Set the DataContext of the window in the XAML, then set the data context of the ContentControl to the ChildViewModel. Then set the actual displayed Content (AKA ChildView) Value. The ContentControl is the host of this view, so it should be the DataContext supplier. I myself am a little unsure the exact mechanics going on, but I know for fact the below code works.
NOTE Your XML namespaces may vary from the code below. Adjust accordingly.
<Window.DataContext>
<!-- Data Context added here OR in code-behind initialize-->
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" >
<RadioButton Name="rbShowChild" Content="Show Child" Style="{StaticResource {x:Type ToggleButton}}" />
</StackPanel>
<!-- Bind the ContentControls Data context-->
<ContentControl DataContext="{Binding ChildViewModel}" Grid.Row="1">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=rbShowChild}" Value="True">
<Setter Property="Content">
<Setter.Value>
<!-- Just simply set the view content here, no binding.-->
<local:ChildView />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
Doing this, I have run your application just fine in a project.