Lesson 21.4 – Completing the trading screen

Lesson Objectives

At the end of this lesson, you will know…

• How to open a new form with a button click on a different form
• How to pass variables to a different form
• The difference between passing a variable by value, and by reference

There are several steps needed, to finish adding the trading screen. When you finish each step, run the program, to be sure the change works. If there is a problem, it will be much easier to find out where it is if you have only made one change.

Step 1: In the SuperAdventure project, create a new Windows form named TradingScreen.cs. Do this by right-clicking on the SuperAdventure (UI) project, and selecting Add -> Windows Form.

In Visual Studio’s Solution Explorer, select the TradingScreen file, to edit in design (graphic) mode.

Set the form’s properties to these values, using the “Properties” section in the lower-right corner of Visual Studio:

Next, add these controls to the screen.

Labels

DataGridViews

Button

Create one button, and set its properties to these values:

Then, create an eventhandler for the button’s Click event. You can do this by:

1. Double-click on the btnClose button, in the Design (UI) editor.
2. Or, select the button in the Design editor, click on the lightning bolt symbol (in the properties area of Visual Studio), and type in the value “btnClose_Click” for the Click event.

Both of these methods will create the eventhandler in TradingScreen.Designer.cs, and the empty function in TradingScreen.cs.

Edit TradingScreen.cs, so the btnClose_Click function looks like this:

private void btnClose_Click(object sender, EventArgs e)
{
   Close();
}

Now, when the user clicks the “Close” button, the TradingScreen form will close (not be visible anymore).

NOTE: If you copy the code from GitHub or Dropbox, and your UI project is not named SuperAdventure, look at the namespace in your TradingScreen.cs file before you paste the code into them. Then, change the namespace from “SuperAdventure” to your namespace, after you paste in the code.

Step 2: Now, let’s open up the trading screen when the user clicks on the “Trade” button.

Edit SuperAdventure.cs, and change the btnTrade_Click function to this:

private void btnTrade_Click(object sender, EventArgs e)
{
   TradingScreen tradingScreen = new TradingScreen();
   tradingScreen.StartPosition = FormStartPosition.CenterParent;
   tradingScreen.ShowDialog(this);
}

When the player clicks the “Trade” button, this btnTrade_Click function will run.

It will create a new object/instance of the TradingScreen form, and set its position to the center of its parent. The SuperAdventure form is its parent, because that is where we created the object.

The ShowDialog() function is what makes the TradingScreen form display itself.

Build and run the game, to make sure these changes work.

You should be able to click on the “Trade” button, see the new trading screen appear, and click the “Close” button to remove it.

Step 3: When we display this form, we want to populate the datagridviews with the inventories – ours and the vendor’s. So, we need to get that information to the form. I’ll show you two ways to do that.

Method 1 – Set a property on the form

The first way is to create a public property on the new form.

Edit TradingScreen.cs, and add this property:

public Player CurrentPlayer { get; set; }

You also need to add this “using” statement, at the top of TradingScreen.cs, for the form to know where the Player class is:

using Engine;

Now that the form has this public property, change the btnTrade_Click function, in SuperAdventure.cs, to this:

private void btnTrade_Click(object sender, EventArgs e)
{
   TradingScreen tradingScreen = new TradingScreen();
   tradingScreen.StartPosition = FormStartPosition.CenterParent;
   tradingScreen.CurrentPlayer = _player;
   tradingScreen.ShowDialog(this);
}

After we instantiate/create the form object, we set its CurrentPlayer property to the _player object in SuperAdventure.cs. So, the functions inside TradingScreen.cs will be able to work with our _player object.

NOTE: When we set CurrentPlayer to the _player object, the game does not create a copy of our _player object, and make a second variable inside TradingScreen.cs. It points to the exact same variable/object that is already in SuperAdventure.

So, if we do something to TradingScreen.CurrentPlayer (such as, sell an item and remove it from CurrentPlayer’s inventory), we will see that item is gone when we look at _player’s inventory.

This is called “using/passing a variable by reference”. There is not a second copy of the variable, only a “reference” to the original variable. For more details, and samples, of how this works, you can read this post: C# – Difference between passing variables by reference and by value.

