• the WPF ruler is updated to VS2010 and the contribution of Raf Lenfers was added
• the color picker is also up to date
• the special WPF tabs

While Telerik’s commercial color-picker is way better than ours you might enjoy the simplicity and the fact that it’s free The ruler is another story, I don’t think many companies offer it and it’s in fact not so easy to implement.

Anyway, enjoy.

L2 G2 is our biggest product and has been used by companies to create ‘big’ applications in diverse markets. Because it is based on Unity for dependency injection and because Microsoft waited quite a while to release a Silverlight analog, it took a while to create a Silverlight analog of G2. We baptised it ‘L2′. Of course we could have used alternative injection libraries (many have popped up this year in fact) but we wanted to stay as parallel as possible to G2 in order to enable our customers to move with ease between G2 and L2. So, it’s there and you can test it online here. It’s still in beta and we welcome any feedback. You can also download the code and the core library, see the L2 product page for more.

S#scripting library. This little jewel allows you in effect to alter an application at runtime much like macro’s. In fact, you can compare it to VBA in office except that our S# library will work in any .Net context (including XNA, Silverlight, WPF and WinForms). I will talk about S# more later this week in another blog posting and Denis Vuyka will also publish soon more information regarding S# and, another kid on the stage; Processing#.

iSee! In addition to this we have been experimenting with novel approaches to diagramming and how to take full advantge of Silverlight and WPF animation capabilities. This lab project which has been now already for one year in the back of our minds is ready to be tested as well. Head over to our iSee demo and let us know what you think. iSee is all about animating visual elements and you can apply it anything which inherits from the FrameworkElement base class, that is…as good as anything you’ll find in WPF and Silverlight. Furthermore, iSee is really easy to use. It boast a fluent API and a very intuitive series of methods. The fluent things means you can chain actions ad infinitum.

For example, the following line of code:

Attach(image, true).Scale(3, 3, Duration.Automatic)
.Move(new Point(145,150)).Scale(0.3, 0.3, Duration.Automatic).Play();

will attach a given image to a canvas, scale it with a factor of three, subsequently move the image to another location and un-scale it to the original proportions. Easy! It would take a substantial amount of work to code this in C# or to create an equivalen storyboard in Expression Blend.

We also wanted to enable certain diagramming scenario’s and have integrated diverse methods which allow you to create diagrams, mindmaps and data visualization with just a few methods. In the demo you will see a few examples of this.

SPGLast but not least, I’m also proud to announce our new Silverlight property grid. Much like L2 is an analog of G2, so is the Silverlight property grid (we call it ‘SPG’) an analof of our WPF property grid (‘WPG’). You can read about it on Denis’ blog and watch this space for more in the next few weeks.

All these products represent a considerable amount of work (testing, demo versions, docs, samples…) and we are still in the process of packaging them. Also, for prices and official releases you’ll have to wait a bit, we’re working on it. Meanwhile let us know what you think. The Silverlight market is booming these days and there are excellent products around, still we think that our set of products fill a gap and represent a unique spectrum of solutions you’ll not find elsewhere.

• the application is fully WPF and uses the composite application block to combine multiple modules
• the customizable reporting engine is quite unique and allows one to create reports at runtime by simple dragdrop. The fact that it’s home-made is astonishing.
• the integrated diagram view is based on our own G2 library and allows a user to create or visualize relationships between hostorical events, geographic data and evidence data
• the docking environment contains a wild amount of sliding panels and windows which at first can be daunting to understand and manage but in the end feel very natural and speed up the access to the many views of functions of the application
• the backend is based on WCF and the data access layer is generated via LLBLGen. Did you know LLBLGen uses Netron for its diagramming needs?
• the indicator module is just like the reporting module  home-made stuff. Both modules would for sure be very useful outside their current application boundaries and it’s somewhat sad to see so much great stuff hidden in a niche application while it could go way beyond it. Who knows how much great WPF stuff is out there in internal enterprise applications?

While the whole project is related to a particular subject (water, floods, lakes, dams, irrigation, rivers, rain…) it would work with many other subjects; production chains, ERP systems, food production systems etc. The diagramming part in particular would work well outside its current domain. The many customizations of G2 in function of this project has turned the core into a data visualization control while retaining the many features it already had. It shows in effect how G2 can be adapted with ease to embrace all sorts of project requirements.

