Lesson 05.2: Creating the Player Inventory

Now that we can create items, it’s time to create the player’s inventory. In this lesson, we will add an Inventory property to the Player class, and display the inventory items in the UI.

 

 

Summary

 

Step 1: Edit Engine\Player.cs

The first thing we’ll do is create a new property in the Player class, to hold the GameItems the Player will have in their inventory.

In the ItemFactory class, we used a List<GameItem> variable to hold multiple GameItem objects. For the Player’s Inventory, we are going to use an ObservableCollection<GameItem> property. Collections are similar to Lists, and can hold zero, one, or many objects. However, an ObservableCollection also automatically notifies the UI when objects are added to it, or removed from it. Because of this, we don’t need to call “OnPropertyChanged” every time we modify the item’s in the player’s inventory.

 

To use ObservableCollection, we need to add “using System.Collections.ObjectModel;”

 

We also need to initialize the property (like we do for all list/collection properties). We do this by creating a constructor for the Player class, and initializing the property to a “new ObservableCollection<GameItem>()”. Now, when a Player object is created, the Inventory property will be initialized, and the player can start receiving items.

 

Player.cs

 

Step 2: Edit WPFUI\MainWindow.cs

Currently, we have a Label that says “Inventory/Quests”, for Grid.Row=”2″ and Grid.Column=”0″ (around line 102, in MainWindow.xaml). We are going to replace it with a Grid.

Inside the Grid, we add a new type of UI control – a TabControl. This is a control that looks like a paper file folders (like you would store in a desk drawer), with tabs at different positions.

 

 

Inside the TabControl, you create a TabItem for each “tab”. The TabItem’s Header attribute is the text to display.

 

Inside the TabItem, we will add a DataGrid. This is a popular control for displaying information that has multiple rows (like lists and collections) and multiple columns (in this case, properties we want to display for the objects in the list/collection).

The DataGrid’s ItemsSource attribute is the list/collection to display. We also want to set the “AutoGenerateColumns” attribute to “False”. By default, a datagrid will create a column for each property of the object in the list/collection. However, we want to select the properties to display, and how we want to display them. Finally, we want to set the DataGrid’s “HeadersVisibility” attribute to “Column”. So it will only show column name headers, and not row headers.

Between the DataGrid opening and closing tags, we need the tags for “DataGrid.Columns”, since this is where we will define the details for the columns.

We use two DataGridTextColumns, because we want to display text values. There are other columns types you can use to display checkboxes (DataGridCheckBoxColumn), dropdown boxes (DataGridComboBoxColumn), text links (DataGridHyperlinkColumn), and customized content (DataGridTemplateColumn). But, for this DataGrid, we only need to use DataGridTextColumn.

For the attributes of the DataGridTextColumn, we set the Header (the text to display at the top of the column), the property to bind to (from the GameItem objects, in the DataGrid’s ItemsSource), and the width.

 

MainWindow.xaml

 

Step 3: Test, by modifying GameSession.cs

If you want to test the game, and ensure the player’s inventory is displayed, you can modify the GameSession constructor to this code below, with the three lines adding items to CurrentPlayer.Inventory.

 

GameSession.cs

 

If you add these lines, and run the game, you should see items in the DataGrid for the Player’s Inventory.

After you test that this works, please remove the lines from the GameSesssion constructor (or remember to do that later).

 

Return to main page

Leave a Reply

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