Full Stack Development

Over the years I have come up with a lot of tricks to making full stack development quick possible for a single coder. I have refined my approach over dozens of project and although I don’t believe it is perfect or that it will work for everyone, I figured I would share a few insights.

 

Creation Control

You need to have a really good idea of what you are going to create before you start typing away. If you jump in without putting in adequate thought, you will find yourself in a mess and often times you’ll end up doing a rewrite. This phase is where I think a lot of people end up getting ahead of themselves and would be better off if they could pull their own reigns and really plan things out. My main objectives in this phase are to define all the objects that the system will use and how they will interact with each other. I will also usually mock up a UI on paper or in Fireworks and work through a bit of the process flow. This usually helps me to catch items on objects that I might have missed before.

Cool. Its time to get rolling. Head on over and grab a copy of XAMP, WAMP, MAMP, or some other variant that you can setup as your dev environment.

 

Laying the Groundwork

Once you have decided what you are building, you need to start at the base and work up. You wouldn’t build a building by putting up walls before you pour the foundation and software should be the same. The database is the foundation of the app and needs to be done right before you get to far into anything else.

Your dev environment should have come with MySQL server which is a great database to use for most projects. You should also have a copy of PHP MyAdmin with the environment. This will allow you to get started using your MySQL database but if you are going to do anything serious, get the MySQL Workbench here. Build your database and get it ready to work with your code. I’m not going to go into detail about how to do that, but there are a lot of tutorials out there that will point you in the right direction.

 

Coding Time

Now that your database is in, you need to expose the contents of it to your app. I’m going to be showing a few examples in PHP, but you can look up how to interact with MySQL for your particular language if it is different. I like to layer software in order to make it easier to build, maintain, and debug. There are typically 2-3 layers in the backend of your typical web app.

Screen Shot 2013-10-16 at 5.58.41 PM

 

You can see the three layers in the center of the diagram.

DAL

The DAL (Data Access Layer) controls the access to the database and acts as and interface to the database which makes switching out databases a quick change. It also keeps all your DB logic in the same place. There are a lot of options for how to communicate with a database but a simple coded one could look something like this.

 

Backend Logic

The Backend Logic layer is optional based on the complexity of the app you are building. This layer can do any heavy lifting that you need to do.

Web API

This layer exposes your app to the outside world. To me there is only one option for how to build this API and that is an http based API which returns json. This type of API can be consumed by virtually any client and is lightweight for the server and client. You will need to create an authentication scheme for access to your API if you don’t want just anybody to be able to access it. Don’t over complicate this part and build the type of API that is going to best suite your system. For example, you don’t need to implement a RESTful API if it isn’t required. Doing so will likely take you double the time compared to other options.

An example API could simply be creating a file as your API call path and adding some code like this to it:

 

Making things come to LIFE!

A UI gives meaning to all your madness and allows you to really give you project a polished look and feel. Without a good UI, even the best backend is worthless and will likely fall massively short of reaching its intended audience. Spend some time to get your UIs looking good and make your users happy. :)

A typical web app will have at least two main layers which are easily defined. Just like on the server, you have an Access Layer that controls communications with your various API calls. This layer should take care of ajax requests, response codes, and general API communication. The other layer is simply anything else in the app. You are free to make as many pieces as needed or required but you really should at least separate your code into these two layers. Check out the post about building your javascript Access Layer here.

Thats it. Those are the basics to creating full stack apps. Obviously there are a million things that could be covered in each point but I would hate to ruin all the fun of finding your own way.

Getaway to Tropic Reservoir

There comes a time in every coders life where he has to break away from the computer screen and play outside. This past weekend was just that for me. My family and I went camping around Tropic Reservoir in Utah. It was beautiful weather and an amazing time. We rode 4 wheelers, hiked and tried to fish… I’m not a fisherman… If I’m going to set in a chair and stair at something, it’s going to be a computer screen! Just saying.

Here are a few shots of the area. It was beautiful and an amazing getaway. We didn’t even have cell service so I was totally cut off from technology.

Beaver Creek Loop

The first butte on the Beaver Creek Loop

 

Hell's Backbone

Looking off of Hell’s Backbone

 

The hike was called Calf Creek and as you can see, it has the tell tale features of Zion’s National Park. I really believe this area is one of the prettiest places on earth. It is so unusual but incredible when you have to look strait up in order to see the tops of the sheer cliffs all around you. Being a climber, I got the itch to want to climb some of those big faces! The hike is 3 miles one way 6 mile round trip  and you gain about 1200 ft. in elevation. It really wasn’t too bad even for an out of shape programmer like myself.

Calf Creek Falls

Calf Creek Falls

 

The water coming off the falls is so cold you would expect to see it melting right off an ice sheet or something. We mustered up the courage and jumped in anyway… it was cold! Just thinking about it makes me cold all over again! Lol.

Calf Creek Falls

The Family at Calf Creek Falls

What a great way to spend your fathers day!

A Happy Fathers Day

A Happy Fathers Day

The trip was great, it made me remember that there are things outside of the technical world we live in. Sometimes its good to get away from those endlessly long days and enjoy a little nature. It also made me appreciate all those awesome little tech toys I do have when I got home!

Easy Ajax

Anyone that has ever built a large scale web application using ajax has probably incurred many of the same issues. One of the major problems is that ajax calls are asynchronous. This poses an interesting problem with creating and updating elements on the page accurately. Unless you reload that entire section of the page you will soon see that some object ID’s are saving to the wrong places. Another problem is long requests that are no longer valid. Most modern web browsers will only allow 2 ajax requests to be processed simultaneously  The remainder of the requests will be queued up and run in turn. This means that if you are still processing an old request, you are losing half your call speed if not all of it. The last problem that I was really interested in dealing with is visualizing the data that was actually being transfered through the requests. You can read more about that here: validator

The AJAX wrapper

This little library allows us to make both POST and GET calls using ajax while enabling us to track the ID of each request and also stop one or all of the requests from happening. There are 4 functions that you have direct access to.

Get

Post

RemoveRequest

ClearRequestQueue

 

Conclusion

Using this little helper library, you can resolve some of the rather tricky issues that come up when dealing with complex ajax applications. Plus this will allow you to implement the validator quickly and simply.

 

AJAX Validator

Validating the data being passed between your ajax requests and your server can sometimes be tricky. Sure there are ways to see what is going back and forth, but they all seem to be a process to use. I needed something that was simple to interact with and show me the data I needed to see to help me resolve those tricky communication bugs.

The Validator is a simple to use javascript library that when used with an API style javascript class makes it really easy to keep track of what your app is doing. For more on this, check out my Easy AJAX post. The things I wanted to see was the time the request took to return and the data being passed too and from the server.

So thats what the Validator does. It is made to work with json formated requests and responses. If your not passing json in your ajax requests, than you should really consider changing your implimentation. Thats all I’ll say about that on this post, but here is plenty of reading out there on the subject.

The picture above shows the validator after having made 2 requests. I’ll point out just a few things to help you understand how to use it. First, newest requests are placed on the top of the list.

  • To open the Validator, press (ctrl + shift + v) Once open, you can drag it around the screen to fit best while testing.
  • The blue URL text represents a request that has gone out from your javascript. The gray item above it represents the corresponding response from the server.
  • The number off to the left, represents the time that the request took to return.
  • Each color on the border represents a period of 500 milliseconds or 1/2 second between a request or response call. Each color change also separates the request into a different section. This allows easier reading when sending multiple requests at the same time since they will be grouped. The groups should partly align with some sort of event on your UI.
  • Clicking on any section header will open or close the details of that section. This should allow you to easily see what was passed to the server and how the server responded.
  • The “clear” button will clear the currently displayed request.

The Implementation

“That looks interesting but what do I have to do to implement it?”, you might ask. That is always my first question when looking at a new library or tool. Is it worth the cost??? Depending on how you have built your application, it should be quick and easy to implement.

Download the validator script here: validator.js

Here is how you can use it.

Here is a standard ajax wrapper function that works to include all the validator logic within the request. There are a few things to note here. One is the headers being included in the request. This ID would be unique to this request and is how the Validator knows which response corresponds to which request. With a little extra logic, you can also make use of this ID in your own code. Check out an example here. Before making the request, we simply send off the information to the Validator. Upon the request’s completion, we also notify the validator. The parameter list for the AddItem function is: AddItem(headerText, data, id, isSendRequest). The ‘RUNVALIDATOR’ variable is simply a boolean value that can be changed by you if you would like the Validator to stop receiving requests. Opening and closing the Validator will also toggle this variable. Don’t forget to include the script in your page.

Thats it! You can now launch your app and hit (ctrl + shift + v) and what your requests go back and forth. I’ve found this tool to be invaluable on large scale projects and hopefully one of you will as well.

-McKay Christensen