Method 2 – Pass the variable in the constructor

The second way to pass the _player object to another form is to make it a parameter in the constructor. Forms are classes, and have constructors, just like any other class. So, you can also use parameters with them.

To pass the _player object as a parameter, you would make these changes:

TradingScreen.cs

Add this line, inside the class, but outside of any functions, to create a private class-level variable:

private Player _currentPlayer;

Change the constructor to accept a Player parameter, and set the private variable to that value:

public TradingScreen(Player player)
{
   _currentPlayer = player;
   InitializeComponent();
}

SuperAdventure.cs

Change the btnTrade_Click function to this:

private void btnTrade_Click(object sender, EventArgs e)
{
   TradingScreen tradingScreen = new TradingScreen(_player);
   tradingScreen.StartPosition = FormStartPosition.CenterParent;
   tradingScreen.ShowDialog(this);
}

Now, when we create the new TradingScreen object, we pass in the _player object. When passing a variable as a parameter, it’s still used “by reference”. So, any changes we do to _currentPlayer, in TradingScreen.cs, will also be seen/done in _player, in SuperAdventure.cs.

I’m going to use the version where we pass the _player object as a parameter in the constructor, and use the _currentPlayer variable in the functions in TradingScreen.cs. If you want to use the property, you will need to change the rest of the code in this lesson, so it uses “CurrentPlayer”, instead of “_currentPlayer”.

After you finish this step, build and run the program. Check that the trading screen displays when you click the “Trade” button.

Step 4: The next step is to only show the “Trade” button when there is a vendor at the location. If we don’t do this, we will see an error when we try to bind the non-existent vendor’s inventory to the datagridview.

In SuperAdventure.cs’s PlayerOnPropertyChanged function, find the “if” where we make the changes when the PropertyName == “CurrentLocation” – around line 134, if you have been pasting the previous code into your SuperAdventure.cs file.

Add this line inside that “if”:

btnTrade.Visible = (_player.CurrentLocation.VendorWorkingHere != null);

Step 5: For the datagridviews on TradingScreen, we need to include the inventory item’s ID and price. To do this, we need to make a change similar to what we did to display its description.

Edit InventoryItem.cs, and add these new properties:

public int ItemID
{
   get { return Details.ID; }
}
public int Price
{
   get { return Details.Price; }
}

Now, we can bind to these properties on InventoryItem, and they will show the values from the properties of the Details (Item) object.

NOTE: When I first wrote Lesson 21.2, I made the Vendor’s Inventory property a datatype of List<InventoryItem>. It needs to be a BindingList<InventoryItem>. If you made your Vendor class when lesson 21.2 first came out, you need to make this change before the next step:

public BindingList<InventoryItem> Inventory { get; set; }
public Vendor(string name)
{
    Name = name;
    Inventory = new BindingList<InventoryItem>();
}

Step 6: We’re finally ready to display the inventories in the datagridviews.

This will be similar to the way we used databinding for dgvInventory, in the constructor of SuperAdventure.cs. The big difference is a new column type that displays a button in each row, to buy or sell that item.

Edit TradingScreen.cs, so it has this constructor code, and these two new functions:

