c# - How do I make the simplest viewmodel work?

Question

Im trying to understand how to use a viewmodel to bind data to a wpf window but cannot find any simple examples or explanations on how that is achieved.

This is what I have so far:

ViewModel.cs

public class ViewModel
{
    public string Info = "Infoo";
}

MainWindow.xaml.cs

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }

MainWindow.xaml

<Window x:Class="PeopleApp.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:PeopleApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="23" Margin="212,137,0,0" TextWrapping="Wrap" Text="{Binding Info}" VerticalAlignment="Top" Width="120"/>

    </Grid>
</Window>

Why does the textbox not show "Infoo"? What am I missing?

Edit:

I've changed the field in the ViewModel to a property, but how do I connect the ViewModel to actual data?

Answer 1

Mistakes in your code:

• You need to have property on the VM not the public field.
• you need to set the value for the property of VM instance before assigning it to the DataContext of MainWindow

This should work.

MainWindow.xaml

<Window x:Class="PeopleApp.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:PeopleApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>       
            <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="23" Margin="212,137,0,0" TextWrapping="Wrap" Text="{Binding Info}" VerticalAlignment="Top" Width="120"/>        
    </Grid>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {         
        InitializeComponent();
        this.DataContext = new ViewModel() { Info = "Infoo" };
    }    
}

ViewModel.cs

public class ViewModel
{
    public string Info { get; set; }        
}