How to dynamically scale content in RadRibbonGroup horizontally

[Lars]

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?

[Stenly]

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

[Lars]

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]

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

[Lars]

Thank you for your help, I think this is as good as it gets!

[Stenly]

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.