public TradingScreen(Player player)
{
    _currentPlayer = player;
    InitializeComponent();
    // Style, to display numeric column values
    DataGridViewCellStyle rightAlignedCellStyle = new DataGridViewCellStyle();
    rightAlignedCellStyle.Alignment = DataGridViewContentAlignment.MiddleRight;
    // Populate the datagrid for the player's inventory
    dgvMyItems.RowHeadersVisible = false;
    dgvMyItems.AutoGenerateColumns = false;
    // This hidden column holds the item ID, so we know which item to sell
    dgvMyItems.Columns.Add(new DataGridViewTextBoxColumn
    {
        DataPropertyName = "ItemID",
        Visible = false
    });
    dgvMyItems.Columns.Add(new DataGridViewTextBoxColumn
    {
        HeaderText = "Name",
        Width = 100,
        DataPropertyName = "Description"
    });
    dgvMyItems.Columns.Add(new DataGridViewTextBoxColumn
    {
        HeaderText = "Qty",
        Width = 30,
        DefaultCellStyle = rightAlignedCellStyle,
        DataPropertyName = "Quantity"
    });
    dgvMyItems.Columns.Add(new DataGridViewTextBoxColumn
    {
        HeaderText = "Price",
        Width = 35,
        DefaultCellStyle = rightAlignedCellStyle,
        DataPropertyName = "Price"
    });
    dgvMyItems.Columns.Add(new DataGridViewButtonColumn
    {
        Text = "Sell 1",
        UseColumnTextForButtonValue = true,
        Width = 50,
        DataPropertyName = "ItemID"
    });
    // Bind the player's inventory to the datagridview 
    dgvMyItems.DataSource = _currentPlayer.Inventory;
    // When the user clicks on a row, call this function
    dgvMyItems.CellClick += dgvMyItems_CellClick;

    // Populate the datagrid for the vendor's inventory
    dgvVendorItems.RowHeadersVisible = false;
    dgvVendorItems.AutoGenerateColumns = false;
    // This hidden column holds the item ID, so we know which item to sell
    dgvVendorItems.Columns.Add(new DataGridViewTextBoxColumn
    {
        DataPropertyName = "ItemID",
        Visible = false
    });
    dgvVendorItems.Columns.Add(new DataGridViewTextBoxColumn
    {
        HeaderText = "Name",
        Width = 100,
        DataPropertyName = "Description"
    });
    dgvVendorItems.Columns.Add(new DataGridViewTextBoxColumn
    {
        HeaderText = "Price",
        Width = 35,
        DefaultCellStyle = rightAlignedCellStyle,
        DataPropertyName = "Price"
    });
    dgvVendorItems.Columns.Add(new DataGridViewButtonColumn
    {
        Text = "Buy 1",
        UseColumnTextForButtonValue = true,
        Width = 50,
        DataPropertyName = "ItemID"
    });
    // Bind the vendor's inventory to the datagridview 
    dgvVendorItems.DataSource = _currentPlayer.CurrentLocation.VendorWorkingHere.Inventory;
    // When the user clicks on a row, call this function
    dgvVendorItems.CellClick += dgvVendorItems_CellClick;
}
private void dgvMyItems_CellClick(object sender, DataGridViewCellEventArgs e)
{
}
private void dgvVendorItems_CellClick(object sender, DataGridViewCellEventArgs e)
{
}

Much of the code is the same as when we bound the player’s inventory to the datagridview on the SuperAdventure screen. But there are a few new things.

First, we created a DataGridViewCellStyle object. You can use these objects to define special formatting for a data grid’s columns. This code creates a style to align the text to the right, instead of the default alignment to the left. We will use it for our numeric columns (quantity and price):

// Style, to display numeric column values
DataGridViewCellStyle rightAlignedCellStyle = new DataGridViewCellStyle();
rightAlignedCellStyle.Alignment = DataGridViewContentAlignment.MiddleRight;

We use this code to hide the ItemID columns, by setting their “Visible” status to false:

// This hidden column holds the item ID, so we know which item to sell
dgvMyItems.Columns.Add(new DataGridViewTextBoxColumn
{
    DataPropertyName = "ItemID",
    Visible = false
});

We need to include the ItemID column, so we know which item to buy or sell. However, we don’t want to display it – that number won’t mean anything to the player.

For the numeric columns that we want to be right-aligned, we set their DefaultCellStyle property to the rightAlignCellStyle object that we created earlier:

dgvMyItems.Columns.Add(new DataGridViewTextBoxColumn
{
    HeaderText = "Qty",
    Width = 30,
    DefaultCellStyle = rightAlignedCellStyle,
    DataPropertyName = "Quantity"
});

To connect clicking the buy/sell buttons with the functions to perform the buying and selling, we add these lines:

// When the user clicks on a row, call this function
dgvMyItems.CellClick += dgvMyItems_CellClick;
// When the user clicks on a row, call this function
dgvVendorItems.CellClick += dgvVendorItems_CellClick;

When the user clicks on the “Sell 1” button, in their inventory, the program will call the dgvMyItems_CellClick function, and sell one of that item. When they click on the “Buy 1” button, in the vendor’s inventory, the program will call the dgvVendorItems_CellClick function, and try to buy one of those items.