It’s sometimes tough not to blog about the projects we work on because often customers want to keep their own developments hidden (many reasons are playing here…). I wish I could tell you about how our diagramming stuff is used together with Microsoft Surface to boast a compelling experience, how it’s used inside Microsoft Dynamics to visualize CRM relationships, how it’s used in Sharepoint to create an holistic view on information, how…but sorry I’m not allowed So, I’m glad that (for once) I was allowed to say a few words about this project. Go and have a look at the project’s website where additional info can be found.

There are diverse color pickers on the net (see e.g. the framework sample, a more elaborate sample on CodeProject, Telerik’s commercial version…) but none of them were really what we were looking for, so we set aside a few hours to cook something. The color picker we were looking for had to be flexible and templated, support both solid colors and gradients. The screenshot next shows some of the templates we assembled.

This custom WPF control is a standard example of databinding, control templating, routed events, dependency properties and XAML fun. Looking at the code of commercial controls we wonder why they make things so complicated sometimes…

As V2.0 of G2 is solidifying, we are much investing in the creation of diverse samples and (intelligent, ie. non-compiled API)  documentation. See also these articles in this context:

• G2: some terminology
• G2: styling and templating
• G2: how to use the layout algorithms
• G2: getting started

PS: sorry for the self-indulgent tone, but one should now and then feel satisfied about years of work

In the past week I had a look at Expression Blend 3 and was impressed with the amount of new features both for WPF and Silverlight. The application is a delight! I’m not so sure that Sketchflow (see screenshot on the left in case you have no idea what it’s all about) will replace paper and pencil but it does offer a new approach which might suit some workflows in companies. In any case, I was seduced by the diagrammatic representation of the screen-flow which allows you to visualize/change and beautify (screen transitions etc.) the flow of the various WPF/Silverlight forms you hook up together. Obviously it came to my mind to mimic it in G2 and…presto, I had it done in the course of an evening. The most difficult part in the process was actually not the diagramming bit but the definition of the shifting tray which shows up when one hovers over the nodes. The situation is very common and with customers we always have this kind of discussion: the gizmo’s and bells should be shown at all time or is usability increased by popups, sliding panels and expanding trays? Expression Blend is in this context different from other Microsoft application where usually the buttons and gears are fixed (cfr. class designer, SQL designer, DSL designers etc.). Well, this is not a bad things since Expression is aimed at designers and people who are looking for cool effects. In fact, WPF and Silverlight offer much effcts and sparkles which are hardly used in line of business applications nowadays. Personally, I continue to be amazed how much one can achieve with WPF (and G2) without much programming and this little sketchflow proof of concept on the basis of G2 was huge fun.

