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

[Nicholas]

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.

[Dinko | Tech Support Engineer]

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

[Nicholas]

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]

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,