Can't restyle RadButton in RadToolBar?

7 posts, 1 answers
  1. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 01 Mar 2012 Link to this post

    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
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 06 Mar 2012 Link to this post

    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
  5. Answer
    Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 09 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 11 Mar 2012 Link to this post

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

    Sam
  7. Peter
    Peter avatar
    37 posts
    Member since:
    Dec 2011

    Posted 26 Feb 2014 Link to this post

    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? 
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Feb 2014 Link to this post

    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
Back to Top
DevCraft banner