Debugging PHP!

I haven’t done many really “major” projects in PHP till a few months ago. In the past I’ve just dumped out values to the screen and have always been able to find the problem. Unfortunately, my current project has given me some troubles that I wasn’t able to resolve without a little help from a debugger. Like many of you, I wanted to use a debugger (becomes habitual with .NET) but wasn’t sure exactly how to go about it. I searched around the internet for quite some time before I finally found a solution that works great and can be done in less than 30 minutes!

Interested!? With debugging, you will save 30 minutes in less than a day of coding. Well here are my findings, I hope this will help someone get debugging setup quicker and easier than I did. :)

(These steps are for a Mac. Sorry PC guys… I do know you can do something simular with WAMP, I just haven’t done it.)

 

Step 1 – Get the tools

If you are doing PHP developement, you will need to test your site as you go along. This requires an instance of PHP to be running somewhere either locally or on an external server. For many reasons, I would recommend running a local instance that mirrors your production server as best as you can. That being said, I know that you may already have an instance running. The method for setting up this debugger will require you to install and use a little piece of software called MAMP. MAMP is the mac equivalent to WAMP (Mac-Apache-MySQL-PHP). You can get ahold of a free copy here. The setup wizard will guid you through the install process but once it’s installed, you will want to open the main application and make the correct changes to your ports.

You should see a screen simular to this one. Make sure these are the default ports if you want to have apache be your localhost server. A simple click of the set default ports button will do the trick. Once you’ve updated the ports, you will need to restart the server. (Also conveniently a simple button push)

The second tool you will need is called MacGDBp. You can get a free copy of it here. This tool will act as your debugger and use XDebug to step through your code. Install the application and then jump into the “Preferences” panel.

In this panel, you will need to setup a connection between your local files and the files the server sees. Notice on the second line, the url http://localhost/LitRoost/… This is the corresponding URL to to my local path of /Users/christensenmckay/litroost. The local path is where I have my project files located on my computer. A quick hint about MAMP, the root directory for MAMP is /Applications/MAMP/htdocs. You will need to place current versions of your code within that path in order for MAMP to process them.

 

Step 2 – Configuration

Up till this point, we’ve done a little setup, but now we are going to configure XDebug. This is usually a bit of a process which requires installing XDebug and appropriately configuring it. Fortunately for you, MAMP already comes with it installed, you simply need to turn it on!

Open up the MAMP folder in your finder (/Applications/MAMP) from there, you need to find the php.ini file.

Open the file up in an editor that will NOT embed rich text into the file contents. The program that you use for writing your code is probably a good safe choice. Once the file is open, look for the section that says [xdebug]. You will see a line that says “zend_extension” commented out. Go ahead and uncomment it, you can add these lines while your at it.

Save your new php.ini file and restart your MAMP server. Since both XDebug and MacGDBp are both setup to run on the same port (9000), when you open a webpage on your localhost MacGDBp will intercept it and start debugging it.

 

Step 3 – Debugging with pleasure!

Open your MacGDBp application, make sure you have a php page within your MAMP servers web path (htdocs folder). Go to any browser and open a php file on your localhost. You will notice that the page seems to load indefinitely… now click on your MacGDBp application and you’ll notice that your code is displayed and it has hit a breakpoint on the first line of code. You are now free to debug!

One caveat I have noticed is that when I make a change to my page with MacGDBp still open, the change isn’t reflected in the code I’m debugging. One simple remedy is to restart MacGDBp when you need to push a new code change to debugging. XDebug is supported by several php suits that will allow debugging within the same application that you code in. In my case, I use DreamWeaver for most of my work and it doesn’t support debugging so this works great for me. Hope this helps you in your bug extermination adventures!

ajax driven web development

Web development has been done the same way for a long time, but fortunately new developments in javascript and better wide spread architecture have given us a better way! The days of forcing an entire page to refresh every time you want to reload a portion of data is a thing of the past yet most sites still require the entire page to reload every time you click on a button.

Lets dive in and see if we can come up with something better…

Were going to build ourselves a site that allows us to load the content of another site within it. Here is a working model you can play with.

The Model -  This model allows us to utilize the power of using an API.

 

The benefit offered by separating these pieces into separate sections rather than in one big file is that it allows us to pull in sections at a time. This allows for simpler testing and easier changes that only affect certain sections. Not only that, but you will also be able to perform ajax calls to this API and get back just the information that you want.

