XAML and ViewModel Binding inside ControlTemplate

Question

I want to utilize the ViewModel function within the .xaml.cpp and .xaml file. I have created the ViewModel's getter and setter functions and attempted to bind it within the controlTemplate, where it is locally defined.

Unfortunately, I am encountering an issue where the ViewModel is returning as null when I attempt to use it and hence the visibility/SizeChanged of the grid in ShoppingItem.xaml is not set properly. The debug pointer is not reaching to the ShoppingItem::ViewModel::set(ViewModels::ShoppingItemVM ^ value) function and the get function is always returning null viewModel.

I have tried multiple combination while binding the viewModel in UserControl of ShoppingToApps.xaml but still the ViewModel::set never gets called.

<local:ShoppingItem ViewModel="{Binding}"/\>
<local:ShoppingItem ViewModel="{Binding viewModels:ShoppingItemVM}"/\>
<local:ShoppingItem DataContext="{Binding}"/\>
<local:ShoppingItem ViewModel="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext}"/\>
<local:ShoppingItem ViewModel="{TemplateBinding}"/\>

ShoppingToApps.xaml

    <UserControl.Resources>
        <DataTemplate x:Key="ClipboardItemTemplate" x:DataType="viewModels:ClipboardItemVM">
            <local:CopyToClipboardItem ViewModel="{x:Bind}"/>
        </DataTemplate>
        <DataTemplate x:Key="InstalledAppTemplate" x:DataType="viewModels:ShoppingItemVM" >
            <tc:TileCustomControl
                x:Name="TileControl"
                IsTabStop="False"
                ViewModel="{x:Bind TileControlViewModel, Mode=OneWay}"
                AutomationProperties.AccessibilityView="Control"
                AutomationProperties.AutomationId="{x:Bind Label}"
                AutomationProperties.Name="{x:Bind TileControlViewModel.Label, Mode=OneWay}">
                <tc:TileCustomControl.Template>
                    <ControlTemplate>
                        <local:ShoppingItem ViewModel="{Binding}"/>
                    </ControlTemplate>
                </tc:TileCustomControl.Template>
            </tc:TileCustomControl>
        </DataTemplate>
        <local:TargetAppTemplateSelector
            x:Key="TargetAppTemplateSelector"
            ClipboardItem="{StaticResource ClipboardItemTemplate}"
            InstalledApp="{StaticResource InstalledAppTemplate}"/>
    </UserControl.Resources>

ShoppingItem.xaml

<UserControl x:Class="ShoppingPickerUI.ShoppingItem"
             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:util="using:ShoppingdUtilities"
             xmlns:local="using:ShoppingPickerUI"
             d:DesignHeight="300"
             d:DesignWidth="400" 
             mc:Ignorable="d"
             ToolTipService.ToolTip="{x:Bind local:ToolTipHelper.ResolveToolTip(LabelText.Text, LabelText.IsTextTrimmed), Mode=OneWay}">
    <Grid>
        x:Name="DefaultAppGrid"
        SizeChanged="AddPromotedRow"
        Style="{StaticResource ShoppingItemRootGridStyleSV}"
        Visibility="{Binding ViewModel.IsDefaultLabelVisible}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Rectangle 
            Grid.Row="0"
            Style="{StaticResource ShoppingItemPlateStyleSV}" >
            <Rectangle.Fill>
                <SolidColorBrush Color="{Binding PlateColor}"/>
            </Rectangle.Fill>
        </Rectangle>
        <Border 
            Grid.Row="0"
            BorderThickness="2"
            Style="{StaticResource ShoppingItemPlateStyleSV}" />
        <Image
            Grid.Row="0"
            Source="{Binding Icon}"
            Style="{StaticResource ShoppingItemIconStyleSV}" 
            AutomationProperties.AccessibilityView="Raw"/>
        <local:TwoLinesTextBlock 
            x:Name="LabelText" 
            Grid.Row="1" 
            Text="{Binding Label}"/>
    </Grid>
</UserControl>

ShoppingItem.xaml.cpp

#include "pch.h"
#include "ShoppingItem.xaml.h"
#include <ShoppingItemVM.h>

using namespace ShoppingPickerUI;
using namespace ShoppingdUtilities;

ShoppingItem::ShoppingItem()
{
 InitializeComponent(ref new ::Windows::Foundation::Uri(GetFullFileResourcePath(L"ShoppingPickerUI/ShoppingItem.xaml")));
}

void ShoppingItem::AddPromotedRow()
{
    if (ViewModel != nullptr)
    {
        //ViewModel is coming as null
        //Call some ViewModel.func_defined_in_VM();
    }
}


ViewModels::ShoppingItemVM ^ ShoppingItem::ViewModel::get()
{
    return m_viewModel;
}

void ShoppingItem::ViewModel::set(ViewModels::ShoppingItemVM ^ value)
{
    if (m_viewModel != value)
    {
        m_viewModel = value;
        PropertyChanged(this, ref new Windows::UI::Xaml::Data::PropertyChangedEventArgs(L"ViewModel"));
    }
}