Visual Studio issue: MSDN XAML code doesn't work

Question

I asked a question where I can't make my content appear inside my DataGrid and I thought then I try a working solution and work my way up from there. However when I stumbled accross this MSDN article and copy-pasted its XAML content right inside my freshly created Window (in my new, empty WPF app) the issue persists: no content appears in the DataGrid. Here is my Window's XAML:

<Window x:Class="DataGridTry.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:DataGridTry"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.Resources>
        <!--DataTemplate for Published Date column defined in Grid.Resources.  PublishDate is a property on the ItemsSource of type DateTime -->
        <DataTemplate x:Key="DateTemplate" >
            <StackPanel Width="20" Height="30">
                <Border Background="LightBlue" BorderBrush="Black" BorderThickness="1">
                    <TextBlock Text="{Binding PublishDate, StringFormat={}{0:MMM}}" FontSize="8" HorizontalAlignment="Center" />
                </Border>
                <Border Background="White" BorderBrush="Black" BorderThickness="1">
                    <TextBlock Text="{Binding PublishDate, StringFormat={}{0:yyyy}}" FontSize="8" FontWeight="Bold" HorizontalAlignment="Center" />
                </Border>
            </StackPanel>
        </DataTemplate>
        <!--DataTemplate for the Published Date column when in edit mode. -->
        <DataTemplate x:Key="EditingDateTemplate">
            <DatePicker SelectedDate="{Binding PublishDate}"  />
        </DataTemplate>
    </Grid.Resources>
    <DataGrid Name="DG1" ItemsSource="{Binding}" AutoGenerateColumns="False" >
        <DataGrid.Columns>
            <!--Custom column that shows the published date-->
            <DataGridTemplateColumn Header="Publish Date" CellTemplate="{StaticResource DateTemplate}" CellEditingTemplate="{StaticResource EditingDateTemplate}" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>

As you see, just copy-paste, but still doesn't give the expected result. Shall I reinstall VS? (using 2015 ATM). What could cause the issue?

Answer 1

You're not binding your DataGrid properly. You haven't posted your model, but as an example, try creating an ObservableCollection in the code-behind for your new window and the bind your DataGrid to that collection:

    <Window x:Class="DataGridTry.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:DataGridTry"
    mc:Ignorable="d" Name="Root"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.Resources>
        <!--DataTemplate for Published Date column defined in Grid.Resources.  PublishDate is a property on the ItemsSource of type DateTime -->
        <DataTemplate x:Key="DateTemplate" >
            <StackPanel Width="20" Height="30">
                <Border Background="LightBlue" BorderBrush="Black" BorderThickness="1">
                    <TextBlock Text="{Binding PublishDate, StringFormat={}{0:MMM}}" FontSize="8" HorizontalAlignment="Center" />
                </Border>
                <Border Background="White" BorderBrush="Black" BorderThickness="1">
                    <TextBlock Text="{Binding PublishDate, StringFormat={}{0:yyyy}}" FontSize="8" FontWeight="Bold" HorizontalAlignment="Center" />
                </Border>
            </StackPanel>
        </DataTemplate>
        <!--DataTemplate for the Published Date column when in edit mode. -->
        <DataTemplate x:Key="EditingDateTemplate">
            <DatePicker SelectedDate="{Binding PublishDate}"  />
        </DataTemplate>
    </Grid.Resources>
    <DataGrid DataContext="{Binding ElementName=Root}" Name="DG1" ItemsSource="{Binding PublishedDateModels}" AutoGenerateColumns="False" >
        <DataGrid.Columns>
            <!--Custom column that shows the published date-->
            <DataGridTemplateColumn Header="Publish Date" CellTemplate="{StaticResource DateTemplate}" CellEditingTemplate="{StaticResource EditingDateTemplate}" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>

An example model:

public class PublishedDateModel : INotifyPropertyChanged
    {
        private DateTime _publishDate;

        public DateTime PublishDate
        {
            get { return _publishDate; }
            set
            {
                if (value.Equals(_publishDate)) return;
                _publishDate = value;
                OnPropertyChanged();
            }
        }

        public PublishedDateModel(DateTime date)
        {
            PublishDate = date;
        }


        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

And in your MainWindow.cs file:

public ObservableCollection<PublishedDateModel> PublishedDateModels { get; set; }

        public MainWindow()
        {
            PublishedDateModels = new ObservableCollection<PublishedDateModel>(new[]
            {
                new PublishedDateModel(DateTime.Now), 
                new PublishedDateModel(DateTime.Now.AddDays(1)), 
                new PublishedDateModel(DateTime.Now.AddDays(-1)), 
            });
            InitializeComponent();
        }

Answer 2

There's nothing wrong with the XAML. It is just incomplete.

 Name="DG1" ItemsSource="{Binding}"

DataGrid DG1 needs data bound to it.

For a quick example, add this to the code-behind (MainWindow.xaml.cs):

using System.Collections.ObjectModel;

namespace DataGridTry
{
    public class ThingBeingPublished
    {
        public DateTime PublishDate { get; set; }
    };

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var listOfThings = new ObservableCollection<ThingBeingPublished();

            listOfThings.Add(new ThingBeingPublished() { PublishDate = DateTime.Now.AddDays(-2) });
            listOfThings.Add(new ThingBeingPublished() { PublishDate = DateTime.Now.AddDays(-1) });
            listOfThings.Add(new ThingBeingPublished() { PublishDate = DateTime.Now });

            DG1.ItemsSource = listOfThings;
        }
    }
}

Now you should see:

Ideally, this would not be done in the code-behind.