Category Archives: UI

Staying in control

When working on an app even a bit more complex than couple of views, you quickly find yourself in a need to create either a custom UI components (user controls in Windows development terms) or at very least a composite components. Whenever I find myself in this kind of situation, I try to generalize them and make them as self-contained as possible. In my opinion this approach has two benefits: First, obviously, I can easily use them later in other projects. Second, it makes a better architecture and makes it easier to have more instances of the component in the same project.

I find this to be a standard practice; in most cases when you run into this situation, you find a ready-made solution to your problem in stackoverflow. Usually, it’s in a form of a snippet that you just copy into your project and sometimes you get the complete user control from some project. I recently worked on an app, and found there were no solutions to couple of my problems, so I thought I would fill in the gap and provide them here. Both solutions are quite trivial (except for the first one, if you target a specific platform/framework version), but the thought of saving the precious time of any developer facing the same problem makes me happy.

Sliding panel user control


So, to the point. Behold, a sliding panel! With buttons, text, bells and whistles! User can drag it or animate it by tapping an icon or a button. The problem here isn’t the composite nature nor the way it is manipulated (dragging), but the performance when your project is built on a specific framework, namely Windows Phone Silverlight. I try to always work with the latest frameworks, but sometimes it’s just not possible. The performance trick used here is very conventional: Render the whole layout in a bitmap and then animate that. The nice thing about this component is that it works in both Silverlight and Windows Universal apps. It is fully self-contained.

See more detailed description and get the source code from my GitHub project.

Ticker text user control

In image: Three ticker text user controls in StackPanel layout.

This is quite trivial and rarely needed UI component. To be honest, I was quite surprised not to find a version of this anywhere in the interwebs. I suppose one must be somewhere and my search engine skills are just below average. Or it could be that this component is so trivial, that no-one bothers to even look for a ready-made solution. In any case, since I lack all discretion, I dumped my user control here (or actually to GitHub) anyways.

In case the “ticker” does not ring any bells, it’s the component that has a scrolling text on it, much like you see in the lower part on your television sets when watching the news. My control, like the sliding panel, is supported on Windows Silverlight and in Windows Universal apps.

Find the code in GitHub.