No Events Tab in WPF Designer — No Problem!

January 12, 2008 at 11:52 am | Posted in Cider, Visual Studio 2008, WPF | Leave a comment

When I first encountered ‘Cider’, the designer for WPF, I was somewhat shocked and disappointed that the Properties window did not have an Events tab as in the Windows Forms designer where one can easily browse the available events and simply double-click to hook one up to an automatically generated event handler stub.  Was I going to have to now rely on the documentation to find the events and carefully type in the connection code and handler?

I said, “Very inconvenient!  Too much work.  I’ll stick to Forms!”  From the forums, I see that I was not alone.

Fortunately, Intellisense makes this a non-issue.  Just know the technique:

In Xaml, put your cursor after the control’s tag (Button, Ellipse, Grid etc) and press the spacebar.  Intellisense will list all of the properties and events that are available.  Note the events are marked with the lightning bolt.  Select an event from the list and hit the tab key twice.  This will add the event to the control’s attribute list and add an event handler stub in your code behind. 

Simple.

Note that the effort is almost identical to using the Events tab in Windows Forms.  The only difference is that you have to scroll through a combined list of properties and events and instead of double clicking, you ‘double tab’.

Or, if you wish, in the code behind, in the window (or page) constructor, type the name of the control (button1 for example) then a ‘.’.  Intellisense will list all properties, methods and events.  Select the event.  Then type ‘+=’ and hit the tab key twice.  Your event will be hooked up along with an event handler stub.  (This is the same as designing with Forms.)

Of course there are some common default events that can be hooked up just by double clicking on the object in the designer.  That is, if you double click on a button in the designer, you get a Button_Click event hookup.

The only thing that is really lacking is the little synopsis of what the event does that is provided by the Properties/Events window in the Forms designer; however, the event names are usually pretty self explanatory.

Hooking up events in the WPF designer are no big deal thanks to the Intellisense support and a little knowledge of how to use it.

Cider Tricks: Menus, TabPages, ToolBars

November 30, 2007 at 11:21 am | Posted in C#, Cider, Visual Studio, WPF | 1 Comment

The frustrating thing about the WPF Designer in VS2008 (a.k.a. “Cider”) is that it does not support drag and drop placement of items for every control. The first three that I encountered were menus, toolbars and laying out controls on a tab page. The IDE does have some capability to facilitate the design of these items that don’t require exclusive XAML coding. You just have to know the techniques to use them.

Menus

While you can add MenuItem to the toolbox, you can not drag it to the content portion of a Menu control in the designer. The easy way to create Menus is as follows:

1. Drag a Menu control from the toolbox onto the window.

2. Select the Menu control and find the Items property in the Property window. Click on the (…) icon. This will bring up the Collection Editor dialog.

3. Use it to add MenuItems. You can edit the properties of each item (like the Header property) as well as add sub-items by clicking on the Items property of the MenuItem. For the sub-items, you can also add a separator.

ToolBars

Items in a ToolBar can only be added with the XAML editor. Once added, you can edit and move them using the Collection Editor for the ToolBar.

TabControl

You cannot layout controls directly on a TabItem for a TabControl. There are two tricks that are required: use a Grid panel and using the SelectedIndex to put each page in view for layout.

1. Drag a TabControl from the toolbox onto the window.

2. Using the Items propery in the Property window, add your TabItems and enter the Header properties for each one.

3. In the XAML editor, add a Grid to each TabItem like this:

<TabItem>
    <Grid/>
</TabItem>

4. Select the TabControl and locate the SelectedIndex property. Change the index to the page you want to layout.

5. Drag and drop items from the toolbox onto the Grid of the TabItem.

Create a free website or blog at WordPress.com.
Entries and comments feeds.