The simple model is that the View calls the API using an ajax request then places the returned content in a specified container. We’ll look at an example in just a moment, but first we need to create a view.

Here is our simple header content. The “phish” <div> will be where we will place the content from the page we are showing on our page.

Here is our CSS:

 

The API

And now we can make our API. This API simply performs a request using cURL and returns the results.

You see that the code simply checks that the posted URL variable is set. We then perform the cURL using the posted URL and return the pages content.

 

AJAX Hookup

Last but not least, we’ll hookup our ajax using jQuery.

Here we perform the ajax request upon the “goBtn” click event. Notice that we specify the ‘url’ and the ‘type’ is set to POST. To perform the post, we pass in the user entered value through the data parameter. Upon success, we then display our results in the “phish” <div>.

And walah! We are done!

Here are the files if you want them Web Example

jQuery and The Matrix

Hey everyone, sorry it’s been so long since my last post and I promise I’ll wrap up the Words With Friends one, as I’m sure there are a bunch of you out there just waiting to see the guts of it.

Today I want to change gears a little and post a fun little experiment I just built. I’m not sure why, but for some reason when I sat down tonight I just had an itch to make a webpage that would scroll letters from the top to bottom at different speeds (like The Matrix background). So here it is! I’m using jQuery to accomplish this task and it turns out, it’s not even very complicated. If you haven’t checked out jQuery, I strongly recommend it. I really love the feel of use of C#, but jQuery is probably the closes thing I’ve found to it.

You can see a live demo here.

 

HTML and CSS 

First things first, lets check out the html. It couldn’t be more simple, all we have is a <div> tag in our body tag.

We then apply a little CSS to the background and create a class which we will use for our elements as they are created by javascript.

 

The jQuery

Now for the cool part! I’m going to be using jQuery to make this task simpler. As I mentioned before, jQuery is a javascript library that makes life in the web world so much better. There are really only 3 parts to the script.

Part 1: Setting it up

As you can see, the setup is pretty darn simple. We create a few variables to hold the height and width of the <div> we will be running this animation in, we have a fallingID which will keep a numeric count to be used for creating element id’s, and last but not least, we have the fallingString variable which will give our program the characters to show. I’ve also included a ‘getRandomInt’ function that creates random numbers and actually returns values in a Normal distribution. (if you know stats that will make sense)

Part 2: Detecting window size changes

Here we detect if the size of the window has changed and if so, we simply update our variables representing the size of the div. We are only doing this because our <div> is matched to 100% height and width of the window, so it’s size changes as the windows does.

Part 3: Making the action happen. There are two pieces to this one, one part fires an event to create and start a new letter falling, while the other creates the letter and the animation.

Here we use the ‘setInterval’ function to fire off a function call every 10 ms. The function we are calling is the CreateObject function here:

So here is a little more to bite off, but don’t worry, I’ll step you through it. One the first line, we are simply using the .append()method to add our new <div> to the ”FallingContentWrapper” <div>. We then define how the <div> should be built by assigning it the class we created above and also assigning it an id based off the ‘fallingID’ variable. For its content, we simply grab some random index from our string display whatever character is at that index.

The next couple lines deal with css so we will use the .css() function. The top one of the two gets a random number from 0 to the width of our <div>. This will cause the letters to be spread out randomly across the screen. The second one sets the font size to a random number just to add a cool depth effect.

Lastly, we have an animate function. This is where jQuery really shows it’s stuff. Using the .animate() function, I’m going to be  setting the ‘top’ css property to be the height of our outer <div>. I then get a random number from 500-6000. This number will determine how long our animation takes to complete in milliseconds. The last piece is the completed function which will fire whenever the animation has completed (500-6000 ms). Once the animation is complete, we will want to remove the <div> that we created so that we don’t end up with thousands of elements on our page. To do that, we use the .remove() method which will remove the element from our outer <div>.

We are DONE! Here is our entire page all at once. Notice you need to reference the jQuery library and point it to the correct location.

 

Hope you all enjoy making your own changes to this and I’d love to hear back and see some cool things you’ve done based off this concept.

 

Words with Friends Helper

Words with Friends Helper (The Design)

Durring Christmas I was at home hanging out with some of my brothers who both got a new iPhone for christmas. They were enjoying a game of Words With Friends when I decided it would be fun to write an application that would give one of them an unfair advantage over the other. I know there are applications out there that will already do this, but what is the fun of just using an app? It is way more exciting to design and build one yourself!

