NullReferenceException is thrown on start up of the application, when the IsMinimized property of RadRibbonView is set to True initially. For example, if you set it in XAML.
To work this around, set the IsMinimized property in the Loaded event handler of RadRibbonView.
private void RadRibbonView_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
var ribbonView = (RadRibbonView)sender;
ribbonView.IsMinimized = true;
}
Currently, the RadRibbonTab GetChildrenCore method creates automation peers only for the elements in its Items collection. There is no peer created for the element in the Header. Add support for this.
This missing peer, leads to that the TextBlock in the Header of the ribbon tabs is not highlighted when using a UI inspecting tool (like Snoop and its Automation option or UISpy.exe).
You can find a solution that shows how to achieve this in the attached project.
The RadRibbonWindow titlebar is higher than expected when the Windows 11 theme is used.
A side effect of this is that the content overlaps the titlebar, when the content is not a RadRibbonView.
This reproduces when the Windows11 and Crystal themes are used. To reproduce it, the IsWindowsThemeEnabled property should be set to false in order for the Telerik theme to get applied to the window.
To work this around, you can use the visual tree helper methods in the Loaded event of RadRibbonWindow in order to get the corresponding visuals and change their size and offset.
private void RadRibbonWindow_Loaded(object sender, RoutedEventArgs e)
{
var windowDecoratorPanel = this.ChildrenOfType<Grid>().FirstOrDefault(x => x.Name == "MaximizeWindowDecorator");
var titleBarPanel = windowDecoratorPanel.FindChildByType<Grid>();
titleBarPanel.RowDefinitions[0].Height = new GridLength(30);
var clientArea = windowDecoratorPanel.ChildrenOfType<Border>().FirstOrDefault(x => x.Name == "PART_ClientAreaBorder");
clientArea.Margin = new Thickness(0);
}
The ScreenTip no longer is displayed on mouse over of the owner element. This reproduces only if the element is hovered before the ScreenTips of the previously hovered element is closed. In other words this happens if the two elements that contain ScreenTips are overlapping are very close to one another and there is no space that allows closing the tooltip while moving the mouse.
To work this around, subscribe to the Opened event of the ScreenTip control and set its Visibility to Visible if the element was previously Collapsed.
<Window.Resources>
<Style TargetType="telerik:ScreenTip">
<EventSetter Event="Opened" Handler="ScreenTip_Opened" />
</Style>
</Window.Resources>
private void ScreenTip_Opened(object sender, RoutedEventArgs e)
{
var screenTip = (ScreenTip)sender;
if (screenTip.Visibility == Visibility.Collapsed)
{
screenTip.Visibility = Visibility.Visible;
}
}
For example:
<telerik:RadRibbonView telerik:ScreenTip.Style="{StaticResource MyGlobalScreenTipStyle}" />
or:
<telerik:RadRibbonButton telerik:ScreenTip.Style="{StaticResource MyButtonScreenTipStyle}" />
By default the drop down buttons (like RadRibbonDropDownButton and RadRibbonSplitButton are opening their drop down content on mouse enter, when hosted in ApplicationMenu. When a drop down of a button is opened and you hover another button, the currently opened drop down should get closed. But this doesn't happen when the ApplicationMenu is populated through its ItemsSource and the buttons are defined in the ItemTemplate.
To work this around avoid using ItemsSource and ItemTemplate. Instead add the buttons directly in the Items collection of ApplicationMenu.
The RibbonSplitButton can behave like a toggle button by setting its IsToggle property to True. When the button is hosted in ApplicationMenu its default template is changed with a special one that adjust the UI of the button to the ApplicationMenu design. However, the alternative template is missing the code that updates the UI of the button when the IsChecked property is True.
To work this around, you can edit the ControlTemplate of RadRibbonSplitButton. The template for the button when hosted in ApplicationMenu is using the following x:Key "ApplicationRibbonSplitButtonTemplate". You can apply the edited template through the Template property of RadRibbonSplitButton.
To work this around, you will need to re-template the button when hosted in QuickAccessToolBar.
The width of the popup element that shows the selected tab content when RadRibbonView is minimized is wrong in the following situation. A tab in the minimized ribbon is clicked to display its content, then the tab is clicked again. After that, the width of the ribbon is changed. At this point when you open the minimized content, the popup uses the previous size of the RadRibbonView control.
To work this around, you can manually update the MaxWidth of the popup content element on size changed.
public class CustomRibbonView : RadRibbonView
{
private ContentPresenter popupContent;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
this.popupContent = this.GetTemplateChild("SelectedTabContentPopup") as ContentPresenter;
}
protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
{
base.OnRenderSizeChanged(sizeInfo);
if (popupContent != null)
{
double popupContentPadding = 16;
popupContent.MaxWidth = this.ActualWidth - popupContentPadding;
}
}
}
When the TitleBarVisibility is Collapsed, the backstage close button is aligned with the top of the backstage adorner. The button should have a top margin applied.
This reproduces when the BackstagePosition property of RadRibbonBackstage is set to Office2013, which is the default setting of newer Telerik themes.
To work this around, get the backstage close button and set its top margin.
private void RadRibbonBackstage_Loaded(object sender, RoutedEventArgs e)
{
var backstage = (RadRibbonBackstage)sender;
var closeButton = backstage.FindChildByType<RadRibbonButton>();
closeButton.Margin = new Thickness(closeButton.Margin.Left, 15, closeButton.Margin.Right, closeButton.Margin.Bottom);
}
Using the RadRibbonWindow with the Office2019 theme, the maximize icon is updated when the button is interacted with (it does not change between the maximized and normal states).
To work around this behavior, extract the default ControlTemplate of the RadRibbonWindow element and add an additional Setter with TargetName="maximizeButton" for its Content property, to the Trigger for the WindowState property when its value is set to Maximized. For the Value property of the added Setter, create a new RadGlyph element and set its Glyph property to GlyphWindowCollapse.
The following code snippet showcases this suggestion's implementation:
<Style TargetType="telerik:RadRibbonWindow" BasedOn="{StaticResource RadRibbonWindowStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadRibbonWindow">
<Border x:Name="outerBorder" Background="{TemplateBinding WindowBackground}" CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="MaximizeWindowDecorator">
<Grid telerik:CornerRadiusHelper.ClipRadius="{Binding ElementName=outerBorder, Path=CornerRadius}" telerik:CornerRadiusHelper.ClipRadiusOffset="{TemplateBinding telerik:CornerRadiusHelper.ClipRadiusOffset}" Margin="{TemplateBinding BorderThickness}">
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="1" Background="{telerik:Office2019Resource ResourceKey=HeaderBackgroundBrush}"/>
<Grid Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="IconPanel" Orientation="Horizontal" HorizontalAlignment="Left" Visibility="{TemplateBinding IconVisibility}" VerticalAlignment="Center" Margin="4 0 0 0">
<Image
Name="PART_Icon"
shell:WindowChrome.IsHitTestVisibleInChrome="True"
Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon, Converter={StaticResource IconConverter}}"
Width="{Binding Path=SmallIconSize.Width, Source={x:Static shell:SystemParameters2.Current}}"
Height="{Binding Path=SmallIconSize.Height, Source={x:Static shell:SystemParameters2.Current}}"/>
<Rectangle Width="1" Margin="4 0" Fill="{telerik:Office2019Resource ResourceKey=MainBorderBrush}"/>
</StackPanel>
<telerikRibbonViewPrimitives:WindowTitle x:Name="WindowTitle"
Grid.Column="1"
Title="{TemplateBinding Title}"
Style="{TemplateBinding TitleBarStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="0 0 65 0"/>
</Grid>
<StackPanel x:Name="buttonPanel" Orientation="Horizontal" Grid.ColumnSpan="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0 0 2 0">
<telerik:RadButton x:Name="minimizeButton"
shell:WindowChrome.IsHitTestVisibleInChrome="True"
ToolTipService.ToolTip="Minimize"
Command="{x:Static shell:SystemCommands.MinimizeWindowCommand}"
Style="{StaticResource RibbonWindowButtonStyle}"
CornerRadius="{Binding Path=CornerRadius.TopRight, RelativeSource={RelativeSource TemplatedParent}}">
<telerik:RadButton.ToolTip>
<TextBlock Text="{telerik:LocalizableResource Key=RibbonWindowMinimize}"/>
</telerik:RadButton.ToolTip>
<telerik:RadGlyph Glyph="{StaticResource GlyphMinimize}"/>
</telerik:RadButton>
<telerik:RadToggleButton x:Name="maximizeButton"
shell:WindowChrome.IsHitTestVisibleInChrome="True"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=WindowState, Converter={StaticResource BooleanToWindowStateConverter}, Mode=TwoWay}"
Style="{StaticResource RadRibbonWindowToggleButtonStyle}"
CornerRadius="{Binding Path=CornerRadius.TopRight, RelativeSource={RelativeSource TemplatedParent}}">
<telerik:RadGlyph Glyph="{StaticResource GlyphWindow}"/>
</telerik:RadToggleButton>
<telerik:RadButton x:Name="closeButton"
shell:WindowChrome.IsHitTestVisibleInChrome="True"
Command="{x:Static shell:SystemCommands.CloseWindowCommand}"
Style="{StaticResource RibbonWindowButtonStyle}"
CornerRadius="{Binding Path=CornerRadius.TopRight, RelativeSource={RelativeSource TemplatedParent}}">
<telerik:RadButton.ToolTip>
<TextBlock Text="{telerik:LocalizableResource Key=RibbonWindowClose}"/>
</telerik:RadButton.ToolTip>
<telerik:RadGlyph Glyph="{StaticResource GlyphClose}"/>
</telerik:RadButton>
</StackPanel>
<Border x:Name="PART_ClientAreaBorder" Grid.Column="1" Grid.Row="1" Margin="0 12 0 0" Background="{TemplateBinding Background}"/>
<AdornerDecorator x:Name="Adorner" Grid.Column="1" Grid.RowSpan="2">
<ContentPresenter Canvas.ZIndex="0" Name="PART_RootContentPresenter"/>
</AdornerDecorator>
<ResizeGrip x:Name="WindowResizeGrip"
Grid.Row="1"
Grid.Column="1"
shell:WindowChrome.ResizeGripDirection="BottomRight"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Visibility="Collapsed"
IsTabStop="False"/>
</Grid>
<Border Background="{x:Null}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Window.ResizeMode" Value="CanResizeWithGrip"/>
<Condition Property="Window.WindowState" Value="Normal"/>
</MultiTrigger.Conditions>
<Setter TargetName="WindowResizeGrip" Property="Visibility" Value="Visible"/>
</MultiTrigger>
<Trigger Property="Window.ResizeMode" Value="NoResize">
<Setter TargetName="minimizeButton" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="maximizeButton" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="Window.ResizeMode" Value="CanMinimize">
<Setter TargetName="maximizeButton" Property="IsEnabled" Value="False"/>
</Trigger>
<Trigger Property="WindowState" Value="Maximized">
<Setter TargetName="MaximizeWindowDecorator" Property="Margin" Value="6"/>
<Setter TargetName="maximizeButton" Property="Content">
<Setter.Value>
<telerik:RadGlyph Glyph="{StaticResource GlyphWindowCollapse}"/>
</Setter.Value>
</Setter>
<Setter Property="CornerRadius" Value="0"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="telerik:RadRibbonWindow.IsAutoHideTaskbar" Value="true"/>
<Condition Property="Window.WindowState" Value="Maximized"/>
</MultiTrigger.Conditions>
<Setter TargetName="MaximizeWindowDecorator" Property="Margin" Value="-7 -2 -7 -6"/>
</MultiTrigger>
<Trigger Property="IsTitleVisible" Value="False">
<Setter TargetName="WindowTitle" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>