Questions about a custom RadImageButtonElement on a Form's TitleBar?

1 Answer 19 Views
TitleBar
Nicholas
Top achievements
Rank 1
Nicholas asked on 03 Feb 2022, 07:42 PM

I have a RadForm. I added a RadImageButtonElement (CreatingButton.png) to the Title Bar of it because I want to add a Login type of button.

1.) How can I get that button to behave like the Minimize/Maximize buttons in terms of like when I hover over the button, it changes it's appearance the same way like in the attached MinimizeAppearence.png?

I tried to use EnableHighlight, HighlightColor properties, but it didn't seem to work. It had no effect.

2.) Is there a way when I click on the RadImageButtonElement and I signed in already to have something that looks like the way Microsoft Word does it (WordSignIn.png)?

 

Thanks in advance.

1 Answer, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 08 Feb 2022, 01:54 PM

Hi Nicholas,

Thank you for the provided images.

What you can do is force the button to behave like one of the form buttons. You can set the ThemeRole property. Upon looking at the images, you are using the Windows8 theme. In this case, when setting the ThemeRole, the MouseOver effect won't work as expected. That is why you need to add it manually. The sample code below will better show how I was able to add the mouse effect to the RadImageButtonElement.

public RadForm1()
{
    InitializeComponent();
  
    Windows8Theme theme = new Windows8Theme();
    ThemeResolutionService.ApplicationThemeName = "Windows8";
    this.FormElement.TitleBar.Children[2].Children[0].Children.Insert(0, CreateLoginButton());
}

private RadImageButtonElement CreateLoginButton()
{
    RadImageButtonElement signInButton = new RadImageButtonElement()
    {
        ForeColor = Color.Black,
        ThemeRole = "TitleBarMinimizeButton",
        Text = "Login",
        DisplayStyle = Telerik.WinControls.DisplayStyle.Text,
        ShowBorder = true, 
        DoubleClickEnabled = false,
        ClickMode = Telerik.WinControls.ClickMode.Press,
        AutoSize = true,
        Padding = new Padding(3, 5, 3, 5)
    };
    signInButton.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.BackColorProperty,
Color.FromArgb(48, 63, 159), "MouseOver", typeof(Telerik.WinControls.Primitives.FillPrimitive));
    signInButton.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.GradientStyleProperty,
        GradientStyles.Solid, "MouseOver", typeof(Telerik.WinControls.Primitives.FillPrimitive));
    signInButton.Click += SignInButton_Click;
    return signInButton;
}
int count = 0;
private void SignInButton_Click(object sender, EventArgs e)
{
    var button = sender as RadImageButtonElement;
    button.Text = "NB" + count++;
}

Regarding your second question, you can use the Text property for example as shown in the above code snippet. I am changing the Text of the button with a click. In your case, you can change it when the user logs in.

Give my suggestion a try and let me know how it goes.

Regards,
Dinko
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Nicholas
Top achievements
Rank 1
commented on 10 Feb 2022, 01:04 PM

Thanks Dinko, it helps.

Do you know how to get the built-in Help button on the Title Bar to show when I have both maximize/minimize shown too?

I set the Help button's visibility property to ElementVisibility.Visible instead of Collapse. It shows up in the designer on the form, but when launched it doesn't appear.

Nicholas
Top achievements
Rank 1
commented on 10 Feb 2022, 01:15 PM

Never mind. I was able to get the Help button shown. I had to programmatically set it's visibility instead of in the designer.

Thanks,

 
Tags
TitleBar
Asked by
Nicholas
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Share this question
or