This is a migrated thread and some comments may be shown as answers.

RadRibbonView : Space between title and controls

7 Answers 68 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
Valentin
Top achievements
Rank 1
Iron
Valentin asked on 19 Apr 2016, 09:03 AM

Hi everybody,

 

I'm using a RadRibbonView. When the window is full screen, i've no problem (file_1).

When the window is more small, the width of RadRibbonView is decreasing, and the RadRibbonTab witdh, too (file_2). The components are grouped in the same menu ("Navigation").

But, the space between the title ("Navigation") and his components is created (file_3), and I can't delete it.

 

My code :

<telerik:RadRibbonView Grid.Row="0" Grid.Column="1" HelpButtonVisibility="Hidden" ApplicationButtonVisibility="Hidden" 
                                        TitleBarVisibility="Collapsed" HorizontalAlignment="Left" TitleBarBackground="{x:Null}" 
                                        IsMinimizable="False" Height="82">

I've tried to change de Height ("Auto" for example"), but it dosen't work.

 

<telerik:RadRibbonTab Header="Graphiques" Height="Auto" VerticalAlignment="Top" >

(The all of RadRibbonTab have the similar code)

<telerik:RadRibbonGroup Header="Navigation" Height="Auto" VerticalAlignment="Top">

(The all of RadRibbonGroupe have the similar code)

7 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 21 Apr 2016, 12:18 PM
Hello Valentin,

The RadRibbonView has a lot of components inside of it, which want to keep their heights. When you simply set Height on the whole RadRibbonView, it only visually clips its contents and so the popup is placed at the place that is was expected originally to appear, resulting in the spacing between it and the ribbon. The way to change the Height of the RadRibbonView is by accessing its property ContentHeight, which sets the height of the items presenter. The tabs at the top are not included in that measure so in your case, if you want to achieve 82px height of the whole ribbon - you should set the ContentHeight to 59, because the TabControl header is 23px in the VisualStudio Theme.

This will however clip the image of the grouped components, because it has a fixed Height. You can change those values in the RadRibbonGroupStyle RadRibbonDropDownButton > Image By extracting and editing a copy of the control template of the RadRibbonGroupStyle. You can consult the styling guidelines of the RadRibbonView for any cases specific to it.

Regards,
Martin
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Valentin
Top achievements
Rank 1
Iron
answered on 21 Apr 2016, 03:39 PM

Hi Martin.

Is that i searched ! It's working fine. Thank You.

 

I've 1 others questions :

I tried to put "Auto" value in ContentHeight, but it doesn't work. I tried this because the icon of RadRibbonGroup is cuted. 

Solutions :

- Hide this icon.

- Decreasing the size of this icon.

But how i can do one of this solutions ?

 

Valentin.

0
Martin
Telerik team
answered on 26 Apr 2016, 09:17 AM
Hi,

To change the size or the visibility of the icon you can modify  the RadRibbonGroup template. You can do that  by extracting the RadRibbonGroup Control Template and  target all the RadRibbonGroups with an implicit style <Style TargetType="{x:Type telerik:RadRibbonGroup}"> (by removing the x:Key of the style you target all the elements from a certain type)In the ControlTemplate you will find a <Border x:Name="Image"...> with width and height set to 32px. You can change either the Border's  size or the visibility of the images.

Regards,
Martin
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Valentin
Top achievements
Rank 1
Iron
answered on 27 Apr 2016, 09:09 AM

Hi,

 

I have an other question about spaces :

- I want to do that the with of the RibbonView (OR) RibbonTab content takes automaticaly the all of width (like picture '2' : For this screen, it's my bolds labels which do this).

I searched a WidthContent property but I don't find it.

Now, is like picture '1'.

 

Thank you very much.

0
Martin
Telerik team
answered on 02 May 2016, 07:34 AM
Hi Valentin,

To stretch the ribbon you could try setting its HorizontalAlignment="Stretch"  and the same for the right column if you are using a Grid to place them. You could set the Grid.Column's Width="Auto" (for the one where the RibbonView is placed). This way the RibbonView should stretch regardless of its contents.

However, keep in mind even if you stretch the ribbonview, the content of its tabs won't be stretched. In order to stretch them you can implement custom RibbonGroupsPanel.

Regards,
Martin
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Valentin
Top achievements
Rank 1
Iron
answered on 02 May 2016, 08:19 AM

Hello Martin,

 

My HorizontalAlignment is set to "Left", not "Stretch". I used grid, and my secondary Grid.Column's width it was set to "Auto". => It's working !

 

Thank you very much.

--

For the RadRibbonGroup's Icon problem, I do not arrive to hide it / OR / decrease his size..

 

Valentin

0
Martin
Telerik team
answered on 04 May 2016, 12:26 PM
Hi Valentin,

I am pleased that it is going well so far. 

As for the icons - I am attaching a ResourceDictionary with the complete ControlTemplate of the RadRibbonGroup that I have extracted through the Visual Studio designer and I have marked with a comment the part of the code that you need to find in your project and change the values there (it is a Border x:Name="Image"). Right now I have set its size to 10 by 10 with margin 3, so that means the inner Grid>Image need to be with dimensions 16. You can change these values or even hide the whole icon.

Regards,
Martin
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
RibbonView and RibbonWindow
Asked by
Valentin
Top achievements
Rank 1
Iron
Answers by
Martin
Telerik team
Valentin
Top achievements
Rank 1
Iron
Share this question
or