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

RadRibbonTab

3 Answers 94 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Shreedhar
Top achievements
Rank 1
Shreedhar asked on 01 Sep 2017, 09:54 AM

Hi,

 

How to add tab separators for the Rad Ribbon Tabs in Ribbon view. I want the separators to appear whenever it exceeds the minimum window size

Could you please help me with this

 

BR,

Shreedhar Bhat

3 Answers, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 05 Sep 2017, 02:20 PM
Hello Shreedhar,

Would you please clarify where you want the aforementioned separators to appear - between the actual RadRibbonTabs or inside the actual content of the selected tab? If you could send over an image or short explanation of the desired end result, that would greatly help me in suggesting a viable solution.

I'm looking forward to your reply.

Regards,
Dilyan Traykov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
0
Shreedhar
Top achievements
Rank 1
answered on 05 Sep 2017, 02:31 PM

Hi Dilyan,

 

I wanted to have the separators between two RadRibbonTabs itself, not between the contents in tabs. My exact requirement would be whenever the window size ( width ) is less than some particular length ( when I try to shrink or minimize the window) , separators should appear between two RadRibbonTabs in the ribbon bar. Hope you could understand what I am trying to do.. I have attached a screenshot , please have a look on it. One image is when the window is of normal size and another one is when the window is minimized. Please let me know if any more information is required

Thanks in Advance,

Shreedhar Bhat

0
Dilyan Traykov
Telerik team
answered on 06 Sep 2017, 11:55 AM
Hello Shreedhar,

Thank you very much for your clarification. Based on it, I prepared a sample project based on the Office2016 Inspired RibbonView demo from our SDK Samples Browser. You can find it attached to my reply.

Here is the code of interest:

<Style TargetType="telerik:RadRibbonTab" BasedOn="{StaticResource RadRibbonTabStyle}">
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="13 4"/>
    <Setter Property="Foreground" Value="{telerik:VisualStudio2013Resource ResourceKey=SelectedBrush}" />
    <Setter Property="Template" Value="{StaticResource RadRibbonTabTemplate}"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:RadRibbonView}, Converter={StaticResource WidthToBorderConverter}}" Value="True">
            <Setter Property="BorderThickness" Value="0 0 1 0" />
            <Setter Property="BorderBrush" Value="White" />
        </DataTrigger>
    </Style.Triggers>
</Style>

public class WidthToBorderConverter : IValueConverter
{
    private const int MinWidthForTabSeparators = 500;
 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return int.Parse(value.ToString()) < MinWidthForTabSeparators;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

You can observe that once you resize the window so that its width is smaller than 500 pixels (you can change this to a value of your choice), the separators are displayed. Please let me know if this is what you had in mind.

Regards,
Dilyan Traykov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
Tags
TabControl
Asked by
Shreedhar
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Shreedhar
Top achievements
Rank 1
Share this question
or