UI Project Instructions
UI%20Project%20Instructions
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 4
User Interfaces due: see LEA
420-216 AB User Interface Project Worth 16%
(page 1 of 4)
Instructions
Start with the code that is uploaded to LEA with these instructions.
Finish the Budget Program so that you have a fully functional program
Specifics
Step 1 - Create a ToolBar (10%)
Create a toolbar with the following buttons: New, Open, Save, SaveAs, Modify, and Exit.
● The Toolbar Buttons Save/SaveAs must follow the same rules as Save/SaveAs Menu
Items
○ Hint: update method SetBudgetRequiredControls
● Add tooltips for each ToolBar Button
Step 2 - Add Expenses (15%)
Update the event handler “btnAddExpense_Click” so that users can add new expenses using
the “ExpenseForm” Window
● Hints:
○ Create a property “Budget” in the ExpenseForm so that ExpenseForm has the
information that it needs
○ Do NOT forget to update the Categories ComboBox every
time the Budget has
changed.
○ After the ExpenseForm is closed, remember to update the datagrid display and
set the controls
User Interfaces due: see LEA
420-216 AB User Interface Project Worth 16%
(page 2 of 4)
Step 3 - Add a Theme to ExpenseForm Window (10%)
Add a property “Theme” to ExpenseForm (Note: enum Themes is already in the code)
● If Theme is set to “Themes.Add”
○ Buttons “Add, Cancel, Close” will be shown,
○ The checkbox “Credit” will be shown.
○ Buttons “Modify”, “Delete”, “Cancel” will NOT be shown
○ Set the Background colour to something
○ Change the title of the form to “Add Expense”
● If Theme is set to “Themes.Modify”
○ Buttons “Add, Cancel, Close” will NOT be shown,
○ The checkbox “Credit” will NOT be shown.
○ Buttons “Modify”, “Delete”, “Cancel” will be shown
○ Set the Background colour to something different
○ Change the title of the form to “Modify Expense”
Step 4 - Show Modify Expense Form (5%)
Write the event handler for the the Edit->Modify menu item and the ToolBar Modify Button such
that
● Shows the ExpenseForm with the “Modify” theme
Step 5 - Fill in “Modify” ExpenseForm (25%)
● Using the expense item currently selected in the datagrid, populate the ExpenseForm
text boxes with the correct information
● Hints:
○ Define a new property in ExpenseForm of type int, that is the ExpenseID
○ To get the ExpenseID, use the “selectedItem” property of the datagrid
■ The selectedItem property of the datagrid is a BudgetItem if the list is
being shown. The following will set “bi” to null unless a valid expense was
selected
■ BudgetItem has a property called expenseID
User Interfaces due: see LEA
420-216 AB User Interface Project Worth 16%
(page 3 of 4)
○ In the ExpenseForm, when the expenseID is set, you can get the actual expense
by using the “Get” method of the Expenses object
■ Expense e = budget.Expenses.Get(expenseID);
○ Once you have the expense, you can use its properties to fill in the textboxes,
and date, etc.
○ The expense “category” property is the category ID, so to get the category object,
so you can use the “Get” method of the Categories object
■ Category c = budget.categories.Get(e.Category)
○ The selectectedItem of the ComboBox can be set directly. (No looping required)
Step 6 - Add the Modify/Delete Functionality to “Modify”
ExpenseForm (10%)
● Add the functionality to the Modify and Delete button. After modifying or deleting the
expense, close the window. In main window, don’t forget to update the datagrid, and set
the appropriate controls (see assignment 4 for details if you have forgotten)
● Hints:
○ To delete an expense from the budget, use the Delete property of the expenses
object
○ To modify an expense from the budget, use the Modify property of the expenses
object
EXTRAS - Optional… choose which ones you want to do, or do
something different. (25%)
Wow me! 25%
Impress me: 20%
Pretty Darn Good: 15%
Made an Effort: 10%
Ideas:
● Add some icons to the menu items
● Add Style to ToolBar Images so that they look greyed out when not enabled
● For the “Add” ExpenseForm, keep track of the date that was selected, so that if the user
chooses a different date, when they go back to the form, it was the last date they
selected
● Use method (main window) “ResetFocusAfterUpdate” to set the selected item in the
datagrid to be the last one modified, or to the one below what was just deleted
User Interfaces due: see LEA
420-216 AB User Interface Project Worth 16%
(page 4 of 4)
● Add a double click event to the datagrid which then shows the “Modify” ExpenseForm
● Add a context menu with “Modify/Delete/Cancel” on the datagrid. Only enable
“Modify/Delete” options if the datagrid is showing the standard view. See WPF tutorial
on context menus
● Use “commands” to enable short-cut keys for all menus/toolbars etc”