Below is a short sequence demonstrating the sample. Sorry for not delivering the sample code, G2 is a commercial component (see however the control template below for an idea of what it involves). If you buy G2 the sample comes with the box together with many other (and ever growing set of) samples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<style TargetType="{x:Type Sketchflow:SketchFlowShape}">
  <setter Property="MinWidth" Value="130"/>
  <setter Property="MinHeight" Value="25"/>
  <setter Property="Background" Value="Blue"/>
  <setter Property="Foreground" Value="White"/>
  <setter Property="SnapsToDevicePixels" Value="True"/>
 
  <setter Property="Template">
    </setter><setter .Value>
      <controltemplate TargetType="{x:Type Sketchflow:SketchFlowShape}">
        </controltemplate><controltemplate .Resources>
          <storyboard x:Key="SBExpand">
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="0"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="0" KeySpline="0,0,0.625,1"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20" KeySpline="0.11,0.99,1,1"/>
            </doubleanimationusingkeyframes>
 
          </storyboard>
          <storyboard x:Key="SBCollapse">
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="1"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="20"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="0" KeySpline="0.08,1,1,1"/>
            </doubleanimationusingkeyframes>
 
          </storyboard>
          <objectdataprovider x:Key="Tags" ObjectType="{x:Type Sketchflow:Stuff}" MethodName="get_VisualTags"/>
          <style x:Key="TagButton" TargetType="{x:Type Button}">
            <setter Property="Background" Value="Transparent"/>
            <setter Property="Button.Command" Value="{x:Static Sketchflow:Window1.ChangeBackgroundCommand}"/>
            <setter Property="Button.CommandParameter" Value="{Binding}"/>
            <setter Property="Button.Cursor" Value="Hand"/>
            <setter Property="Template">
              </setter><setter .Value>
                <controltemplate TargetType="{x:Type Button}">
                  <stackpanel x:Name="line" Orientation="Horizontal" Background="{TemplateBinding Background}">
                    <rectangle Width="5" Height="5" Fill="{Binding Color}" VerticalAlignment="Center" Margin="5,3,0,0"/>
                    <textblock Text="{Binding Title}" HorizontalAlignment="Stretch" Margin="7,0,0,0" VerticalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                  </stackpanel>
                  </controltemplate><controltemplate .Triggers>
                    <trigger Property="IsMouseOver" Value="True">
                      <setter Property="Background" Value="Silver"/>
                    </trigger>
                  </controltemplate>
                </setter></style></controltemplate>
              </setter>
 
            <setter Property="FontSize" Value="10"/>
            <setter Property="Foreground" Value="White"/>
          </style>
          <datatemplate x:Key="TagTemplate">
            <button Margin="-2,0,0,0" Style="{DynamicResource TagButton}" Width="79.5" Content="{Binding }"/>
          </datatemplate>
 
        <grid x:Name="PART_maingrid" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
          <border x:Name="tray" Margin="8,0,0,1.046" VerticalAlignment="Bottom" Height="20" BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="0,0,5,5" Background="#FF333333" RenderTransformOrigin="0.5,0" Width="83.737" HorizontalAlignment="Left">
            </border><border .RenderTransform>
              <transformgroup>
                <scaletransform ScaleX="1" ScaleY="1"/>
                <skewtransform />
                <rotatetransform />
                <translatetransform />
              </transformgroup>
            </border>
            </grid><grid>
              </grid><grid .RowDefinitions>
                <rowdefinition Height="Auto"/>
              </grid>
              <grid .ColumnDefinitions>
                <columndefinition />
                <columndefinition Width="Auto" MinWidth="17.053"/>
              </grid>
              <stackpanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,3,0,0">
                <popup x:Name="TagPop" AllowsTransparency="True"   PopupAnimation="Slide"       HorizontalOffset="0"  VerticalOffset="-112">
                  <border Background="#FF333333" CornerRadius="3" HorizontalAlignment="Left" Width="84" Height="111">
                    <listbox x:Name="TagList" ItemsSource="{Binding Source={StaticResource Tags}}"  SelectedIndex="-1" ItemTemplate="{DynamicResource TagTemplate}" Background="{x:Null}" />
                  </border>
                </popup>
                <!--<image Source="Images/ConnectExistingScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>-->
                <button Style="{StaticResource ConnectNewScreen}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <image Source="Images/ConnectNewScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <image Source="Images/InsertComponentScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
              </stackpanel>
              <!--<image Source="Images/ChangeVisualTag.png" Width="Auto" Height="12" Grid.Column="1" Margin="0.872,3,5,0" HorizontalAlignment="Stretch"/>-->
              <button Style="{StaticResource ChangeVisualTag}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Width="Auto" Height="12" Grid.Column="1" Margin="0.872,3,5,0" HorizontalAlignment="Stretch"/>
 
 
 
          <rectangle x:Name="PART_rec" RadiusX="2" RadiusY="2" Stroke="{x:Null}"  StrokeThickness="2" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}"/>
 
          <textblock Text="{TemplateBinding ContentControl.Content}"  HorizontalAlignment="Center"
                         VerticalAlignment="Center" Foreground="White" FontWeight="Bold" />
          <!-- PART_DragThumb -->
          <core :TranslationThumb x:Name="PART_DragThumb" Cursor="SizeAll"/>
          <!-- PART_ConnectorDecorator -->
          <core :ConnectorDecorator x:Name="PART_ConnectorDecorator"
                       Visibility="Hidden"
                       Template="{StaticResource ConnectorDecoratorTemplate}"/>
          <rectangle x:Name="Arrow" Visibility="{TemplateBinding ShowArrow, Converter={StaticResource BoolToVisibilityConverter} }"  Stroke="{x:Null}" HorizontalAlignment="Left" Width="21" Height="21" Fill="{DynamicResource LitlArrow}" Margin="-7,0,0,14"/>
 
 
        <controltemplate .Triggers>
          <datatrigger Value="True" Binding="{Binding RelativeSource={RelativeSource Self},Path=IsSelected}">
            <setter TargetName="PART_rec" Property="Stroke" Value="#83EEEEEE"/>
            <setter Property="BitmapEffect" TargetName="PART_rec">
              </setter><setter .Value>
                <outerglowbitmapeffect GlowColor="White" GlowSize="7" Noise="0" Opacity=".41" />
              </setter>
 
          </datatrigger>
          <trigger Property="IsMouseOver" Value="true">
            <!--<setter TargetName="PART_ConnectorDecorator" Property="Visibility" Value="Visible"/>-->
            <setter TargetName="PART_rec" Property="Stroke" Value="#83EEEEEE"/>
            </trigger><trigger .ExitActions>
              <beginstoryboard Storyboard="{StaticResource SBCollapse}"/>
            </trigger>
            <trigger .EnterActions>
              <beginstoryboard Storyboard="{StaticResource SBExpand}"/>
            </trigger>
 
          <datatrigger Value="True" Binding="{Binding RelativeSource={RelativeSource Self},Path=IsDragConnectionOver}">
            <setter TargetName="PART_ConnectorDecorator" Property="Visibility" Value="Visible"/>
          </datatrigger>
        </controltemplate>

