top of page
Screenshot 2025-04-04 163817.png

Notes App

This is a project I worked on as a way to learn WPF and XAML, but also deepen my C# knowledge by recreating the Sticky Notes app on Windows. This project also allowed me to learn about the MVVM design pattern. 

​

Although the design is mirroring the Sticky Notes app, it made me think about the user experience and what can be done to improve it, which will definitely be helpful in future projects.

​

?? my own usage of Sticky Notes

​

The project code is available on GitHub here.

  • Role: Tools Programmer

  • Features:​

    • Sticky notes

    • Note list

    • Rich text

  • Project Information:

    • Team size:​ Solo

    • Duration: 2 weeks

  • Tools/Language:

    • WPF

    • XAML/C#

NewNoteShowcase.gif

Notes

The notes represent the main interaction of the user with the app, so I had to make sure everything was user friendly and easy to use 

  • The user can create, edit and delete new notes, all from the note window, without needing to have the note list open

  • The text supports some basic formatting like bold, italic and underline which are the main utilities of a rich text box

  • The menu is an user control that is overlayed on top of the main note window

  • The overall look of the note is preserved when the window is resized

  • The notes are saved in json format, for which I used the Newtonsoft.json package

Note list

The note list is the main window of the app that gives the user control over everything.

​​

  • Notes are displayed in a scrollable list, allowing the user to manage multiple notes 

  • Each note is an user control that only shows the first few lines of the note, along with the date it was last updated at

  • When hovered, the date becomes a popup with the options to open/delete the note

  • Opening the note can also be done through double clicking

  • The search box allows the user to filter the notes 

​

​

NewNoteListShowcase.gif
RichTextBoxShowcase.gif

Challenges

  • For the rich text box, I had to create a custom class to handle text changes and manage caret formatting (bold, italic, underline) when moving between styled text segments.

  • For the navigation between windows, I developed an interface to track and manage open windows, allowing any view model to handle navigation.

  • Lastly, I wanted a cohesive and modern look, so I had to maintain default styles and design choices like the rounded corners.

  • There were other challenges as well, but I won't go into all of them.

​

bottom of page