Centering content inside RadRibbonButton

3 posts, 1 answers
  1. John DeGrey
    John DeGrey avatar
    3 posts
    Member since:
    Jul 2009

    Posted 20 Oct 2011 Link to this post

    Hi, can someone tell me how (or maybe it's not possible) to center the content inside the RadRibbonButton? The text and image I set is always left justified for some reason. For each button I add to the tab (or group) I have a large image and text. I would like to center this if possible. HorizontalContentAlignment doesn't seem to do anything.

    RadRibbonButton button = new RadRibbonButton();
    ImageSource imgs = ResourceLoader.GetResourceImage(buttonModel.AssemblyViewFileName, buttonModel.ButtonIconResourceName);
    button.LargeImage = imgs;
    button.Size = Telerik.Windows.Controls.RibbonView.ButtonSize.Large;
    button.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Center;
    button.VerticalContentAlignment = System.Windows.VerticalAlignment.Center;

    <telerikRibbon:RadRibbonGroup Header="Common">
                        <telerikRibbon:RadRibbonButton Text="Home" LargeImage="/Resources/Home32.png" Width="70" Size="Large" HorizontalContentAlignment="Center" />

  2. Sandra Walters
    Sandra Walters avatar
    29 posts
    Member since:
    Dec 2005

    Posted 21 Oct 2011 Link to this post

    I too am fighting this problem, and found a rather ugly workaround:

    <telerik:RadRibbonButton Width="80" HorizontalContentAlignment="Center" Click="Rates_Click" 
        Size="Large" IsAutoSize="false" CollapseToSmall="Never" CollapseToMedium="Never">
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
            <Image Source="images/Rates_large.gif" Stretch="Fill" Width="40" Height="30" />
            <TextBlock Text="Rates" HorizontalAlignment="center" />

    I say this workaround is "ugly" because it has to completely bypass the button's collapse logic that chooses an alternate-size icon based on the size of the button.  The size of the image shown also has to be set manually.

    If there's a cleaner way to do this, I'd love to rip this workaround out and do it the right way.
  3. DevCraft banner
  4. Answer
    Tina Stancheva
    Tina Stancheva avatar
    3298 posts

    Posted 25 Oct 2011 Link to this post

    Hello guys,

    First of all I want to thank you for bringing this issue to our attention. I logged it in our PITS where you can track its progress.

    In the meantime you can edit the default ControlTemplate of the RadRibbonButton control to set the HorizonatalAlignment properly to the Grid hosting the Image and Text elements.

    I attached a sample project to get you started. Please let us know if we can further assist you.

    Kind regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top