Can't restyle RadButton in RadToolBar?

[Sam]

Hi there, I want to tweak the padding on RadButtons shown within a RadToolBar.

I can't do this with an implicit style - it just gets ignored completely, although it works fine on RadButtons that are not in a RadToolBar.

I can't use an explicit style on the RadButtons either, because this wipes out the container style from the RadToolBar.

All I want to do is increase the padding on these buttons so that they are consistent with other RadButtons elsewhere in the app. Is there a simple way to do this that doesn't involve extracting and modifying all the control templates for RadToolbar?

Thanks!

Sam

[Tina Stancheva]

Hi Sam,

The RadToolBar control comes with a set of predefined styles for the most commonly used controls in its content. This is why it has a predefined style for the RadButton and you need to change that predefined style in order to implement your customization.

Basically you need to customize the RadToolBar.ItemContainerStyleSelector to set a custom style to the RadButtons:

<Style TargetType="telerik:RadButton" x:Key="CustomButtonStyle">
    <Setter Property="Padding" Value="15" />
</Style>

<Style TargetType="telerik:RadToolBar">
    <Setter Property="ItemContainerStyleSelector">
        <Setter.Value>
            <telerik:ToolBarContainerStyleSelector>
                <telerik:ToolBarContainerStyle TypeName="RadButton" ContainerStyle="{StaticResource CustomButtonStyle}" />
            </telerik:ToolBarContainerStyleSelector>
        </Setter.Value>
    </Setter>
</Style>

I attached a sample project to get you started. Let me know if it helps.

All the best,
Tina Stancheva
the Telerik team

[Sam]

Hi Tina, thanks for the response.

This is very useful to know, but there are a couple of side effects that cause problems here:

- Setting a custom style on the button wipes out the existing container style, so the button appears as it would normally for the current theme which isn't desirable. Ideally I want to inherit the existing container style and just modify the padding, but I can't see how to do that in my XAML, as there is no static resource available to base the custom style on.

- Setting ItemContainerStyleSelector wipes out all the other container styles as well, so anything which isn't explicitly restyled will revert to its default template as well. If you add a RadDropDownButton to the RadToolBar in the example solution, you'll see what I mean. I could redefine all the container styles, but then I would have the same problem for those styles as for the RadButton.

Do you know of any potential workarounds for these issues, other than extracting all the RadToolBar styles and templates (which is a pretty heavy solution)?

Thanks!

Sam

[Viktor Tsvetkov]

Hi,

If you don't like the below mentioned approach you can simply set a local value to the Padding property for each control in the RadToolBar (it's not the best solution but at least it will work for you).

Kind regards,
Viktor Tsvetkov
the Telerik team

[Sam]

Yes, that's what we ended up doing - it's the simplest solution by far.
Thanks for the help.

Sam

[Peter]

Hi Tina,

is it possible to extend the predefined Style for RadButtons in a RadToolbar with the BasedOn property?

if yes, what is the name if the default style? What do I have to write? 

[Petar Mladenov]

Hi Peter,

This is not possible in terms that it may not work in all possible scenarios. The correct way of extending the predefined styles is to use the ItemContainerStyleSelector of the RadToolBar. You can use a predefined ToolbarContainerStyleSelector which defines a custom Style to extend the predefined one:

<telerik:ToolBarContainerStyleSelector x:Key="selector">
         <telerik:ToolBarContainerStyle TypeName="RadButton" ContainerStyle="{StaticResource RadButtonToolTipStyle}" />
     </telerik:ToolBarContainerStyleSelector>

The following RadButtonToolTipStyle contains a list of the predefined properties and a list of your custom setters which extend the predefined style:

<Style x:Key="RadButtonToolTipStyle" TargetType="telerik:RadButton">
           <!-- Predefined properties:-->
           <Setter Property="Margin" Value="1" />
           <Setter Property="Padding" Value="2" />
           <Setter Property="BorderThickness" Value="1" />
           <Setter Property="BorderBrush" Value="Transparent" />
           <Setter Property="Background" Value="Transparent" />
           <Setter Property="HorizontalContentAlignment" Value="Center" />
           <Setter Property="VerticalContentAlignment" Value="Center" />
           <Setter Property="IsBackgroundVisible" Value="False" />

           <!-- Properties you add to achieve customization (randomly chosen for the example's purpose):-->
           <Setter Property="ToolTipService.ToolTip" Value="{Binding Content, RelativeSource={RelativeSource Self}}"/>
           <Setter Property="FontWeight" Value="Bold" />
           <Setter Property="Width" Value="100" />
       </Style>

The predefined setters cal be copied from the Style file of RadToolBar (or Telerik.Windows.Control.Navigation.xaml), the predefined style for RadButton in RadToolBar is named ToolBarRadButton:

<Style x:Key="ToolBarRadButton" TargetType="telerik:RadButton"  BasedOn="{StaticResource RadButtonStyle}">
      <Setter Property="Margin" Value="1" />
      <Setter Property="Padding" Value="2" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush" Value="Transparent" />
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="HorizontalContentAlignment" Value="Center" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="IsBackgroundVisible" Value="False" />
  </Style>

The complete approach of modifying the RadToolBar's predefined styles is demonstrated in this SDK sample which also has a ReadMe file.

Let us know if this helps you move forward.

Regards,
Petar Mladenov
Telerik