Adding TextPrimitives to an existing control?

7 posts, 0 answers
  1. Jorge Delgado-Lopez
    Jorge Delgado-Lopez avatar
    82 posts
    Member since:
    Aug 2007

    Posted 10 Jul 2008 Link to this post

    Hi,

    Is it possible to create a CheckBox that looks like:

    Title
     ⃞ Description

    There is one TextPrimitive in the ImageAndTextLayoutPanel. Is it possible at all to add another one dynamically? 

    I am just trying to learn your framework to make my own controls.

    - jorge
  2. Boyko Markov
    Admin
    Boyko Markov avatar
    610 posts

    Posted 14 Jul 2008 Link to this post

    Hello Jorge Delgado-Lopez,

    It should be an easy task to have a checkbox like the one you showed in your previous post.
    Here is the code that revamps the standard checkbox to the one you've requested:
     TextPrimitive txt = new TextPrimitive(); 
     txt.Text = "Title"
     
     RadCheckBoxElement element = this.radCheckBox1.RootElement.Children[0] as RadCheckBoxElement; 
     this.radCheckBox1.RootElement.Children.Clear(); 
     BoxLayout layout = new BoxLayout(); 
     layout.Orientation = Orientation.Vertical; 
     this.radCheckBox1.RootElement.Children.Add(layout); 
     layout.Children.Add(txt); 
     layout.Children.Add(element); 

    I hope this helps. If you have further questions please feel free to ask me.

    Kind regards,
    Boyko Markov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Jorge Delgado-Lopez
    Jorge Delgado-Lopez avatar
    82 posts
    Member since:
    Aug 2007

    Posted 14 Jul 2008 Link to this post

    Ahh.. easy. 

    I am inheriting from RadCheckBox, what should I override and add this code to?

    1. I overrode CreateChildItems, is this the right place to do it?

            protected override void CreateChildItems(RadElement parent)
            {
                base.CreateChildItems(parent);

                TextPrimitive txt = new TextPrimitive();
                txt.Text = this.Title;
    ...

    2. Also, I need to style it but I don't know how to write the XML for it (visual style builder won't show it), i have created my own style for my control

          <StylesheetRelations>
            <RadStylesheetRelation ControlType="revival.ui.checkbox.LabelCheckBox" ElementType="Telerik.WinControls.RootRadElement" RegistrationType="ElementTypeControlType" ElementName="" ControlName="" />
            <RadStylesheetRelation ControlType="" ElementType="Telerik.WinControls.UI.RadCheckBoxElement" RegistrationType="ElementTypeDefault" ElementName="" ControlName="" />
          </StylesheetRelations>

    -j
  4. Boyko Markov
    Admin
    Boyko Markov avatar
    610 posts

    Posted 18 Jul 2008 Link to this post

    Hi, Jorge

    Sorry for the late answer.  This is ok to override the CreateChildItems method. In that method we are building our elements hierarchy so this is exactly the place, where you should add the new child elements. You can also set the Class string property to the elements you add, and you will be able to design the element with this specific style in the Visual Style Builder. My suggestion for creating styles is to use the Visual Style Builder. To see the control in the Visual Style Builder you will have to create a special class inheriting the RadControlDesignTimeData. Example of such class is the following:

      /// <exclude/> 
        /// <summary>Represents a helper class for the Visual Style Builder.</summary> 
        public class RadCheckBoxStyleBuilderData : RadControlDesignTimeData 
        { 
            public RadCheckBoxStyleBuilderData() 
            { } 
     
            public RadCheckBoxStyleBuilderData(string name) 
                : base(name) 
            { } 
     
            public override ThemeDesignedControlList GetThemeDesignedControls(System.Windows.Forms.Control previewSurface) 
            { 
                RadCheckBox button = new RadCheckBox(); 
     
                button.Size = new Size(80, 20); 
                button.AutoSize = true
                button.IsChecked = true
     
                button.Text = "RadCheckBox"
     
                RadCheckBox buttonStructure = new RadCheckBox(); 
                button.AutoSize = true
     
                buttonStructure.Text = "RadCheckBox"
     
                ThemeDesignedControl designed = new ThemeDesignedControl(button, buttonStructure.RootElement); 
                designed.MainElementClassName = typeof(RadCheckBoxElement).FullName; 
                ThemeDesignedControlList res = new ThemeDesignedControlList(); 
     
                res.Add(designed); 
     
                return res; 
            } 
        } 

    To see your control in the Visual Style Builder you will have to apply this class as an attribute to your control similar to the following:

        [RadThemeDesignerData(typeof(RadCheckBoxStyleBuilderData))]
        [ToolboxItem(true)]
        [Description("Enables the user to select or clear the associated option")]
        public class RadCheckBox : RadToggleButton


    I hope this helps. Please write me back if you need more instructions.


    Best wishes,
    Boyko Markov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Jorge Delgado-Lopez
    Jorge Delgado-Lopez avatar
    82 posts
    Member since:
    Aug 2007

    Posted 18 Jul 2008 Link to this post

    Easy enough.. thanks! -j
  6. Sivakumar
    Sivakumar avatar
    1 posts
    Member since:
    Oct 2010

    Posted 06 May Link to this post

    I want to add the new text primitive below the RadCheckBoxElement? It always renders the textprimitive as the first element. Can please help me?
  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3320 posts

    Posted 06 May Link to this post

    Hello, Sivakumar,     

    Please refer to the following code snippet demonstrating how to add and arrange a TextPrimitive to below the check mark and default text in RadCheckBox:



    public RadForm1()
    {
        InitializeComponent();
        new RadControlSpyForm().Show();
     
        this.radCheckBox1.AutoSize = false;
        this.radCheckBox1.Size = new Size(150, 50);
    }
     
    public class CustomCheckBox : RadCheckBox
    {
        public override string ThemeClassName 
        {
            get
            {
                return typeof(RadCheckBox).FullName; 
            }
        }
     
        protected override RadButtonElement CreateButtonElement()
        {
            return new CustomRadCheckBoxElement();
        }
    }
     
    public class CustomRadCheckBoxElement : RadCheckBoxElement
    {
        TextPrimitive bottomTextPrimitive = new TextPrimitive();
     
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.bottomTextPrimitive.Text = "Bottom text";
            this.bottomTextPrimitive.AutoSize = false;
            this.bottomTextPrimitive.Size = new Size(150, 20);   
             
            this.Children.Add(bottomTextPrimitive);
        }
     
        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            SizeF result = base.ArrangeOverride(finalSize);
            bottomTextPrimitive.Arrange(new RectangleF(new PointF(0,finalSize.Height - bottomTextPrimitive.DesiredSize.Height), bottomTextPrimitive.DesiredSize));
            return result;
        }
     
        protected override Type ThemeEffectiveType    
        {
            get   
            {
                return typeof(RadCheckBoxElement);    
            }
        }
    }

    I hope this information helps.

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top