Telerik, How to properly add a RadButtonElement in a RadForm TitleBar?

Question

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:

enter image description here

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.

Update:

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.

See [Vista Aero ToolStrip on Non-Client Area](http://www.codeproject.com/Articles/32623/Vista-Aero-ToolStrip-on-Non-Client-Area) in [vb.net](http://www.codeproject.com/Articles/44235/Painting-Vista-s-Aero-NonClientArea-in-VB-NET). — spongebob, Sep 09 '14 at 19:46
See [How to draw custom button in Window Titlebar with Windows Forms?](http://stackoverflow.com/a/107437/3453226). — spongebob, Sep 09 '14 at 19:51
@Joiner Thanks but you understood the root of my question?, is not the solution that I'm looking for, I'm already using an user-control that does not need to hack the Form and mess with the client/non-client areas to add a button. This is Telerik UI. — ElektroStudios, Sep 10 '14 at 13:35

score 2 · Answer 1 · answered Sep 12 '14 at 02:36

2

+1 I see the conundrum.

If you want to have the hovered, pressed and normal states of the button in the titlebar, you need to create three images and apply them on the mouse events i.e. apply the hovered image on MouseEnter, the normal image on MouseLeave and the pressed image on MouseDown.

I see how the button is slightly overlapping the yellow line so you may need to tackle this with the images.

Setting RadButton BackColors like you say will prevent the default hovered, pressed and normal state behaviour.

It looks like you're doing it correctly - one slight change is using the TitleBar.SystemButtons instead of traversing the inherited TitleBar.Children(2).Children(0).Children.

Here is how you can do that:

RadButtonElement btn = new RadButtonElement();
btn.ShowBorder = false;
btn.Image = Resources.NormalState;
this.FormElement.TitleBar.SystemButtons.Children.Insert(0,btn);

ps I dont think mucking around with the 'StyleBuilders' will allow you to achieve the look you're after and btw this has request been suggested to Telerik: http://feedback.telerik.com/Project/154/Feedback/Details/109772-add-helpbutton-at-the-titlebar-of-radform

answered Sep 12 '14 at 02:36

Jeremy Thompson

61,933
36
195
321

Thanks for your help,but then just for be able to add a new Telerik button on the Telerik titlebar of the Telerik form (yes I want to remark the Telerik word 'cause ALL of that was made by telerik so is not normal that if the enduser adds a telerik button in a telerik Form titlebar the appearance of that button is not the same than the others) I need to deep into imagedesign knowledges like photoshop to design 3 images for the button?,really? yes its easy to draw a square and fill it with the same color of the theme but what I mean is Telerik UI is intended to use with developers,not designers – ElektroStudios Sep 12 '14 at 12:32
Also, what happens if that developer that uses Telerik UI for Winforms with a custom button in the titlebar want to add a theme-selector to let the user of that app change the UI theme?... I need to design like +/- 30 different images?, and what happens with the forecolor of the text if I change it also?... more images to design?. I really will hope that I'm just an ignorant of this issue and Telerik provides an official solution like: "set this property to adjust the aspect of the button like the other buttons in the titlebar", 'cause this is not normal. Thanks again for your answer! – ElektroStudios Sep 12 '14 at 12:33
+50 for you and I made another bounty with the hope to find the key to this problem, because I can't accept an alternative like the one that you suggested, the job of designing a lot of images for each case is just not focused to software developers, and is a little bit insane if we are talking about a big amount of images. thanks – ElektroStudios Sep 12 '14 at 12:40
Thanks!! Listen Telerik has great support, I've found raising it with them sorts me out a good amount of the time. – Jeremy Thompson Sep 13 '14 at 03:34
I've sent two emails at telerik support without answer :(. – ElektroStudios Sep 19 '14 at 13:04

score 0 · Accepted Answer · answered Sep 23 '14 at 05:59

Solution suggested by the Admin of Telerik forums:

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

enter image description here

Source: http://www.telerik.com/forums/how-to-properly-add-a-radbuttonelement-in-a-radform-titlebar

Telerik, How to properly add a RadButtonElement in a RadForm TitleBar?

2 Answers2