Inheriting RadButtonElement

[Baris]

Hi,

I have created new class inheriting RadButtonElement and using this class on my Ribbonbar QuickAccessToolBar instead of RadButtonElement. When the mouse pointer comes to over button, background of the image does not change. Whereas, it does when i use RadButtonElement. Is it a bug, or i need to handle some events?

Thanks,

Baris

public class MyRadButtonElement:Telerik.WinControls.UI.RadButtonElement
    {
        private String _blabla;

        public MyRadButtonElement(String blabla)
            : base()
        {
            _blabla = blabla;
        }

        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(Telerik.WinControls.UI.RadButtonElement);
            }
        }

    }

[Richard Slade]

Hello,

If I understand correctly, then I haven't been able to replicate your issue. Please have a go with the following code in a new project.

Form Code

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using Telerik.WinControls;
using Telerik.WinControls.UI;

namespace RadControlsWinFormsApp1
{
    public partial class RadForm2 : Telerik.WinControls.UI.RadForm
    {
        public RadForm2()
        {
            InitializeComponent();

            this.radRibbonBarGroup1.Items.Add(new MyRadButtonElement("Hello"));
        }
    }

    public class MyRadButtonElement : RadButtonElement
    {

        public MyRadButtonElement(String blabla)
            : base()
        {
            base.Text = blabla;
        }

        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(RadButtonElement);
            }
        }

    }
}

Designer Code

namespace RadControlsWinFormsApp1
{
    partial class RadForm1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.radPageView1 = new Telerik.WinControls.UI.RadPageView();
            this.radButton1 = new Telerik.WinControls.UI.RadButton();
            ((System.ComponentModel.ISupportInitialize)(this.radPageView1)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.radButton1)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this)).BeginInit();
            this.SuspendLayout();
            //
            // radPageView1
            //
            this.radPageView1.Location = new System.Drawing.Point(12, 12);
            this.radPageView1.Name = "radPageView1";
            this.radPageView1.Size = new System.Drawing.Size(451, 233);
            this.radPageView1.TabIndex = 0;
            this.radPageView1.Text = "radPageView1";
            ((Telerik.WinControls.UI.RadPageViewStripElement)(this.radPageView1.GetChildAt(0))).StripButtons = Telerik.WinControls.UI.StripViewButtons.None;
            ((Telerik.WinControls.UI.RadPageViewStripElement)(this.radPageView1.GetChildAt(0))).ItemFitMode = Telerik.WinControls.UI.StripViewItemFitMode.Fill;
            //
            // radButton1
            //
            this.radButton1.Location = new System.Drawing.Point(322, 251);
            this.radButton1.Name = "radButton1";
            this.radButton1.Size = new System.Drawing.Size(130, 24);
            this.radButton1.TabIndex = 1;
            this.radButton1.Text = "Copy Page";
            this.radButton1.Click += new System.EventHandler(this.radButton1_Click);
            //
            // RadForm1
            //
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(475, 280);
            this.Controls.Add(this.radButton1);
            this.Controls.Add(this.radPageView1);
            this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.FixedSingle;
            this.MaximizeBox = false;
            this.MinimizeBox = false;
            this.Name = "RadForm1";
            //
            //
            //
            this.RootElement.ApplyShapeToControl = true;
            this.Text = "RadForm1";
            this.ThemeName = "ControlDefault";
            this.Load += new System.EventHandler(this.RadForm1_Load);
            ((System.ComponentModel.ISupportInitialize)(this.radPageView1)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.radButton1)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this)).EndInit();
            this.ResumeLayout(false);

        }

        #endregion

        private Telerik.WinControls.UI.RadPageView radPageView1;
        private Telerik.WinControls.UI.RadButton radButton1;






    }
}

Hope that helps
Richard

[Richard Slade]

Hello,

Did this help? If so please remember to mark as answer
Thanks
Richard

[Baris]

Sorry for replying late.

I have removed the line below and problem resolved.
this.radButtonElement1.Class = "ButtonElement";

Thanks for your reply

[Baris]

Hello,

There is still problem with inheriting RadButtonElement. I have added 2 buttonelements to the ribbon. First one is MyRadButtonElement and second one is RadButtonElement. Both of them are disabled. But they displayed on the form different.

You can see the form here

What may be the problem?

MyRadButtonElement button2 = new MyRadButtonElement("Hello");
button2.Image = global::WindowsFormsApplication3.Properties.Resources._86;
button2.ToolTipText = "MyRadButtonElement";
button2.Text = button2.ToolTipText;
button2.DisplayStyle = Telerik.WinControls.DisplayStyle.ImageAndText;
button2.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText;
button2.Enabled = false;
radRibbonBarGroup1.Items.Add(button2);

RadButtonElement button = new RadButtonElement();
button.Image = global::WindowsFormsApplication3.Properties.Resources._86;
button.ToolTipText = "RadButtonElement";
button.Text = button.ToolTipText;
button.DisplayStyle = Telerik.WinControls.DisplayStyle.ImageAndText;
button.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText;
button.Enabled = false;
radRibbonBarGroup1.Items.Add(button);

 

 

[Baris]

I found that, after executing the line below

radRibbonBarGroup1.Items.Add(button);

ThemeRole property of the button (type RadButtonElement) changes from RadButtonElement to RibbonBarButtonElement. But this property remains same for button2 (type MyRadButtonElement).

Problem may be related with this different behavior. But still i cannot resolve it.

[Boryana]

Hi Baris,

Thank you for writing.

Please note that the RadButtonElement in a RibbonGroup has a different theme than the standard RadButtonElement which is not in a RibbonGroup. Even though it is a RadButtonElement, it has no border and transparent fill. In your scenario, the instance of MyRadButtonElement appears like a standard RadButton - it has a dark blue border and a gradient light blue fill (please see the attached screenshot). 

To customize MyRadButtonElement, so that it appears like a RadButtonElement in RibbonGroup, you will need to make the following two changes:

1. Set the Class properties of the Element, its FillPrimitive and BorderPrimitive, to RibbonBarButtonElement, ButtonInRibbonFill and ButtonInRibbonBorder respectively. In this way the theming mechanism can treat the element like a RadButtonElement in RibbonGroup.
2. Make the ThemeEffectiveType return RadButtonItem instead of RadButtonElement, so that the applied theme styles the RadButtonElement in a RibbonGroup as a RadButtonItem.

Here is how the MyRadButtonElement class should look like:

public class MyRadButtonElement : RadButtonElement
{
    public MyRadButtonElement(String blabla)
        : base()
    {
        base.Text = blabla;
        base.Class = "RibbonBarButtonElement";
        this.ButtonFillElement.Class = "ButtonInRibbonFill";
        this.BorderElement.Class = "ButtonInRibbonBorder";
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(RadButtonItem);
        }
    }

}

I hope you find this helpful. If you encounter further issues do not hesitate to contact me back.

All the best,
Boryana
the Telerik team

[Baris]

Thank you Boryana, your solution worked.