This app was designed as a tool for analysing personal finance and determining methods to increase disposable income.

The main view of the app displays an annual summary of income, expense and disposable for each month. There is then an income section and expense section which display data broken down by category (user defined). The expense grouping can be switched between category or date and there are chart or list display options.

2017-03-21 (1)
Chart view of income

I made improvements to the UX by creating a simple ‘guide’ for the user. When the app launches the user is prompted toward creating an account and then adding categories.

private void AddAccount_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
	AddAccount acc = (AddAccount)sender;
	UserData newAccount = new UserData("account", acc.newAccountName, acc.newAccountType);

//if the user has set up first account prompt toward adding categories
	if (dataManager.userAccounts.Count == 1)
//find the add category button to display its flyout
		object button = FindName("AddCategory");
		FlyoutBase.ShowAttachedFlyout(button as Button);
		dataManager.accountName = dataManager.userAccounts[0].dataContent;
		dataManager.accountType = dataManager.userAccounts[0].dataTypeOrColour;

	if (dataManager.userAccounts.Count > 0)
		appLock = false;

As the app grew I wanted to ensure it worked across the range of Windows devices. It was then that I included the visual state manger.

<DataTemplate x:Key="MonthTemplate">
							<AdaptiveTrigger MinWindowWidth="720"/>
							<Setter Target="Amount.(RelativePanel.RightOf)" Value="Reference"/>
							<Setter Target="Reference.Width" Value="240"/>
							<AdaptiveTrigger MinWindowWidth="0"/>
							<Setter Target="Amount.(RelativePanel.RightOf)" Value="Reference"/>
							<Setter Target="Reference.Width" Value="175"/>

<Style TargetType="TextBlock">
					<Setter Property="Margin" Value="4"/>
					<Setter Property="Width" Value="90"/>


			<TextBlock x:Name="Amount" 				Text="{Binding itemValue}" 				Foreground="{Binding itemColour}" 				TextAlignment="Right"/>
			<TextBlock x:Name="Reference" 				FontStyle="Italic" 				Text="{Binding itemReference}" 				Foreground="{Binding itemColour}"/>


During initial testing I realised the data input could be improved through appropriate use of auto suggest boxes.

Here is the code for the auto suggest box

private void Category_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
	string inputText = Category.Text;
	int inputLength = Category.Text.Length;

	if (inputLength > 0)
		if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
			List<string> filteredList = categories.FindAll(w => w.ToLower().StartsWith(inputText.ToLower())).ToList();
			filteredList.Add(inputText + " (New)");
			Category.ItemsSource = filteredList;
		//a simple workaround for the "(new)" keyword in the drop down
		if (inputText.EndsWith(" (New)") == true)
			sender.Text = inputText.Remove(inputLength - 6);
	//keep add button disabled until basic data has been provided
	IsPrimaryButtonEnabled = Referenece.Text.Length > 0 && Category.Text.Length > 0 ? true : false;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s