How to properly add a RadButtonElement in a RadForm TitleBar?

24 posts, 2 answers
  1. Christian
    Christian avatar
    12 posts
    Member since:
    Sep 2014

    Posted 13 Sep 2014 Link to this post

    I'm trying to add a button in the Titlebar, I would like to give it the same aspect than the other buttons but I'm unable to do it, see:

    http://i.stack.imgur.com/cH5Zw.png

    Notice that my new button has a shiner color than the others and also the size protrudes out the yellowed border.

    This is the code that I'm using:
    ----------------------------------------------------------------------------------------------------------
    Imports Telerik.WinControls.UI

    Public Class RadForm_TestForm : Inherits RadForm

    Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Set the RadForm design.
    With Me

    .ThemeName = "VisualStudio2012Dark" ' The visual theme.
    .FormElement.Border.ForeColor = Color.Gold ' Set the borders color.
    .FormElement.Border.Width = 1I ' Set the borders width.
    .FormElement.TitleBar.BorderPrimitive.ForeColor = Color.Red
    .FormElement.TitleBar.ForeColor = Color.LightGray ' Set the TitleBar text color.
    .FormElement.TitleBar.MinimizeButton.Enabled = False

    End With

    ' Create a RadButtonElement.
    Dim SystrayButton As New RadButtonElement()
    With SystrayButton ' Set the RadForm design.

    .Text = "."
    .ShowBorder = False
    .AutoSize = False

    .Size = Me.FormElement.TitleBar.MinimizeButton.Size
    ' .ButtonFillElement.BackColor = Me.FormElement.TitleBar.MinimizeButton.BackColor

    End With

    ' Add the Button in the TitleBar.
    Me.FormElement.TitleBar.Children(2).Children(0).Children.Insert(0, SystrayButton)

    End Sub

    End Class
    ----------------------------------------------------------------------------------------------------------
    Notice that in the code above this line is disabled:

    .ButtonFillElement.BackColor = Me.FormElement.TitleBar.MinimizeButton.BackColor

    Because if I change the color in that way, if I put the mouse over the button it does not change the color when it is focused so it replaces the focused state.












    I'm trying to add a button in the Titlebar, I would like to
    give it the same aspect than the other buttons but I'm unable to do it,
    see:



    Notice that my new button has a shiner color than the others and also the size protrudes out the yellowed border.

    This is the code that I'm using:

    Imports Telerik.WinControls.UI

    Public Class RadForm_TestForm : Inherits RadForm

    Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Set the RadForm design.
    With Me

    .ThemeName = "VisualStudio2012Dark" ' The visual theme.
    .FormElement.Border.ForeColor = Color.Gold ' Set the borders color.
    .FormElement.Border.Width = 1I ' Set the borders width.
    .FormElement.TitleBar.BorderPrimitive.ForeColor = Color.Red
    .FormElement.TitleBar.ForeColor = Color.LightGray ' Set the TitleBar text color.
    .FormElement.TitleBar.MinimizeButton.Enabled = False

    End With

    ' Create a RadButtonElement.
    Dim SystrayButton As New RadButtonElement()
    With SystrayButton ' Set the RadForm design.

    .Text = "."
    .ShowBorder = False
    .AutoSize = False

    .Size = Me.FormElement.TitleBar.MinimizeButton.Size
    ' .ButtonFillElement.BackColor = Me.FormElement.TitleBar.MinimizeButton.BackColor

    End With

    ' Add the Button in the TitleBar.
    Me.FormElement.TitleBar.Children(2).Children(0).Children.Insert(0, SystrayButton)

    End Sub

    End Class

    Notice that in the code above this line is disabled:

    .ButtonFillElement.BackColor = Me.FormElement.TitleBar.MinimizeButton.BackColor

    Because if I change the color in that way, if I put the mouse over the button it does not change the color when it is focused.

    Maybe a solution could be applying the same theme of my RadForm on the RadButtonElement?

    I've read this: http://www.telerik.com/forums/apply-theme-to-radbuttonelement

    ...but I really don't understand how to do it, I don't have any 'DefaultStyleBuilder' and I can't find info in telerik about what means that.


    PS: Here you can read this question in other webpage: http://stackoverflow.com/questions/25635610/telerik-how-to-properly-add-a-radbuttonelement-in-a-radform-titlebar/25799876?noredirect=1#comment40391390_25799876

    I need help to solve this... thanks.
  2. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 17 Sep 2014 Link to this post

    Hello Christian,

    Thank you for writing.

    FormElement.TitleBar.SystemButtons collection contains RadImageButtonElements. In order to add a new system button to the title bar, you should create a RadImageButtonElement. Additionally, to obtain the same design as the Minimize button, you should set the RadImageButtonElement.ThemeRole property to "TitleBarMinimizeButton". Afterwards, change the DisplayStyle property to Text. Here is a sample code snippet:
    Sub New()
        InitializeComponent()
     
        With Me
            .ThemeName = "VisualStudio2012Dark" ' The visual theme.
            .FormElement.Border.ForeColor = Color.Gold ' Set the borders color.
            .FormElement.Border.Width = 1I ' Set the borders width.
            .FormElement.TitleBar.BorderPrimitive.ForeColor = Color.Red
            .FormElement.TitleBar.ForeColor = Color.LightGray ' Set the TitleBar text color.
            .FormElement.TitleBar.MinimizeButton.Enabled = False
        End With
     
        ' Create a RadButtonElement.
        Dim systrayButton As New RadImageButtonElement()
        With systrayButton ' Set the RadForm design.
            .ThemeRole = "TitleBarMinimizeButton"
            .Text = "."
            .DisplayStyle = Telerik.WinControls.DisplayStyle.Text
            .ShowBorder = False
            .AutoSize = False
            .Size = Me.FormElement.TitleBar.MinimizeButton.Size
        End With
        AddHandler systrayButton.Click, AddressOf systrayButton_Click
        ' Add the Button in the TitleBar.
        Me.FormElement.TitleBar.SystemButtons.Children.Insert(0, systrayButton)
    End Sub
     
    Private Sub systrayButton_Click(sender As Object, e As EventArgs)
        Me.Size = New Size(600, 600)
    End Sub

    I hope this information helps. Should you have further questions, I would be glad to help.

    Regards,
    Desislava
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. Christian
    Christian avatar
    12 posts
    Member since:
    Sep 2014

    Posted 22 Sep 2014 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    @Desislava

    Simply amazing, thankyou!

    I have 2 offtopic questions if you could help me to understand:
    1) After writting my post I noted that I've duplicated some of the code (by error), there is any button to edit my post, right?
    2) I didn't see any help to insert a code properly like you did, there is any post in the forum explaining the tags to use them?

    Thanks for your time.
  4. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 25 Sep 2014 Link to this post

    Hello Christian,

    Thank you for writing back.

    I am glad that the provided solution suits your requirement.

    As to the question related to editing a certain forum post, currently you are not allowed to modify it. The possible solution is to specify the exact modification that you want to perform in a thread post to our support officers and they will update it for you. We have a feature request for adding such functionality to the forums.

    In order to insert formatted code, you should use the "Format Code Block" option. Please refer to the attached screenshot.

    I hope this information helps. If you have any additional questions, please let me know.
     
    Regards,
    Desislava
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. perico
    perico avatar
    28 posts
    Member since:
    Dec 2006

    Posted 13 Dec 2016 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess,

    I used the above code but i don't have hover effect on my created button.

    How can i set up this ?

    Thank you

  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 14 Dec 2016 Link to this post

    Hello Perico, 

    Thank you for writing back. 

    I have attached a sample project for your convenience which result is illustrated in the attached gif file.

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Stefano
    Stefano avatar
    11 posts
    Member since:
    Feb 2012

    Posted 15 Feb 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Is there a way to have the RadButtonElement aligned on the left of the titlebar?

    By default it seems they appear on the right, near the minimize button.

  8. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 19 Feb 2018 Link to this post

    Hello, Stefano, 

    Thank you for writing.  

    In the previously attached sample project the RadImageButtonElement is inserted in the SystemButtons collection of the title bar which is right aligned. I suppose that you are trying to align it to the left before the text and icon. Here is a sample code snippet demonstrating how to achieve it:



    this.FormElement.TitleBar.Children.Last().Children.Insert(0, systrayButton);

    If it is not the case please specify in details what is the exact goal that you are trying to achieve. Thus, we would be able to think about a suitable solution and assist you further. Thank you in advance. 

    I hope this information helps. Should you have further questions I would be glad to help. 
     
     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Stefano
    Stefano avatar
    11 posts
    Member since:
    Feb 2012

    Posted 26 Feb 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    thanks Dess, that is exactly what I was looking for

    just for info: I've been looking through the RadForm docs but I couldn't find information about this (how the TitleBar object works). is there any docs I'm missing which I should use before posting in forums?

  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 27 Feb 2018 Link to this post

    Hello, Stefano,  

    Thank you for writing back. 

    In the elements structure of RadForm you can get familiar with the inner elements and thus insert the desired element at a certain position: https://docs.telerik.com/devtools/winforms/forms-and-dialogs/form/structure

    As to the title bar itself, you can refer to the following section in the online documentation: https://docs.telerik.com/devtools/winforms/forms-and-dialogs/radtitlebar/radtitlebar

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. QuizzBox
    QuizzBox avatar
    93 posts
    Member since:
    Jan 2011

    Posted 04 Apr 2018 Link to this post

    I've tried the code with a sample project, if you replace the code in the click event by :

    Msgbox("test")

    the event is fired 2 times each time i click, so i see 2 msgbox.

     

    Hum, is there a way to have the hover behavior of mniimize button when mouse is on image, and how i can change the cursor when image hovered ?

    Thanks :)

  12. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 05 Apr 2018 Link to this post

    Hello, Jean-Marc,   
     
    The Click event is fired twice for the RadImageButtonElement because two messages are processed. The first one is coming when handling the left mouse button up message, the second one is when handling the mouse leave message. If you simply just click the button and don't move the mouse, you will notice that only one message box will be shown. The same behavior  will be observed for the system buttons as well. You can use a flag and detect whether the message box is already shown and don't show it twice: 
    bool isClosed = true;
     
    private void systrayButton_Click(object sender, EventArgs e)
    {
        if (isClosed)
        {
            RadMessageBox.Instance.FormClosing -= Instance_FormClosing;
            RadMessageBox.Instance.FormClosing += Instance_FormClosing;
            RadMessageBox.Instance.Shown -= Instance_Shown;
            RadMessageBox.Instance.Shown += Instance_Shown;
            RadMessageBox.Show("Click");
        }
    }
     
    private void Instance_Shown(object sender, EventArgs e)
    {
        isClosed = false;
    }
     
    private void Instance_FormClosing(object sender, FormClosingEventArgs e)
    {
        isClosed = true;
    }

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Ahmed
    Ahmed avatar
    11 posts
    Member since:
    Apr 2018

    Posted 15 May 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    I have downloaded the source code but still don't have any idea about how you made the hover effect

    C#

  14. Ahmed
    Ahmed avatar
    11 posts
    Member since:
    Apr 2018

    Posted 15 May 2018 Link to this post

    I am using material Theme
  15. Hristo
    Admin
    Hristo avatar
    1520 posts

    Posted 16 May 2018 Link to this post

    Hello Ahmed,

    I am not sure what is the nature of the issue you are experiencing and how it can be reproduced. Can you please provide us with more details about your actual local set up? If it is not directly related to the discussed topic here please open a new forum thread or send us a support ticket

    Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  16. Ahmed
    Ahmed avatar
    11 posts
    Member since:
    Apr 2018

    Posted 17 May 2018 in reply to Hristo Link to this post

    I achieve the hiver effect when I add a new button to the title bar of the Rad Form using material theme in c#
  17. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 21 May 2018 Link to this post

    Hello, Ahmed,     

    I am glad that you have achieved the desired requirement with the Material theme.

    If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  18. Ahmed
    Ahmed avatar
    11 posts
    Member since:
    Apr 2018

    Posted 21 May 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    I am sorry... but,

    I *Can't achieve the hover effect when I add a new button to the title bar of the Rad Form using material theme in c#

  19. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 22 May 2018 Link to this post

    Hello, Ahmed,    

    I am sorry for the misunderstanding, but according to your previous replied it seemed that you achieved the desired look.

    Telerik Presentation Framework allows you to customize the style of RadElements for certain element states. The following help article demonstrates additional information on this topic: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/override-theme-settings-at-run-time

    Here is the modified code snippet which result is illustrated in the attached gif file:  
    RadImageButtonElement systrayButton = new RadImageButtonElement();
    systrayButton.ThemeRole = "TitleBarMinimizeButton";
    systrayButton.Text = ".";
    systrayButton.DisplayStyle = Telerik.WinControls.DisplayStyle.Text;
    systrayButton.ShowBorder = false;
    systrayButton.AutoSize = false;
    systrayButton.Size = this.FormElement.TitleBar.MinimizeButton.Size;
    systrayButton.Click += systrayButton_Click;
     
    systrayButton.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.BackColorProperty,
        Color.FromArgb(48, 63, 159), "MouseOver", typeof(Telerik.WinControls.Primitives.FillPrimitive));
    systrayButton.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.GradientStyleProperty,
        GradientStyles.Solid, "MouseOver", typeof(Telerik.WinControls.Primitives.FillPrimitive));
     
    this.FormElement.TitleBar.Children.Last().Children.Insert(0, systrayButton);

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  20. jiang
    jiang avatar
    14 posts
    Member since:
    Apr 2019

    Posted 08 May 2019 in reply to Ahmed Link to this post

    Hi, Ahmed

    If you don't add a theme, does the custom button have a hover effect, like the native button?

  21. jiang
    jiang avatar
    14 posts
    Member since:
    Apr 2019

    Posted 08 May 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hello, Dess and Hristo

    I don't add theme and the custom button adds an icon to the image property(Telerik UI for WinForm), no hover effect like the navive button.

    So, what should I do?

     

  22. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 09 May 2019 Link to this post

    Hello, Jiang,     

    When you don't apply the Material theme to the entire application and use the ControlDefault theme, indeed, the custom image button doesn't have hover effect. Both themes have different style applied to the system buttons in the title-bar. The ControlDefault theme uses different images, not colors for the element states. That is why you are not obtaining the desired hove indication.

    The possible solution that I can suggest for the ControlDefault theme is to use a RadButtonElement instead of RadImageButtonElement. Please refer to the code snippet below: 

    RadButtonElement systrayButton = new RadButtonElement(); 
    systrayButton.Image = Properties.Resources.info;
    systrayButton.DisplayStyle = Telerik.WinControls.DisplayStyle.Image;
    systrayButton.AutoSize = false;
    systrayButton.Size = this.FormElement.TitleBar.MinimizeButton.Size;
    systrayButton.Click += systrayButton_Click;
     
    systrayButton.SetThemeValueOverride(Telerik.WinControls.Primitives.BorderPrimitive.ForeColorProperty,
        Color.Transparent, "", typeof(Telerik.WinControls.Primitives.BorderPrimitive));
    systrayButton.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.BackColorProperty,
        Color.Transparent, "", typeof(Telerik.WinControls.Primitives.FillPrimitive));
    systrayButton.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.GradientStyleProperty,
        GradientStyles.Solid, "", typeof(Telerik.WinControls.Primitives.FillPrimitive));
     
    this.FormElement.TitleBar.Children.Last().Children.Insert(0, systrayButton);

    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.
  23. jiang
    jiang avatar
    14 posts
    Member since:
    Apr 2019

    Posted 09 May 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hello, Dess

    Thank you for your reply, but highlighting is inconsistent with the native button.

    You mean if I want to do the same thing, I can hover between different images in mousehover  and mouseleave, or  what should I do?

  24. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3988 posts

    Posted 13 May 2019 Link to this post

    Hello, Jiang,     

    Indeed, the style is different because actually a RadButtonElement is used instead of RadImageButtonElement. I would like to note that the different themes in the Telerik UI for WinForms suite manage different style settings of the button elements in the title bar. For example, in the ControlDefault theme a different image is defined for each specific element state of the system button. But in the Material theme different fill colors are used.

    There is no unified approach for achieving the same result with all different themes because of the specificity of the theme implementation.  

    I would recommend you to export the built-in themes in Visual Style Builder (File >> Export Built-in Themes) and load the ControlDefault theme (File >> Open Package >> Select ControlDefault.tssp). Thus, you can expand RadTitleBar and have a look at the applied style of the system buttons. You can use the SetThemeValueOverride method as it was demonstrated in my previous reply and specify different image to be used when you hover the button or select it, etc. You will notice how many element states needs to be specified in the ControlDefault theme providing different images with the appropriate fill. 

    Should you have further questions please let me know.

    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