Question

I am trying to learn MVVM by making a magic card app. I don’t conceptually know how to link data and commands into the View from the view Model. I understand how to make data available in the view model but not how to access it from the view.

The main question is what is incorrect in the xaml, I am getting an exception on the button, I assume to do with the binding to the command which also means that the data is probably not working either.

<Window x:Class="MagicDB.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MagicDB"
    Title="MainWindow" Width="500" Height="500">

<Window.DataContext>
    <local:MainWindowViewModel x:Name="viewModel" />
</Window.DataContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="450*" />
    </Grid.RowDefinitions>
    <DataGrid AutoGenerateColumns="False" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top"
        IsSynchronizedWithCurrentItem="True" Width="auto" Height="auto" Grid.Row="1">
        <DataGrid.Columns>
            <DataGridTextColumn Header="ID" Binding="{Binding CardID}" Width="25" ></DataGridTextColumn>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="110"></DataGridTextColumn>
            <DataGridTextColumn Header="Mana" Binding="{Binding Mana}" Width="30" ></DataGridTextColumn>
            <DataGridTextColumn Header="Card Text" Binding="{Binding CardTXT}" Width="100*"></DataGridTextColumn>
            <DataGridTextColumn Header="Flavor Text" Binding="{Binding FlavorTXT}" Width="100*"></DataGridTextColumn>
            <!--DataGridCheckBoxColumn Header="Cost" Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" ></DataGridCheckBoxColumn-->
        </DataGrid.Columns>
    </DataGrid>
    <Button Content="Initiliaze Database" Height="23" HorizontalAlignment="Left" Margin="55,16,0,0" Name="initdb" VerticalAlignment="Top" Width="75"
            Command="Binding InitCardDB"/>
</Grid>

The main issue is an exception is thrown on the button. I don’t think I am getting the data for the grid either.

namespace MagicDB
{
class MainWindowViewModel : ObservableObject
{
    private CardDB _cards;
    private Command _InitCardDB;

    public CardDB Cards
    {
        get { return _cards; }
        set { _cards = value; OnPropertyChanged("Cards"); }
    }

   public MainWindowViewModel()
    {
        //var cards = GetCards();

        //var cardViewModels = new List<CardViewModel>();
        //cards.ForEach(c => cardViewModels.Add(new CardViewModel(c)));
        _InitCardDB = new Command(InitDB, true);
        Cards = new CardDB(); ;
    }

    public Command InitCardDB
    {
        get
        {
            if (_InitCardDB == null)
            {
                _InitCardDB = new Command(
                    param => InitDB()
                );
            }
            return _InitCardDB;
        }

    }

    private void InitDB()
    {
        _cards = new CardDB();
        _cards.InitDB();
    }
}

}

Any help would be great, especially what I am doing wrong and where I conceptually made an error. I might be approaching this incorrectly altogether? Thanks in advance for your time.

Answer 1

The DataGrid has no items because you need to set its ItemsSource

The Button is causing an exception because you are attempting to assign the string "Binding InitCardDb" to the Command property instead of using "{Binding InitCardDb}" The "{}" tells the XAML processor to use what’s called a Markup Extension instead of using the text

Other than that your approach looks correct