Write an RSS Feed Aggregator, Part 2.1 Setting Up the GUI

TL;DR:

Just a bunch of GUI setup stuff.  Watch the video here.  If you’re not familiar with adding controls to forms and working with Visual Studio, I would recommend this video and this blog post.

Alright, let’s get the easy stuff out of the way

Ok, ok.  I’m sorry guys, this series is not going to be a 3-parter.  I had intended to do a video on writing the parser, then a video on creating the app, and then a video on creating the installer for the app but the more I thought about it, the more I realized that there’s just too much content to fit into a single video.  Heck, this video is already 30 minutes long and all I did was setup the GUI.  What do you guys think?  Am I spending too much time on stuff that doesn’t matter?  My goal is to explain everything I can that I had to ask questions about when I started learning this.  Anyway, tell me what you think in the comments here or on Youtube.

This is the one where we setup the GUI components.  There’s not a lot of code in here though; I’m working on the code videos though, I promise.  Now then, I have to level with you all. When I wrote this app, I never intended to show it to anyone.  What that means is that my code was super sloppy and had a few bugs related to not handling incorrect user input.  So I’m rewriting it as I go along.

Here’s the video:

 

What matters here?

Because this is mostly me blabbing while I’m setting up a bunch of controls, there’s not a lot for me to talk about here.  However, there are a few things worth mentioning:

Everything I’ve done in the video can be done using regular form controls.  I chose the MetroModernUI package because I like the way it looks and it makes it feel like an actual app instead of a tutorial piece.  In order to use that, you’ve got to first install the package, then add all of those Metro controls to your toolbox, and lastly, change your regular Form to a MetroForm.

• Install MetroModernUI
  • In Visual Studio, click Tools (from the top toolbar), go down to NuGet Package Manager -> Manage NuGet Packages for Solution…
  • Under Browse, type in MetroModernUI, click on it, select the Aggregator App project, and install it

• Add Metro Controls to the Toolbox
  • In order for the tools to be more useful, we have to add them to the VS Toolbox.
  • With your form selected, open the Toolbox, right-click on a blank spot, click Add Tab, and call it MetroUI (or whatever you want, I don’t care, just make sure it makes sense)
  • Right-click on your newly created tab and select Choose Items…
  • Click Browse… and find the MetroFramework.dll.  On my machine, this was located deep down in the packages folder at the root of my solution.
  • Finally, after you’ve got it selected, just hit ok on everything to finish the import

• Change the Regular Form to MetroForm
  • Lastly, to turn our form into a MetroForm, we do have to change one piece of code
  • Right-click your AggForm.cs file in the Solution Explorer, and click View Code (or press F7 with the file selected, if you’re into that sort of thing.  I won’t judge)
  • See the class declaration line?  See where it says AggForm : Form?  Yep, that’s the problem.
  • Instead of extending the Form class, we want this form to extend the MetroForm class.  When you do this, you’ll get a red squiggly that wants you to import the MetroFramework.Forms reference as well.  Don’t forget to do this!
  • Change it to this:

using MetroFramework.Forms;
namespace Aggregator_App
{
     public partial class AggForm : MetroForm
     {
          public AggForm()
          {
               InitializeComponent();
          }
     }
}

Anything else?

The only other thing I think that’s worth mentioning is that the MetroForms have their own properties section in the properties window:

This is where you can change the properties that make the MetroForm look much better than the standard Windows Form.  Play around with them until you find something you like.  In this video, I change the Theme to Dark and changed the Style to Red.  The ShadowType and BorderStyle properties also do some interesting looking stuff too.  Get in there and play around!

That’s a wrap for this one

Alright, I think that’s all I’ve got to say about this one.  If I missed something you’ve got a question about, just let me know and I’ll take care of it!