I did this demo some time ago but never shared it and thought it would be a good idea to get it out to everyone. When I created it a few months back I was giving a session on WPF and I wanted to have a very simple example of composition. I couldn’t really find one at the time and thus this demo was born.
What you need to get started:
Visual Studio 2008 Beta 2
- Bust out a new WPF Project in C#
- Now slap a couple of buttons and a textbox on the form. Make them look like the figure below. Don’t worry about the names of the controls, we will change them in a second.
- Now make modifications to the XAML code as seen below. The main things to note here are the Name attributes and the removal of the Margin attribute from the TextBox control. Don’t sweat the other attributes as they may be different for you. Unless you’re massively anal retentive then by all means make your code EXACTLY like mine. Good luck figuring out where I put all the spaces muhahahaha.
- Now we want to put the TextBox inside (yes, I said INSIDE) the button called btnMain (the big one). Cut the element and replace the word "Button" with our element like so:
Your form should now look like this:
You might want to widen the TextBox a bit:
- Just for fun, run your code and see what you have so far. It’s not pretty but it is very cool to have a TextBox inside the button. But wait there’s more!
- Stop debugging and let’s put some code into our project. To do this we want to wire up some events. We will do one the traditional way just to show it still works and then one the "new" way. First, double click on the edit button on your form to get to our code. Now type in the following:
- Looks funky doesn’t it? Don’t worry you will understand what is does in a minute. Now go to your XAML and let’s make a new event for the TextBox. Specifically, we are looking to have a KeyDown Event in place. Add an KeyDown attribute to the TextBox (you should get IntelliSense to help you out) and then choose "<New Event Handler>" from the IntelliSense choice just like so:
- Now go over to your code behind file and you should see an event all ready for some code.
- When the user presses enter we want to have some thing happen so put in an conditional block to deal with someone pressing enter
- Here is the fun part. We want to set the button’s Content to the text that was typed into out textbox. This will "set" what the button displays. The finished event should look like this:
- Now go back and look at step 6. Does it make sense? When we want to "edit" the text we set the button’s content to an actual textbox but when we are done editing then we want to "set" the button’s content to just some plain old text. Run you project and type some text into the textbox.
- Now press Enter and see what happens:
- Sweet! So the button began with a textbox as its content then when we pressed enter its content was changed to the text that we typed in. But what happens when we click the edit button? Do it and find out 🙂
Type in some new text and have fun with it.
- That’s it!! Enjoy!