Hide RadRibbonGroup's Icon

[Valentin]

Hello, 

 

In my RadRibbonGroup, I want to hide his icon, but I don't find which property use.

To problem-round bypasses, I set Icon property with a small .png file without background, but the icon in RadRibbonGroup is so ugly... (file "1").

 

 

Have you got any idea ?

 

Thank you.

 

Valentin.

[Martin]

Hello Valentin,

This requirement was discussed in our previous conversation in this forum thread. To achieve the desired result, you can set the Background and the BorderBrush of the <Border x:Name="Image"...> to Transparent and the Width and Height of Image inside to 0 in the ControlTemplate of the RadRibbonGroup. I am attaching a project for VS2013, styled with the VisualStudio2013 theme, since I would assume from your images that you are using that theme. In the project I have extracted the Style for the RadRibbonGroup and I have done modifications to it. The one for the desired visual changes in on lines 228 and 230, marked with a comment.

Regards,
Martin
Telerik

[Valentin]

Hello,

 

I'm working with Visual Studio 2010 and I can't open your project.

I tried this (with your help in yours files) :

<telerik:RadRibbonGroup Header="Navigation" Height="Auto" VerticalAlignment="Top" >
    <Border x:Name="Image" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" Height="10" Margin="3" Width="10">
        <Grid>
            <Image HorizontalAlignment="Center" Source="{TemplateBinding SmallImage}" Stretch="None" VerticalAlignment="Center" Width="0" Height="0"/>
        </Grid>
    </Border>
</telerik:RadRibbonGroup>

But I've got this error :

Unknown build error : 'MC3029 : the 'SmallImage' member is not valid, he hasn't got qualifying type name.'

[Martin]

Hello Valentin,

It is unfortunate the you could not open the attached project. The error you are receiving is due to the missing template binding property. The snipped you have copied is normally in the ControlTemplate of the RadRibbonGroup. I will provide you with a more detailed explanation of the method for achieving the desired result.

As you have seen and are using - some of the more general customization which can be made to the RadRibbonView can be made via inline properties of the whole control (like in the case of ContentHeight). However, for more specific and concrete changes, you need to make modifications to the ControlTemplate in the Style of the control or its components (groups, tabs, etc.). The ControlTemplate for each control holds VisualStates for animations and inner visual elements that are used in the control. One of those elements is the Border with x:Name="Image"  that holds the bound Image for each RadRibbonGroup.

1. You need to fill the desired contents of the RadRibbonView and RadRibbonGroups, buttons etc.

2. In the VS Designer (or Blend for VisualStuido), you need to extract the control template of the RadRibbonGroup. The approach to that is explained in the Editing Control Templates article.

3. Once you have the ControlTemplate for the RadRibbonGroup, you can make modifications to it - in your case change the Background of the Border x:Name="Image" and the Width and Height of the Grid in it.

4. The changes should apply to a specific RadRibbonGroup if you have specified a x:Key to the Style and refer it in the group. Or if you remove the x:Key from the Style, it will apply to all the RadRibbonGroups in you application.

In the previous attached project you can find a style modified in the MainWindow.xaml. I am attaching as well a file with just the Style, that you need to copy entirely and paste in the Window.Resources of your application.

I hope this helps.

Regards,
Martin
Telerik

[Valentin]

Hello Martin,

 

I tried this in MainWindow.xaml :

<telerik:RadWindow.Resources>
        <Style TargetType="{x:Type telerik:RadRibbonGroup}" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:RadRibbonGroup}">
                        <Grid SnapsToDevicePixels="True">
                            <VisualStateManager.VisualStateGroups>
                                <Border x:Name="Image" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" Height="0"
                                    Margin="3" Width="0">
                                    <Grid>
                                        <Image HorizontalAlignment="Center" Source="{TemplateBinding SmallImage}" Stretch="None" VerticalAlignment="Center" Width="0" Height="0"/>
                                    </Grid>
                                </Border>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</telerik:RadWindow.Resources>

But I've got the same error, on : " Source="{TemplateBinding SmallImage}" '...

I'm starting with the templates and I don't understand how I can do to reference of Image.

 

 

Thank you :)

 

Valentin.

[Valentin]

Hi,

 

I tried this too :

<Style TargetType="{x:Type telerik:RadRibbonGroup}" >
            <Setter Property="Icon">
                <Setter.Value>
                    <Image Width="0" Height="0" />
                    <!--<Border x:Name="Image" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" Height="0" Margin="3" Width="0">
                        <Grid>
                            <Image HorizontalAlignment="Center" Stretch="None" VerticalAlignment="Center" Width="0" Height="0"/>
                        </Grid>
                    </Border>-->
                </Setter.Value>
            </Setter>
        </Style>

But it cannot compil 

"L'initialisation de 'Telerik.Windows.Controls.RadRibbonGroup' a levé une exception."

 

[Martin]

Hello Valentin,

Please mind that you need to paste the whole style snippet I have sent you. When you set a ControlTemplate for a control in a Style it overrides the inherent one so you need to paste the whole new Control Template in order to preserve the bindings , the visual states and the functionality. It is a long snippet, but you need it all in your code in order to have everything running and styled correctly. This style is inherited normally for the controls, but if you need to change something in the markup of the component, you need the whole thing and make modifications to the parts where it is needed.

Regards,
Martin
Telerik

[Valentin]

Hello Martin,

 

I'm so sorry, I didn't understood that I should paste the all of your bloc code.

 

So, I've done this, but I've got 2 errors for :

- Primitives:RibbonButtonsPanel

and

- Primitives:GroupChrome

 

This is the same error :

"The type ' Primitives:GroupChrome ' is untraceable. Assure that no reference of assembly is missing and that all the referenced assemblys was generated. "

 

Which is the references for this 2 elements ?

 

Thank you.

[Valentin]

What are the references for this 2 elements ? *

 

Sorry for my english..

[Martin Ivanov]

Hi Valentin,

RadRibbonGroup doesn't support hiding of its icon. The approach suggested by Martin Stratiev includes changes in the ControlTemplate of the RadRibbonGroup control. This customization requires some knowledge on styling and templating in WPF and XAML. This is why I recommend you to take a look at the Styling and Templating MSDN article before proceeding with applying the customization on your side.

Here I am going to try describing the Martin's approach in few steps.

• Extract the Style of the RadRibbonGroup control. You can see how to do that in the Editing Control Templates help article. Extracting the group's Style will also give you the custom style of the RadRibbonDropDownButton placed inside the group's template. Note that the icon of the group is placed inside the button's template.
• In the Template of the RadRibbonDropDownButton find the native Border element with its x:Name set to "Image" and hide it. You can do that by setting the Visibility of the Border to Hidden. Alternatively, instead of the Border itself, you can hide the Image element which is set as a child of the Border.
  

  <Border x:Name="Image" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" Height="10" Margin="3" Width="10" Visibility="Hidden">
      <Grid>
          <Image HorizontalAlignment="Center" Source="{TemplateBinding SmallImage}" Stretch="None" VerticalAlignment="Center" Width="0" Height="0"/>
      </Grid>
  </Border>

• Apply the style. You can do the by defining the RadRibbonGroup Style in the application or the Window's resources without setting its x:Key property. This way the Style will be applied implicitly to all RadRibbonGroup elements in the scope of the Style.
  

  <Window.Resources>
      <Style TargetType="{x:Type telerik:RadRibbonGroup}">
          <!-- The template and other properties -->
      </Style>
  </Window.Resources>

Note that the ribbon group could use some of the elements from its template in code so it might not be very good idea to completely replace the entire template.

I updated Martin's project so now it should be runnable also in VS 2010. Please give it a try and let me know if it works for you. Note that the modified Border is highlighted with a comment in XAML.

As for the Primitives namespace you can find it in the Telerik.Windows.Controls.RibbonView.xaml ResourceDictionary. The xaml namespace points to the Telerik.Windows.Controls.RibbonView.Pritimives namespace inside the RibbonView's dll.

xmlns:Primitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"

Another approach which you can try is to use the ChildrenOfTypeExtensions.ChildrenOfType<T>() extension method to get the Border element that wraps the RadRibbonGroup's programmatically and hide it in code. However, keep in mind this method searches for the child elements recursively in the visual tree which could be slow operation in cases with very deep hierarchy of UI elements.

public MainWindow()
{
    InitializeComponent();
    EventManager.RegisterClassHandler(typeof(RadRibbonDropDownButton), RadRibbonDropDownButton.LoadedEvent, new RoutedEventHandler(OnRibboGroupLoaded));
}

private void OnRibboGroupLoaded(object sender, RoutedEventArgs e)
{
    var collapsedButton = (RadRibbonDropDownButton)sender;
    if (collapsedButton.Name.Equals("CollapsedButton"))
    {
        Dispatcher.BeginInvoke(new Action(() =>
        {
            var imageContainer = collapsedButton.ChildrenOfType<Border>().FirstOrDefault(x => x.Name == "Image");
            imageContainer.Visibility = Visibility.Hidden;
        }));
    }
}

Regards,
Martin
Telerik

[Valentin]

Hi Martin,

I tried a simple code. It allow to by-pass the problem.

<Style TargetType="{x:Type telerik:RadRibbonGroup}">
    <Setter Property="Icon" Value="/SIGT.EVEm.Client;component/Images/Nouvelles_icones/zoom_in_16.png"/>
</Style>

If I put an image without background, there isn't picture above the header of the RibbonGroup. The size of the picture's bloc is 16px/16px.

This is not a perfect code but it is a solution.

 

Thank you very much for you help !

 

Valentin.