Lesson 09.2: Adding the Trade Screen

Since we now have traders in the world, we need to add a trade screen.

 

 

 

Lesson Steps

 

Step 1: Create a new Window in the WPFUI project named TradeScreen

Add the ViewModels namespace and set DataContext. When we instantiate a TradeScreen window, we’ll set its DataContext to the GameSession object from the main game window (on lines 6 and 7).

When we define the datagrids to show the inventories (the player’s and the trader’s), we set “AutoGenerateColumns” to “false” (lines 41 and 72). This is because we want to add a button to buy or sell the listed item.

The button definitions are on lines 56-64 and 87-95. This is how we can define the template for the cells however we want – in this case to display a button. Each button calls a function in the code-behind page to manage the purchase or sale of the selected item.

 

In the code-behind page (TradeScreen.xaml.cs), we have a private property named Session. It is the DataContext object, cast as a GameSession object. This is how we’ll reference the GameSession object, when we change the player’s gold, the player’s inventory, and the trader’s inventory.

We don’t really need a property for this – we could just cast the DataContext as a GameSession object whenever we need to access it. But, this eliminates doing that multiple times for the buy and sell functions.

 

In the buy and sell functions, the first thing we do is get the item that sent the click event (the row in the datagrid where the user clicked the buy or sell button) and cast it as a GameItem object. This is the object we will add/remove from the inventories, and use to determine the price.

In both functions, we check that the cast “item” variable is not null – in case the case to a GameItem didn’t work. It always should work, but it’s good to have a check.

In the “sell” function, if we have a GameItem object, we give the player gold, add the item to the trader’s inventory, and remove the item from the player’s inventory.

In the “buy” function, we do an additional check to see if the player has enough gold to buy the item. If they don’t we display a message and do nothing else. If the player has enough gold, we subtract the price of the item from their gold, remove the item from the trader’s inventory, and add the item to the player’s inventory.

We don’t need to do anything else. Because the properties all raise propertychanged events, the UI is automatically updated.

 

TradeScreen.xaml

 

TradeScreen.xaml.cs

 

 

Step 2: Modify MainWindow.xaml and MainWindow.xaml.cs

On line 266 of MainWindow.xaml, add the Click event handler “OnClick_DisplayTradeScreen” to the Trade button.

In MainWindow.xml.cs, add the new ” OnClick_DisplayTradeScreen ” function. This function instantiates a new Trade window, set its DataContext with the GameSession, and display the Trade window.

Instances of classes we define (like the GameSession object) are passed to other classes “by reference”, instead of “by value”.

So, there is only one GameSession object, which will be used by the main game screen and the trade screen. Any changes to the GameSession’s properties in the TradeScreen window will be reflected in MainWindow, because they both reference the same object.

We use ShowDialog(), instead of Show(), to prevent the player from clicking buttons on the game screen, until they close the trade screen. ShowDialog() is “modal”, because it prevents clicking on the other screen. Show() would be “non-modal”, because it would let you click on the other screen.

We want to prevent clicking on the other screen, because it would let the player move to a different location, which may not have a trader, or may have a different trader. That could be confusing to the player.

 

MainWindow.xaml

 

MainWindow.xaml.cs

 

 

Step 3: Test the game

Move to a location that has a trader, click the “Trade” button, and try to buy or sell items. You should notice the player’s gold change, along with their inventory in the main game screen. This is because these properties all have propertychanged events. So, the UI is automatically notified of changes.

 

 

Return to main page

Leave a Reply

Your email address will not be published. Required fields are marked *