Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Box Image with label under ... (Read 1675 times)
pelion
Junior Member
**
Offline



Posts: 61
Joined: Nov 12th, 2006
Box Image with label under ...
Mar 28th, 2007 at 3:13am
Print Post  
as in the NetSample example.

This sample has boxes displaying images with text under them.

Is this simply a case of creating a box that can fit  text under an image? If so, is it possible to allow a user to edit that text by clicking on it?

Cheers
JC
  
Back to top
 
IP Logged
 
pelion
Junior Member
**
Offline



Posts: 61
Joined: Nov 12th, 2006
Re: Box Image with label under ...
Reply #1 - Mar 28th, 2007 at 3:15am
Print Post  
Actually, on further investigation (sorry, it's been a few months since I've used these classes), I think I can probably use grouping or ControlHost Attach To to achieve a decent outcome.

I have a few questions though.

Using the code below,

  • The Control Host is not attaching below the image, sort of left centered above it (regardless of what AttachTo enum I chose)
  • The resize of the control host to fit the text label is giving the incorrect size. Is there a 'Fit To Control' style method/option?
  • I have noticed that the size of the image in pixels does not match the box size either, if the image is 16x16 this gives a larger box?


Code
Select All
public class ImageBox
    {
        Box box;
        ControlHost chText;
        TextBox text;
        FlowChart chart;

        public ImageBox(FlowChart chart, Image image, PointF pointf)
        {
            this.chart = chart;

            //Create Main Image Box
            box = CreateBox(chart, pointf);
            box.Image = image;
            box.ImageAlign = ImageAlign.Stretch;
            box.Transparent = true;

            //Create Text Box
            text = new TextBox();
            text.Text = "Attach Me Please";
            text.BorderStyle = BorderStyle.None;

            chText = new ControlHost(chart);
            chText.Control = text;
            chText.ShadowOffsetX = 0f;
            chText.ShadowOffsetY = 0f;
            chText.Resize(text.Width, chText.BoundingRect.Height);
            chText.AttachTo(box,  AttachToNode.BottomCenter);


            //chText.MasterGroup.Ex = new RectangleF(box.BoundingRect.X, box.BoundingRect.Y, (float)text.Width, box.BoundingRect.Height);

            //Group grp = chart.CreateGroup(box);
            //grp.AttachProportional(box, 10f, 10f, 50f, 10f);

        }

        private Box CreateBox(FlowChart chart, PointF pointf)
        {
            //Create Box
            Box box = chart.CreateBox(pointf.X, pointf.Y, 8f, 8f);

            //constraints
            box.Constraints.MaxWidth = 8f;
            box.Constraints.MaxHeight = 8f;
            box.Constraints.MinHeight = 8f;
            box.Constraints.MinWidth = 8f;

            //Handle Style
            box.HandlesStyle = HandlesStyle.MoveOnly;

            return box;
        }
    }
 



Any thought would be appreciated

(I am still interested how the NetSample works as well)

Thanks
JC
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Box Image with label under ...
Reply #2 - Mar 28th, 2007 at 5:03am
Print Post  
There are several ways you could accomplish that.

- Create a custom shape definition using the ShapeDesigner tool and define image and text rectangles that do not overlap each other. Assign the ShapeTemplate object to a box, set the box Image and Text, and enable the box.Transparent property.

- Handle the DrawBox event and draw the image and text where you need them using the DrawImage and DrawText methods of the Graphics object passed to the event handler.

- Use the AttachTo method to attach a label box to an icon box. This is the method used in the FCDemo network example. One box displays the image, the other box displays the text, and box have their Transparent property enabled. Lock the label box so that users cannot select it. Handle the BoxClicked event and call BeginInplaceEdit to let users edit the label text.

AttachTo does not move the attached box to a point of the master box. It just saves the distance between the two, and later when the master is moved/resized, the attached box follows it so that the initial offset is preserved.

I hope that help,
Stoyan
  
Back to top
 
IP Logged
 
pelion
Junior Member
**
Offline



Posts: 61
Joined: Nov 12th, 2006
Re: Box Image with label under ...
Reply #3 - Mar 29th, 2007 at 1:13am
Print Post  
Thanks again for your help Stoyo
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint