Appearance button in RadToolbar

[New User]

Hi,
    Currently i had a problem about the appearance of button in the RadToolbar. Appearance of default button and the appearance of inherit button (even the inherit button function is empty) is totally look difference in the RadToolbar. Anyone can give me some ideas to make the appearance of inherit button same with the appearance of default button in the RadToolbar?
   Thanks for any help :p

[Ivan]

Hi New User,

Currently the RadToolBar control is using the StyleSelector mechanism to re-style its items. Till now we had prepared specialized styles for following types: RadToolBarSeparator, RadSeparator, TextBlock, TextBox, Button, ToggleButton, CheckBox, RadioButton.

Unfortunately we still not finished the inheritance model - there is no a straightforward way to solve this case. For example in your case we should supply the style for the standard button, but if you create a dropdown button via inheritance of the toggle button then its better not to set the style for the toggle button.

Because of this with the current implementation of the RadToolBar you should set the Style for your buttons explicitly.

We hope this information will help you.

Best wishes,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jaroslav Půbal]

I have same problems with RadSplitButton and RadDropDownButton.
Now these controls look very weird in ToolBar.

Is it possible use these two controls in RadToolBar? Will be possible?

[Ivan]

Hi Jaroslav,

Thank you for contacting us.

We will append customized styles for all Rad-Buttons in the RadToolBar's Style-selector. We hope to implement this one for our next release. However if you are in an emergency case please follow the How to style custom button in RadToolBar article.

If you need further assistance please drop us a line..

Sincerely yours,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Terry Foster]

Does a simpler way to apply standard styles to derived controls exist in the latest release?  If so, please provide an example.

Thanks,
Terry

[Dimitrina]

Hello Terry,

I am not sure if I understand your scenario correctly. Can you please elaborate a bit more on your scenario and what "standard" styles you need to apply.

Thank you in advance.

All the best,
Dimitrina
the Telerik team

[Terry Foster]

By "standard" I mean the styles you guys are applying to particular controls, like Button.  It would be nice to easily apply the same style you use for a Button to a class that I derive from Button, without having to go through the trouble of creating a whole new derived toolbar with a custom style selector.  Ivan, in the post before mine, hinted that there would be an alternate way to achieve this than the example he referenced.  Of course, ideally it would super nice if you guys just automatically applied the same style to any derived control (unless I explicitly specify otherwise), as so many of us seem to intuitively think should happen.

Thanks,
Terry

[Valentin.Stoychev]

Hi Terry Foster,

we don't have such plans.
 
I think the reply from Ivan is missunderstood here. He is saying that we don't have styles for SplitButton and DropDownButton. Those styles are now done and the issue is closed.

All the best,
Valentin.Stoychev
the Telerik team

[Mike Chidsey]

An easier way (and a bit more generic and reusable) is to use a behavior:

public class ToolbarStyleBehavior : Behavior<RadToolBar>
{

    private bool _loaded;

    protected override void OnAttached()
    {
        base.OnAttached();

        this.AssociatedObject.Loaded += handle_Loaded;
    }
    protected override void OnDetaching()
    {
        base.OnDetaching();

        this.AssociatedObject.Loaded -= handle_Loaded;
    }
    private void handle_Loaded(object sender, EventArgs e)
    {
        if (_loaded)
            return;

        this.AssociatedObject.ItemContainerStyleSelector = new ToolbarStyleSelector(AssociatedObject.ItemContainerStyleSelector);
        this.AssociatedObject.OnApplyTemplate();

        _loaded = true;
    }
}

public class ToolbarStyleSelector : StyleSelector
{
    private ToolBarContainerStyleSelector _originalStyleSelector = null;

    public ToolbarStyleSelector(StyleSelector originalStyleSelector)
    {
        this._originalStyleSelector = originalStyleSelector as ToolBarContainerStyleSelector;
    }

    public override Style SelectStyle(object item, DependencyObject container)
    {
        if (_originalStyleSelector != null)
        {
            // We need to exclude Telerik's internal controls that
            //  may also derive from Button or ToggleButton
            string assembly = item.GetType().AssemblyQualifiedName;
            if (!assembly.Contains("Telerik."))
            {
                if (typeof(ToggleButton).IsAssignableFrom(item.GetType()))
                {
                    Style style = this.GetStyle("ToggleButton");
                    return style;
                }
                else if (typeof(Button).IsAssignableFrom(item.GetType()))
                {
                    Style style = this.GetStyle("Button");
                    return style;
                }
            }
            return _originalStyleSelector.SelectStyle(item, container);
        }
        return null;
    }

    internal Style GetStyle(string typeName)
    {
        if (_originalStyleSelector != null)
        {
            foreach (var contentItem in this._originalStyleSelector.ContainerStyles)
            {
                ToolBarContainerStyle containerStyle = contentItem as ToolBarContainerStyle;
                if (containerStyle != null && containerStyle.TypeName == typeName)
                {
                    return containerStyle.ContainerStyle;
                }
            }
        }
        return null;
    }
}

and then in the XAML:

<telerikNavigation:RadToolBar>
    <i:Interaction.Behaviors>
        <my:ToolbarStyleBehavior />
    </i:Interaction.Behaviors>
    <Button Content="Native Button" />
    <my:CustomButton Content="Custom Button" />

</telerikNavigation:RadToolBar>

[Tina Stancheva]

Hello Mike Chidsey,

Thank you for sharing this code. I am sure that the community will find it useful.

Best wishes,
Tina Stancheva
the Telerik team

[IsolatedStorage]

Is Mike's answer (above) still the best way to style buttons in the RadToolbar? I would like to be able to change the appearance of the Toggle button in a toolbar in the same way I can when the Toggle button is placed outside a RadToolbar.

Thank you

[Tina Stancheva]

Hi Alistair Hunt,

No, we already fixed the issue with applying custom styles to the RadToolBar items. Please have a look at the attached sample and let me know if it works for you.

Also, please keep in mind that you need to explicitly set the Style property of the ToggleButton in order to use the custom style, otherwise the default style define in the OfficeBlack ToolBar theme will be applied since its priority is higher. Also, if you want to apply a Telerik theme to the ToolBar, the style for the ToggleButton defined in that theme will also be with higher priority and therefore you won't be able to apply any custom style to the button. However, if you define a Telerik theme as an application theme, you will be able to define a custom style for the RadToolBar items.

i hope this information helps. Let us know if we can further assist you.

Greetings,
Tina Stancheva
the Telerik team