Misaligned elements is probably one of the most common issues I see with apps in the marketplace. In this episode of Top Ranked, I delve into why this is an issue and how easy it is to check for that and fix it. Alignment is a part of the overall Metro design language. I’ve even seen some designers in our UK COE group actually put post-it notes on their screens or on a device to verify that elements align properly. This acts as a sort of forcing mechanism for them to check alignment. The reason they do that is that you may not explicitly notice that stuff is out of alignment but when it is, you intuitively feel like something is off. In general your app will feel a little sloppy when the element alignment is out of kilter. The Metro design language does take alignment into account and as a result there are some things that you can keep in mind when designing and building pages. The magic number 12 seems to resonate throughout the experience. Most elements in the native apps align up in a grid of one form or another. The ingenious Jeff Wilcox built a development utility that makes getting the alignment right super simple. This utility is called MetroGridHelper is also simple to find since you can grab it with NuGet. Once included in your project you turn it on in App.xaml.cs in the same place where you turn on and off the frame rate counters and redraw regions etc. You simply add MetroGridHelper.IsVisible = true; in the if block where the profiling info is included. By doing it there you are assured that you will only ever see that grid when the debugger is actually attached (i.e. only in development). When you run your project with the MetroGridHelper turned on, you’ll see a series of red squares layered over every screen in the app. Those squares are strategically placed to make it really easy for you to see when elements are out of alignment. Another thing to keep in mind while we’re talking about element alignment is the amount of space you leave to