414 views
in GUI Development by

I need to render a effect like this, so a dynamic list of sentences each one with it's rounded background.

Maybe with AttrText I can obtain the effect but without rounded corner? 

Thank you

1 Answer

0 votes
by

To obtain such effect do following:

  • Add a new Bitmap Frame view to your component.
  • Add a new Text view to your component.
  • Configure the Bitmap Frame view to use a bitmap with your desired rounded corners rectangle.
  • Add a new slot method to your component.
  • Assign this slot method to the property OnUpdate of the Text view.
  • Make the Text view large enough for the text or set the property AutoSize of the Text view to true so the view can adjust its size automatically.
  • Implement the slot method:
var rect  area   = Text.GetContentArea();
var point margin = <10,10>;

Frame.Bounds = area * margin;
  • Press F7 to reload the component.

The Text view sends a signal to the associated slot method automatically every time the text changes. The associated slot method is thus perfectly intended to layout decorations around the Text view or to layout other views to the edges of the text.

In the particular example the slot method determines the current area occupied by the text, enlarges this area by a 10 pixel wide margin and arranges the Frame view at this calculated area.

Regarding the drawing of rounded rectangles see following article:

http://ask.embedded-wizard.de/177/drawing-rounded-rectangles

    Ask Embedded Wizard

    Welcome to the question and answer site for Embedded Wizard users and UI developers.

    Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

    Embedded Wizard Website | Privacy Policy | Imprint

    ...