SharpDevelop Community

Get your problems solved!
Welcome to SharpDevelop Community Sign in | Join | Help
in Search

Kumar Devvrat

WPF Designer : New features

My previous post highlights features that had to be implemented as a part of this year's Google Summer of Code project. The WPF Designer branch, which was meant for parallel development got merged with the trunk in revision 6319. 

I am summing up what has been done as far as WPF Designer is concerned. Since designer development is UI/UX-centric, I am keeping this post screenshot heavy with less text. Also for the post, let me describe the term "Adorner" in context of the designer if one is not aware of it. Adorners are essentially WPF Elements to interact with the control(s) they adorn in some way which improves the user experience with the designer for example "Resize thumbs" to resize the primary selection. 

Basic Adorners

I have added commonly used adorners which ease out resize and placement operations. Below is a screenshot highlighting some of them.

AdornersSize display

Margins can be set or removed by clicking on the corresponding stub or handle.

In-place Editor

The designer now also has an In-place editor to directly edit the Text inside any element. Text which can be edited are highlighted by a border around the text on mouse hover and one can simply click it to edit it. 

In-place editor

Note : Some issues regarding the editor placement and size still exist but as far editing the text goes, it works fine.

Quick Operation's Menu

Another interesting feature that I have added is a quick operation menu attached next to the selection. The idea of coming up with is somewhere rooted in ReSharper context actions. The shortcut to trigger that is [Alt] + Enter. Currently it only allows changing some properties  

  • Horizontal Alignment
  • Vertical Alignment
  • DockPanel.Dock if the adorned element is inside a DockPanel.
  • StackPanel orientation

Quick operation menu

PropertyGrid Improvements

  • Type editor for properties of type ImageSource like Window.Icon and Image.Source.

    Choose image dialog

  • Editing attached properties.

    Editing attached properties

  • Validating numeric values through highlight colour and tooltip of the text.
  • Hide obsolete properties in the designer.

Outline

The outline for the designer elements had been earlier coded by Ivan Shumilin. I have implemented that for the designer in the Outline pad.

Outline

Other features
  • Edit operations : Cut/Copy/Paste elements in the designer.
  • Re - ordering elements in the StackPanel through click and drag.

    Re-ordering controls in StackPanel

  • Context menu having basic options.
  • Context menu

  • Navigating between elements through Tab and [Shift] + Tab.
  • ToolTip for specific adorners.
and numerous other bug fixes.

Please feel free to reply with any suggestions/remarks on the above or if you have in mind any interesting feature that would be good be for the designer.For any bug encountered, please report them here

Cheers,

--
Devvrat
   

 

Comments

 

gdorigo said:

Hi Devvrat, I'm implementing a plugin for sharpdevelp that makes extensive use of WPF Designer. I want to know if there is a future improvement and bug fixes in this, because there are now a lot of missing features and some major bugs.

IE: I'm not able to view the images (using <image source="img.jpg"/>) at design time.

Cheers

January 15, 2013 6:23 PM
Powered by Community Server (Commercial Edition), by Telligent Systems
Don't contact us via this (fleischfalle@alphasierrapapa.com) email address.