In my last post I talked about creating a WPF search text box, but I skipped out on creating one of the more subtle visuals for it: the chrome. The main reason I did that was to reduce the already complex project, but now with its own blog entry, I can give it some time in the spotlight! 🙂
You might be wondering why we will be creating a chrome element in the first place, and that really is a good question. If you take a look at the standard WPF controls, like the text box, you’ll notice that when you mouse over the text box the highlight border nicely fades in and when you mouse out the highlight border nicely fades out. Well, this is extremely difficult to do in XAML, and frankly, I’m not even convinced that it can be done. And me being my picky self, I’d like to have a similar effect on my controls.
We’ve seen a lot of good advancement in usability in our operating systems and in our programs. One such advancement is the combining of the text label and the text box that it adorns. Not only does the text box hold the label, it also holds the search and clear button. This frees up a lot of space and allows us to create UI that looks like the following:
Now, I’m not going to argue who started or came up with this design because I frankly don’t care. :p The point is that it is around and it’s very good use of space and functional design. However, there is a problem; there isn’t a standard control to provide users with this functionality.
Today, let’s solve that problem. 🙂
Before we get started, let’s look at the actual control that we’ll be building.
Many times we want to have some sort of textured background in our apps. Sometimes it’s to provide some interesting piece of information, such as the dead space in a canvas or a transparent layer. Other times it is to merely offer some aesthetics to our program, especially with regards to negative space. Regardless of our reasons, the process for doing so have been pretty much to create a background image, tile that, and possibly apply some type of colorization if our image didn’t already have that rendered in for us. However, with WPF there is another way.
Let’s take a look at two of the backgrounds we’ll be creating before we actually move into the implementation details.
A slight checkered pattern.
A thatch pattern.
With all of the power that WPF provides, it’s easy to get lost in all of the details, especially when the tools that we have to create WPF programs with don’t always make things as easy as we’d like.
An interesting problem that I came across at work recently was a problem with menus and how to create a seamless transition from the menu item to the menu popup. Let me show you an example: