Problem binding View to ViewModel with DataTemplate

Question

I have recently started trying to make sense of MVVM and am using the MvvmFoundation classes. I am attempting to use a DataTemplate for a View Model class to display the View. The XAML code is below: TVM is a property of type TrackViewModel.

The TrackView placed in the Stack panel using a DataContext displays correctly. The content control version renders as an empty TrackViewModel.

<Window.Resources>
    <DataTemplate  DataType="{x:Type vm:TrackViewModel}" >
        <v:TrackView/>
    </DataTemplate>
</Window.Resources>
<StackPanel>
    <ContentControl Width="200" Height="50" Content="{Binding Path=TVM, UpdateSourceTrigger=PropertyChanged}"/>
    <v:TrackView DataContext="{Binding TVM}"/>
</StackPanel>

It seems that I havent set up a link between the TrackView in the DataTemplate and the instansiated TrackViewModel, TVM. Consequently the PropertyChangedEventHandler's for TrackViewModel show up as null in the non-working case but are fine when I directly set the Datacontext.

Any thoughts greatly appreciated.

The TrackView XAML is as below:

<UserControl.DataContext>
    <vm:TrackViewModel/>
</UserControl.DataContext>

<UserControl.Resources>
    <LinearGradientBrush x:Key="barBackgroundBrush"  StartPoint="0,0" EndPoint="0,1" Opacity="0.7">
        <GradientStop Offset="0" Color="Blue"/>
        <GradientStop Offset="0.3" Color="Aquamarine"/>
        <GradientStop Offset="1" Color="Blue"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="barTrackingBrush"  StartPoint="0,0" EndPoint="0,1" Opacity="0.7">
        <GradientStop Offset="0" Color="Orange"/>
        <GradientStop Offset="0.3" Color="OrangeRed"/>
        <GradientStop Offset="1" Color="Orange"/>

    </LinearGradientBrush>

    <DataTemplate x:Key="RegionDataTemplate" >
        <Border CornerRadius="5" BorderThickness="3" Background="{StaticResource barTrackingBrush}" 
                    Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Canvas}}}"
                    Width="{Binding Path=Duration}">
            <Border.RenderTransform>
                <TranslateTransform X="{Binding Path=StartFrame}"/>
            </Border.RenderTransform>
        </Border>
    </DataTemplate>
       <UserControl.DataContext>
    <vm:TrackViewModel/>
</UserControl.DataContext>
</UserControl.Resources>

<StackPanel>
    <ItemsControl ItemsSource="{Binding Path=Regions, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" ItemTemplate="{StaticResource RegionDataTemplate}" VerticalAlignment="Center">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Background="{StaticResource barBackgroundBrush}" Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Panel}}}" VerticalAlignment="Stretch"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</StackPanel>

Abe Heidebrecht Abe Heidebrecht · Accepted Answer · 2010-11-01T19:47:21

Since you are setting the DataContext in the UserControl XAML, it won't be inherited in the ContentControl case. In the second case, you are setting it explicitly, which will override when it is set in the UserControl declaration. Deleting this will allow the UserControl to inherit the DataContext of the ContentControl, which will be the Content that you set in the Binding.

Problem binding View to ViewModel with DataTemplate

1 Answers