How to dynamically scale content in RadRibbonGroup horizontally

1 Answer 31 Views
RibbonView and RibbonWindow
Lars
Top achievements
Rank 1
Lars asked on 07 Jan 2022, 05:42 PM

Hello, I have a RadRibbonGroup with content that I want to fill all available space in the group.

The content is intended to be more advanced, but in its most simple form it can be demonstrated with a textbox like this:

<telerik:RadRibbonGroup Header="My group" Width="200" Height="100">
    <TextBox av:Text="Some text"/>
</telerik:RadRibbonGroup>

The size of the RadRibbonGroup is set dynamically but in the example is locked to a static size. In this case I want the content of the group (the textbox) to stretch in all directions. Vertically this works works as expected and the textbox is stretched by default and can be set to top, bottom, etc. with the VerticalAlignment property. However, everything i do horizontally seems to be ignored.

The attached image demonstrates how the code above looks and what I want it to do. How do I make this work?

1 Answer, 1 is accepted

Sort by
1
Accepted
Stenly
Telerik team
answered on 12 Jan 2022, 04:02 PM

Hello Lars,

In order to achieve the wanted result, you could bind the Width property of the element (for example the TextBox) to the ActualWidth property of the ContentPresenter, which is present inside the RadRibbonGroup. This could be done by utilizing the RelativeSource property of the Binding class. 

The following code snippet shows the provided code sample, modified to follow this approach:

<telerik:RadRibbonGroup Name="ribbonGroup" Header="My group" Width="200" Height="100">
    <TextBox Text="Some Text" Width="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter}, Path=ActualWidth}"/>
</telerik:RadRibbonGroup>

The produced result is as follows:

With that said, I have attached a sample project, that has this approach implemented, with a bit more complex RadRibbonGroup content. Could you give it a try and let me know how it goes?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Lars
Top achievements
Rank 1
commented on 14 Jan 2022, 09:05 AM

This got me almost all the way, thank you!

As you said, this correctly makes the content fill the width of the RadRibbonGroup.
However, when I tried to implement it in the actual code-base another issue came to light.

I want the content to have a MinWidth. Above the MinWidth I want it to stretch for all the space it has. Below the MinWidth I want a scrollbar so that its more clear if things get "hidden" due to the small size.

When I add a ScrollViewer to the mix, the content correctly grows larger when given more space, but it can no longer adapt to a smaller size. As soon as the area gets smaller the scrollbar appears, even if the MinWidth is not reached.

If I remove the RadRibbonGroup I get the behaviour I want when it comes to the dynamic width.

I modified your example project and attached an updated MainWindow.xaml which describes and demonstrates what I'm looking for.

Stenly
Telerik team
commented on 19 Jan 2022, 08:05 AM

Hello Lars,

I have added the provided code snippet into the sample project from my previous reply and the specified behavior was also present on my end. What comes to my mind, in order for you to achieve the wanted result, would be to bind the Width property of the RadRibbonGroup instance, to the ActualWidth property of the ScrollContentPresenter element. After that, set a MinWidth onto the RadRibbonGroup, for example, 250, and when the GridSplitter resizes lower than the set value, a scrollbar will appear and the Content of the RadRibbonGroup can be scrolled. 

The following code snippet shows the provided sample code, modified to include this logic:

<ScrollViewer 
              Grid.Column="0"
              VerticalScrollBarVisibility="Auto"
              HorizontalScrollBarVisibility="Auto"
              HorizontalAlignment="Stretch">
    <telerik:RadRibbonGroup Name="ribbonGroup1" Header="My group" Width="{Binding RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}, Path=ActualWidth}" MinWidth="250">
        <Grid Width="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter}, Path=ActualWidth}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="50"/>
                <ColumnDefinition MinWidth="100"/>
            </Grid.ColumnDefinitions>
...

The result is as follows:

I have attached the modified sample project for you to test, so, could you give it a try?

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lars
Top achievements
Rank 1
commented on 19 Jan 2022, 09:19 AM

Thank you for your help, I think this is as good as it gets!
Stenly
Telerik team
commented on 19 Jan 2022, 02:10 PM

I am happy to hear that the proposed approach is a suitable solution to this matter. With that said, let me know if you need any further help regarding this.
Tags
RibbonView and RibbonWindow
Asked by
Lars
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or