We’ve added a lot of code, so run your program, move the player to the Town Square (the only location with a vendor), and click on the “Trade” button. You should see items in the inventory datagridviews. If you click on the “Sell 1” or “Buy 1” buttons, nothing will happen yet – that’s the next step.

Step 7: The final step!

Now we will add the logic to buy and sell items. These functions will increase, or decrease, the player’s inventory and gold.

We also need to add two tests: check if the player has enough gold to buy an item, and don’t let the player sell items where the price is the “unsellable item flag price” we created in Lesson 21.1.

Change the two button click functions to this:

private void dgvMyItems_CellClick(object sender, DataGridViewCellEventArgs e)
{
    // The first column of a datagridview has a ColumnIndex = 0
    // This is known as a "zero-based" array/collection/list.
    // You start counting with 0.
    //
    // The 5th column (ColumnIndex = 4) is the column with the button.
    // So, if the player clicked the button column, we will sell an item from that row.
    if(e.ColumnIndex == 4)
    {
        // This gets the ID value of the item, from the hidden 1st column
        // Remember, ColumnIndex = 0, for the first column
        var itemID = dgvMyItems.Rows[e.RowIndex].Cells[0].Value;
        // Get the Item object for the selected item row
        Item itemBeingSold = World.ItemByID(Convert.ToInt32(itemID));
        if(itemBeingSold.Price == World.UNSELLABLE_ITEM_PRICE)
        {
            MessageBox.Show("You cannot sell the " + itemBeingSold.Name);
        }
        else
        {
            // Remove one of these items from the player's inventory
            _currentPlayer.RemoveItemFromInventory(itemBeingSold);
            // Give the player the gold for the item being sold.
            _currentPlayer.Gold += itemBeingSold.Price;
        }
    }
}
private void dgvVendorItems_CellClick(object sender, DataGridViewCellEventArgs e)
{
    // The 4th column (ColumnIndex = 3) has the "Buy 1" button.
    if(e.ColumnIndex == 3)
    {
        // This gets the ID value of the item, from the hidden 1st column
        var itemID = dgvVendorItems.Rows[e.RowIndex].Cells[0].Value;
        // Get the Item object for the selected item row
        Item itemBeingBought = World.ItemByID(Convert.ToInt32(itemID));
        // Check if the player has enough gold to buy the item
        if(_currentPlayer.Gold >= itemBeingBought.Price)
        {
            // Add one of the items to the player's inventory
            _currentPlayer.AddItemToInventory(itemBeingBought);
            // Remove the gold to pay for the item
            _currentPlayer.Gold -= itemBeingBought.Price;
        }
        else
        {
            MessageBox.Show("You do not have enough gold to buy the " + itemBeingBought.Name);
        }
    }
}

For both of these functions, the “e” parameter gives us information about what cell (row/column) was clicked. That is an automatic parameter that is created, and passed, when the CellClick event happens.

We will use the column to make sure the user clicked on a button column – and not one of the other columns. The row will let us determine which item they want to buy or sell.

The functions check the price of the item. If the player tries to sell an item with an unsellable price, the game displays an error message. It also displays an error message if the player tries to buy an item, but doesn’t have enough money for it.

If there is not a problem, the functions increase, or decrease, the player’s gold and inventory. Because the player’s inventory and gold raise events when they are updated, you will automatically see these changes on the SuperAdventure form.

Step 8: Compile and run your program. Move the player to the town square location, click on the “Trade” button, and try to buy and sell items.

When the player sells items, we do not add them to the vendor’s inventory. We could, but then we would probably want to add the ability to save, and read, the inventories for all vendors, when the player closes and restarts the game.

You could do that, if you want to expand the game. But I’m going to work on some new lessons on how to use SQL Server to save the player’s game data.

Summary

Once you know how to pass variables to other forms, and how some variables are passed “by reference”, you can make larger programs, with more screens.

Source code for this lesson

Source code on GitHub

Source code on Dropbox

Next lesson: Lesson 22.1 – Installing MS SQL Server on your computer

Previous lesson: Lesson 21.3 – Add a button and create its eventhandler in code, without the UI design screen

All lessons: Learn C# by Building a Simple RPG Index