This minor update of the WPF PRopertyGrid (WPG) contains the following changes:

• ExpandableObjectConverter is supported for properties (complex properties). This allows you to drill down into an object by expanding sub-objects.
• The Property Name column is optimized for width and space saving
• By default the text-based editor commits property value on control invalidation (focus lost) or Enter key press, Escape key press cancels value change
• NotifyParentProperty attribute is supported for properties
• “ComplexProperty” sample to installation package demonstrating the expandable properties
• Bug fixes

WPG customers will be notified of this update via mail. If you think you are eligible to receive this update but we overlooked you in our mailing, give us a sign.

We’ve been busy. The screenshots reveal quite a bit the upcoming features but let me be explicit:

• Groups: shapes can be embedded in groups ad infinitum (this is an undoable action and copy/cut/paste works with groups as well, of course)
• Flowcharting: better support for standard flowcharting
• Arrows and connections: better support for databinding your stuff (i.e. data backend) to connections and related adorners
• Rotations: rotating shapes and groups (undoable action)
• Unity 2.0: Unity merges with the ObjectBuilder2. Nothing shacking here but it will simplify the underlying data exchange pipeline of G2.
• Library support: shapes, groups, layers, pages and whole diagrams can be saved to libraries and organized in categories. This features is based on an adapter mechanism, which means you can have libraries in a database backend or accessible via WCF etc.
• Alignments: aligning shapes is now possible. In conjunction with the snap & grid features this is particularly useful to have a nice layout.
• Snap & grid: everything has become snap-able.
• Linking: better support inside shapes to (hyper)link data; either diagram elements or data entities coming from your backend.
• XML: better support for XML import/export, extending the already very solid and beautiful data exchange pipeline of v1.0
• Theming of whole diagrams: apply a style to a complete diagram (cfr. Microsoft PowerPoint)
• Auto-connect shapes: auto-add or auto-connect shapes via the adjacent arrows appearing when hovering over shapes (cfr. Microsoft Visio)
• Bug fixes and squadrillions of little changes to make G2 better, faster, more useful, more business and data oriented, more beautiful.

No date fixed yet to release v2.0 though it’s pretty stable already now. So many things are going on these days… I sincerely hope to deliver a big headline one of these days regarding our future (and G2′s future in particular). In any case, I feel immensely proud about G2′s wonderful architecture and the breadth of applications it can support, the scope of features and the many high-tech subtleties which you will not find in any other diagramming package. It leaves the competition beyond the diagramming horizon.

It might look like an easy thing to but it’s not: how to draw a ruler in WPF? Problems you eventually encounter: the dots-per-inch (DPI) and device-independent-pixel (DIP) conversions, the inches and centimeters, but also the rendering and precise location of litle chips and more.

One of the things you also see often in drawing packages is the little chip representing the location of the mouse or the element under consideration. In addition, this features usually comes with guides and snap to a grid or to the guide. Now, this research was done in the context of G2 and diagramming (no surprise here I guess) but the rulers were easily developed and are useful outside this context, so I release the code here in the conviction that someone will find it useful somewhere/somehow. Note that guides, grids and snapping to guides or grids is related to rulers but cannot be part of it, so if you wish this you’ll have to implement it inside the canvas that the rulers embrace.

Don’t forget to say thank you

You can also find a color picker control here, in case you’re looking for some more WPF goodies.

Among the more salient features:

• editing properties of multi-selections
• theming and styling
• filtering of properties (very handy for easy access!)
• custom editors can be added with ease
• full control of what/how props are seen in the editor
• custom categories

In fact, everything you ever wanted and way better than the Expressing Blend propertygrid.

The official product page and our updated information brochure will be soon available but prices are as follows:

• the single developer license (binaries, getting started guide) is yours for $200,-
• the site license (binaries, sources + unit tests, getting started guide) is 500$

Both packages include one year of free updates and email support. Of course, we also offer custom development and integrations with our other products.

Stay tuned, we have more stuff in our backyard we’ll release in the near future!