DSL model gradient background

In one of my recent DSL projects I was looking a way to get that nice gradient background that you can find in the Visual Studio DSL designer like the figure below:

As we can see, there is a gradient background along with a title "Classes and Relationships" at the top left. So let's start with the steps to get this working and define our own background color and title.

First you need to locate you diagram element and select the property "Generate Double Derived" as True like in the figure below:

Second you need to add a partial class of your diagram defined type which is the generated class that is defined in the Diagram element in the above figure.

So let's say that you have a class named "Language1Diagram" (like the default "MinimalLanguage" sample model), then you can create a new partial class like this:

public partial class Language1Diagram

{

    private readonly Color BackgroundGradientColor = Color.LightCyan;

    private readonly Color BackgroundSelectedGradientColor = Color.LightBlue;

    private readonly Color BackgroundSelectedInactiveGradientColor = Color.CadetBlue;

 

    // setting as true will create an AreaField named "Background"

    // that we can customize in InitializeResources method.

    public override bool HasBackgroundGradient

    {

        get { return true; }

    }

}

As the comment points out, with this override you will get the background AreaField in your Diagram element. Now you need to customize that background with your required attributes (like the constants values defined at the top of the class definition) and add your title to the diagram background.

So you can add this code:

 

// This method runs per model

protected override void InitializeResources(StyleSet classStyleSet)

{

    base.InitializeResources(classStyleSet);

 

    // Fill brush settings for background (Start gradient color).

    BrushSettings backgroundBrush = new BrushSettings();

    backgroundBrush.Color = BackgroundGradientColor;

    classStyleSet.OverrideBrush(DiagramBrushes.ShapeBackground, backgroundBrush);

    // Selected state

    backgroundBrush = new BrushSettings();

    backgroundBrush.Color = BackgroundSelectedGradientColor;

    classStyleSet.OverrideBrush(DiagramBrushes.ShapeBackgroundSelected, backgroundBrush);

    // SelectedInactive state

    backgroundBrush = new BrushSettings();

    backgroundBrush.Color = BackgroundSelectedInactiveGradientColor;

    classStyleSet.OverrideBrush(DiagramBrushes.ShapeBackgroundSelectedInactive,

                                                                       backgroundBrush);

 

    // We should find a "Background" field created when we set the

    // HasBackgroundGradient property to "true"

    AreaField background = this.FindShapeField("Background") as AreaField;

    if (background != null)

    {

        background.DefaultReflectParentSelectedState = true;

        // We can set the height of the background area a bit smaller (like half the  

        // total height) so the gradient will fade "faster" so you can see the fading in

        // samller areas

        background.AnchoringBehavior.SetBottomAnchor(AnchoringBehavior.Edge.Bottom,

        this.MaximumSize.Height / 2);

    }

 

    // Custom font styles for diagram title

    FontSettings fontSettings;

    fontSettings = new FontSettings();

    fontSettings.Style = FontStyle.Bold;

    fontSettings.Size = 9 / 72.0F;

    classStyleSet.OverrideFont(DiagramFonts.ShapeTitle, fontSettings);

 

    // Create a text field for the Diagram Title

    TextField textField = new TextField("DiagramTitle");

    textField.DefaultText = "Itinerary Designer";

    textField.DefaultVisibility = true;

    textField.DefaultAutoSize = true;

    textField.DefaultFontId = DiagramFonts.ShapeTitle;

    textField.AnchoringBehavior.SetLeftAnchor(AnchoringBehavior.Edge.Left, 0.33);

    textField.AnchoringBehavior.SetTopAnchor(AnchoringBehavior.Edge.Top, 0.07);

 

    this.ShapeFields.Add(textField);

}

 

So now you can get a gradient background with title that will also change the color on focus events like this:

 

Focus on selected background:

Focus outside diagram:

 

Now you can have gradient backgrounds in your DSL models.

Published Tuesday, April 21, 2009 10:24 AM by HernanDL

Comments

No Comments

Leave a Comment

(required) 
(required) 
(optional)
(required)