Moving xaml code behind to a view-model class [closed]

Question

I am trying to load a usercontrol inside a window in WPF.

MainWindow.XAML (Simplified for sake of visibility)

<Window x:Class="CoffeeShop.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="700" Width="625">

   <Grid>
        <ContentControl HorizontalAlignment="Left" Margin="10,10,10,10" Name="orderTable" >
            <Grid>

            </Grid>
        </ContentControl>
    </Grid>
</Window>

In the code-behind, I am creating an instance of that usercontrol and setting the itemsSource of a datagrid inside it. Loading my userControl inside the contentControl of my xamlpage.

MainWindow.XAML.cs

            // OrderTable is my `userControl`
            OrderTable order = new CoffeeShop.OrderTable();
            order.PayButton.Click += OnPayButtonClicked;
            order.dataGrid1.ItemsSource = itemsList;

I have created a ViewModel class called OrderViewModel and the OrderViewModel.cs contains

namespace CoffeeShop.ViewModel
{
    class OrderViewModel
    {
        public Order OrdersViewModelProperty { get; set; }

        public OrderViewModel()
        {
            OrdersViewModelProperty = new Order();

            // Adopt the MVVM pattern ???
            // Bring the above code in the MainWindow.XAML.cs here ?
        }
    }
}

The problem is how to adopt this to a MVVM model ? Referred many tutorials but still feels a bit difficult to achieve this. Any pointers is much appreciated.

EDIT

<Window x:Class="dataTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ContentControl Content= "{Binding Path=MyOrderViewModelProperty}">
            <DataTemplate DataType="{x:type local:OrderViewModel}">
                <view:UserControl1 />
                <DataTemplate/>
        </ContentControl>

    </Grid>
</Window>

I tried as per the pointer, but this is the error that is shown the content is set more than once.

Answer 1

the easy answer: use DataTemplate, use Binding.

datatemplate for your viewmodel

 <DataTemplate DataType="{x:type local:OrderViewModel}">
   <view:MyOrderViewWithDataGridAndSoOn />
 <DataTemplate/>

bind the instance of your orderviewmodel to the contentcontrol

 <ContentControl Content="{Binding Path=MyOrderViewModelProperty}"/>

thats all. within your view you should use binding too. eg:

<DataGrid ItemsSource="{Binding Path=MyItemsListProperty}"/>