In this post I’m going to be covering some of the basics of creating and building a Silverlight application, building custom styles, performing web requests, basic linq, and a little taste of advanced algorithms.

I’m going to separate this project into several posts due to its size and scope. First I’ll be starting with the layout and design. We know the basics of what we want the application to be able to do, it needs to allow them to select which letters they have available, and somehow determine what words can be built given some characters in specific locations. I didn’t want to go to the trouble of creating a game that solved their entire board for them, plus that takes “all” the fun out of it for the user. So in our implimentation, we are going to allow them to use * to represent possible combinations of their available letters and combine it with static letters allowing them to make a search string. ex: h*t

Now that we’ve decided on our implementation, its time to design the interface. I like to build my design before getting too far into the code. It isn’t a rule you have to follow, but I like it because it gives me a chance to visually see what feature sets I may have overlooked in my initial documentation. (in my head)

Design

So open up Expression Blend and create a new Silverlight 4 application. For this application, we’ll really only be using a few controls so if you want to drag a couple out there, you will need:

  • TextBlock
  • TextBox
  • Listbox
  • DataGrid
  • ToggleButton

If you can’t find a toggle button just add a button and then look at the xaml. You’ll see <Button… you just need to change that to <ToggleButton… and you’ll be good to go. You can see what I’ve done from the picture as far as layout. Don’t copy paste all the buttons till you have one the way you want it, that will save you some time in the long run.

We’ll start our customization with our button style. For my buttons, I wanted to allow the users to see how many points the letter was worth as well as the number of that specific letter they had in their hand. In order to better facilitate this, I just made a custom control for my button. I won’t go into great detail on how to build a custom control here. If you want to see a more in depth post on it, I suggest you check out my Gauge Control post and look at the source code for this one.

The control should consist of a Toggle button and two TextBlocks. I have set the ‘IsHitTestVisible’ property to ‘False’ on both of the TextBlocks so that when the user moves their mouse over those TextBlocks, they will be able to click the button rather than the TextBlock. We will need to add dependency properties for both TextBlocks and the IsChecked state of the ToggleButton, as well as bind the Content of the ToggleButton to the Content of the control. As I said earlier, I’ll forgo any further details regarding this part of the control and instead move on to styling the ToggleButton.

Start by creating a copy of the template by (in Blend) right clicking the ToggleButton and selecting Template >> Copy. Since Blend does most of the heavy lifting for you, I just wanted to give a few quick pointers on creating a style. If you’ve ever made a style for something, you’ve probably found the many limitations of the “ContentPresenter” that is given to you. For instance, if you use the default, you can’t change the font type, color or size which really limits your control. In order to get around this, you can simply add a TextBlock, and make it’s Height and Width properties be “Auto” then center vertically and horizontally with margins set to 0. Now for the binding.

We are going to bind the properties of the TextBlock to the properties of a ToggleButton. As you can see, we use “TemplateBinding”  rather than “Binding” this is simply a shortcut for binding to a templated parent’s property. We will bind the Text, FontSize, Foreground, and FontFamily properties to the template. Now draw a rectangle for the background. We won’t bind these any properties on this since we need to have multiple states on our control.

Great! All our template bindings are complete. Now we need to edit the states of the button in order to give it that nice slick look we are going for. What you see on your screen right now is the default state so select the “States” tab and choose “Checked”. You will notice the red border around the builder window, now make the appropriate changed to the background an any other properties you want. Remember, if you to change a background, you have to use the same type of fill pattern. (no fill, solid, linear, circular, or image) If you change this pattern in “Record Mode”, you’re default look will be changed to that fill type.

Now that the button is done, we can make our way back to our main window. We’ll want to include our button into our main window so we will need to add a reference in the xaml at the top of the page. If you didn’t put your button control in a folder, you can put something like this:  xmlns:local=”clr-namespace:YOUR_PROJECT_NAME”  if you put your control in a folder simply add that folder to the end of the reference like so: xmlns:local=”clr-namespace:YOUR_PROJECT_NAME.YOUR_FOLDER”.

Now to access you control, you simply put <local:YOUR_CONTROL_NAME… when you hit the ‘:’ it should give you the option to include your control. If it doesn’t, simply rebuild the project and try again. Now that you have an instance of your control, simply copy and paste it 26 times. You can organize your layout however you want, or you can copy what I’ve got, it doesn’t matter either way. You will need a datagrid to store the results, a listbox to store the dictionary words, your buttons, a search textbox, and a textbox for the definitions. Go ahead and give everything a name and style them the way you want.

