first widget

To serve as widget, your class only need to derive from the Widget class, the minimal working one could be something like this:

using Crow;
using Crow.Drawing;

namespace TestWidget {
  public class TestWidget : Widget {
  }
}

(At this point, you may already test it.)

Now, lets try to draw something. The bound of the drawing is give by the ClientRectange which is local coordinate to the widget taking care of the Margin property. Override the onDraw method will give you the graphic context (gr) to emit draw commands.

protected override void onDraw (Context gr)
{
  //calling the base method with fill the background
  base.onDraw (gr);
  //lets fill the client renctangle with a green Rectangle:
  gr.SetSource (Colors.Green);
  gr.Rectangle (ClientRectangle);
  gr.Fill();

As you may notice, if you define no margin in your IML, the client rectangle will take all the space, so set in you IML a background color as well as a margin to test your widget:

<TestWidget Background="DargGrey" Margin="10"/>

The drawing context is a normal Cairo one, follow this brief introduction if you are not used with it.

Imagine now that you want your green color to change when the mouse pass over. First you have to add the GLFW using, which handles mouse aund keybord inputs.

using Glfw;

Now, lets define a simple field with your color:

Color myColor = Colors.Green;

Override the onMouseEnter and onMouseLease to get de desired effect:

public override void onMouseEnter(object sender, MouseMoveEventArgs e) {
  base.onMouseEnter (sender, e);
  myColor = Colors.SeaGreen;
}
public virtual void onMouseLeave(object sender, MouseMoveEventArgs e) {
  base.onMouseLeave (sender, e);
  myColor = Colors.Green;
}

But because, their is no binding involve in there, you must notice the interface to redraw this widget, there are three methods to ask for updating a windget:

• RegisterForGraphicUpdate: this will trigger a full update with measuring and drawing.
• RegisterForRedraw: this will not query a measure, only a full redraw of the content.
• RegisterForRepaint: This will only ask for repainting the content without updating it. (only use in special cases)

In our example, we only need to ask a redraw, so each time we change the color, we need to call RegisterForRedraw():

public override void onMouseEnter(object sender, MouseMoveEventArgs e) {
  base.onMouseEnter (sender, e);
  myColor = Colors.SeaGreen;
  RegisterForRedraw ();
}
public override void onMouseLeave(object sender, MouseMoveEventArgs e) {
  base.onMouseLeave (sender, e);
  myColor = Colors.Green;
  RegisterForRedraw ();
}

And dont forget to replace the Colors.Green by myColor field in your drawing:

gr.SetSource (myColor);

But, because your TestWidget is the only widget on the interface, mouse will never leave it, so you'll never get back you green color. Enclose it in a container with a sufficent margin so you have your mouse leaving it:

<Container Margin="50" Background="SteelBlue" >
  <TestWidget Background="DarkGrey" Margin="20"/>
</Container>

Source IML