Congratulations! You are done with the front end, now it’s time to start the back.

Next Post (Making it Work)

Silverlight Gauge Control

Silverlight Gauge Control (creating a custom UserControl)

I had some time the other day while waiting for a Microsoft’s SQL Server to install so in order to get through the bordom I built this fun little control. Its pretty strait forward as far as designing a control goes, but I figured I’d post the code and give an entry level tutorial on how to make a custom control in Silverlight.

Gauge Control

As you can see, the control allows for setting three markers and toggling their positions. It allows you to set the value of the dial and as well as Min and Max properties.

 

Custom UserControls and Silverlight

Silverlight and WPF provide an exelent framework and tools to help you create controls that not only look but perform in your own unique way. UserControls are a great way for you to create a control that might be used several times throughout an application, and needs to maintain some sort of unique functionality. There are two types of controls in Silverlight and WPF, (UserControl and Custom Control). Though I won’t go into great detail on their differences, a UserControl forces you to derive from the UserControl base class which has a limited set of built in properties. Custom Controls on the other hand allow you to derive from a higher level control.

For instance, if I just wanted to make a control that simply made some changes to the behavior of a textbox, I would likely want to use a Custom Control because I could derive form the TextBox control and my control would automatically inherit all the events and properties that are associated with a textbox. That saves  me a lot of work in the end! For a control like this I could have actually derived from a Slider control and it would have given me several properties that I had to implement myself, but all in all the work was very minimal and a custom control is a more time intensive task.

Now that that is out of the way, lets get onto the building of the control.

 

The Layout

As I said earlier, the layout is pretty strait forward and I didn’t do any binding to the properties I created in the background. Instead I just set the values in the property setters.

 

 
as you can see from the image, I’ve placed the entire control into a Viewbox to keep the proportions correct. You can see the little blue dot over the red circle. It has been lined up with the center of the control and the bottom of the gauge. This allows the gauge to rotate freely around the gauge. The Grid will rotate centered at that point.

 

In order to build the parts easier I built them vertically and rotated them afterword. This created an offset angle that needed to be factored in to the rotation.

 

This obviously only really comes into play when I need to assign the Dial a value. So I created a couple simple functions to translate the values and placed them in the controls code behind.

 

 

The functions speak for themselves, but they perform the appropriate rotational translations on the objects. One thing to note is the use of the max property in the ConvertValue which allows the control to adjust the maximum value of the gauge.

 

One thing I wanted the control to be able to do was to allow the user to determine the background color as well as the color for the inner half circle. In order to accomplish this, I bound to some of the default properties exposed by the user control.

 

If you look at the golden text, you can see the bindings I have done to the UserControl properties. Just as a brief explanation of the binding, I gave the UserControl a name in it’s opening tag. I can then reference that name in the ElementName= portion of the binding. Once I have referenced the object, I can then bind to its properties, in this case I wanted the BorderBrush property.

 

When you start looking at more of the xaml for the control, you will notice several binding statements, they ultimately allow the control to simply make use of the properties already made available by the UserControl object.

 

Wire it up

Now that the view has been built and we are happy with the look of everything, its time to wire everything up. First off, jump into the code behind file where you can create properties for each of the rotating grids. Here is the dependency property for the DialGrid.

 

Dependency properties are special public properties that allow you to expose the property and also bind data to it. All the different properties that you set in a typical control, like the “Text” property of a TextBlock, are actually implemented using dependency properties. In the setter of this property, I’ve added several other function calls and operations including setting the tooltip for the control.

 

Once you’ve created these properties for the values and visibility of the different controls, the backend is done. It’s now time to add the control to your application.

 

Implementation

So now for the last step if you are wanting to implement it into your own solution. Here is the code from my control being implimented into my mainWindow.

 

All you need to do is add the control to your solution then add a reference in xaml at the top of you MainPage.xaml file. It should look something like this:

 

 

This will add a reference to your project file so any other controls that you create on your own (assuming you don’tuse a different namespace) can be accessed by using the ‘<local:’ tag now.

 

In conclusion, you can see that creating a custom user control is actually pretty strait forward. There are obviously new things to deal with, but once you get a hang of them, its actually not much different than building something on you MainPage. Hopefully you’ve been able to see how convenient it is to have the ability to create these usercontrols and use them countless times within your other views.

I’ve posted the entire solution file for download so you can see the source code for creating and implementing the control.

Get the complete solution file here: Guage Controls