How to change the style of a RibbonWindow title

[David]

Hi,

I've looked around the forum for an answer to this one but nothing seems to have worked for me.

The RibbonWindow's default title style causes problems for my users. By default we have black text on a glass background (Windows 7). When the user has a dark wallpaper, they are unable to read the title bar at all. Also, when maximised, the title is a little too high in the bar to match the standard windows title bar.

I'd like to add a semi-transparent white background behind the title bar caption to match Windows 7 and move the text down a couple of pixels when maximised. Is this possible? Ideally I would like to do this without using code behind, only XAML, as this is an M-V-VM solution.

Thanks

[Pavel R. Pavlov]

Hello David,

Our RadRibbonWindow control depends on your chrome theme by default. If you want to change the default look you can set one of the themes that we deliver and support. You can use one of the following approaches. Setting a theme in code behind or using implicit styles. Keep in mind that we highly recommend you to use implicit styles (the second approach).

On the other hand, if you don't want to use any of the Telerik themes on the RibbonWindow, you can edit the default style of the RibbonWindow.TitleStyle to add a whitish background behind the title content or even add a margin to change its position. In your case this snippet might help:

<Style x:Key="WindowTitleStyle" TargetType="Telerik_Windows_Controls_RibbonView_Primitives:WindowTitle">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontSize" Value="11" />
        <Setter Property="IsHitTestVisible" Value="false" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="IsActive" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Telerik_Windows_Controls_RibbonView_Primitives:WindowTitle">
                    <Grid>
                        <StackPanel Orientation="Horizontal">
                            <Border HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Padding="8">
                                <Border.Background>
                                    <RadialGradientBrush>
                                        <GradientStop Offset="0.5" Color="#D8FFFFFF" />
                                        <GradientStop Offset="1" Color="Transparent" />
                                    </RadialGradientBrush>
                                </Border.Background>
                                <TextBlock x:Name="Title"
                                           Margin="1"
                                           VerticalAlignment="Center"
                                           Foreground="{StaticResource RibbonWindow_TitlebarTitleBrush}"
                                           Text="{TemplateBinding Title}" />
                            </Border>
                            <TextBlock x:Name="Divider"
                                       VerticalAlignment="Center"
                                       Foreground="{StaticResource RibbonWindow_TitlebarApplicationNameBrush}"
                                       telerik:LocalizationManager.ResourceKey="RibbonBarWindowTitleDivider"
                                       Text=" - "
                                       Visibility="{TemplateBinding DividerVisibility}" />
                            <Border HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Padding="5">
                                <!--
                                    <Border.Background>
                                    <RadialGradientBrush>
                                    <GradientStop Offset="0.3" Color="#D8FFFFFF" />
                                    <GradientStop Offset="1" Color="Transparent" />
                                    </RadialGradientBrush>
                                    </Border.Background>
                                -->
                                <TextBlock x:Name="ApplicationName"
                                           Margin="1"
                                           Foreground="{StaticResource RibbonWindow_TitlebarApplicationNameBrush}"
                                           Text="{TemplateBinding ApplicationName}" />
                            </Border>
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 
Where the Telerik_Windows_Controls_RibbonView_Primitives is defined like this:

xmlns:Telerik_Windows_Controls_RibbonView_Primitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"

Give one of the approaches a try and let me know if it works for you.

Kind regards,
Pavel R. Pavlov
the Telerik team

[David]

I am actually using the Telerik Windows 7 theme but it doesn't add the whiteish blurry background that I'd expect to see on a standard Windows 7 desktop window (and hence is difficult to read). It also shows the text too close to the top of the title bar when maximised.

[David]

I tried the style changes you said but I didn't see anything change. I'm not sure where I'm going wrong. I added the style and the xmlns to my App.xaml. Do I need to do something else?

[David]

To try to show exactly what the problem is I've attached two images.

The first shows the title bar when maximised. You can see that the text is too high on the bar - the capital S even gets clipped at the top.

The second image shows the title bar when not maximised but against a dark background. The text is very difficult to see.

[David]

Sorry to keep adding to the thread :)

If you look at the first image of the maximised window I'd actually say the positioning problem was more than just the title. The icon a the top left is also too high and too far to the left. Also, the File tab on the ribbon is actually slightly clipped on the left side too. When not maximised you can see the curve of this tab on the left. It seems like a messed up padding or margin somewhere but I can't seem to work out where.

I tried the example I found elsewhere in the forums at http://www.telerik.com/community/forums/wpf/ribbon-bar/radribbonwindow.aspx. If anything, this one is worse when maximised. The colours totally mess up and the icons are clipped at the left. (Image attached)

[David]

One more addition.

I'm starting to suspect that the clipping and positioning problem is a problem with the RibbonWindow, not the RibbonView.

I've noticed that it steals a few pixels everywhere when the window is maximised. To show this, here are another two images, this time of the OutlookBar in my window. The first image is when not maximised. Note the margin around the outlookbar, which I added in my styles. The second image is the same window maximised. The margin is now off-screen I think.

[Pavel R. Pavlov]

Hello David,

You are right that this bug is in the RadRibbonWindow - not in the RadRibbonView control. You can follow and vote for it here. Note that your vote will increase its priority.

Keep in mind that we will discuss this behavior in the near future.

Regards,
Pavel R. Pavlov
the Telerik team

[David]

I appreciate that this is a bug and that you have priorities but bugs should be fixed much more quickly.

I am starting to lose confidence in the Telerik suite from this and several other issues I'm experiencing with the WPF GridView and JustCode. I've had to bin the idea of using the RibbonView because of this problem and the GridView duplication problem (which I've logged as a support ticket) is making me worry about that control too, as it seems it may be related to a problem another user reported over two years ago.

[Tina Stancheva]

Hi David,

I'm sorry to hear about your frustration, I want to assure you that we do our best to make sure the priority of our tasks is in accordance with our customers needs. This is why based on your feedback, we decided to increase the priority of the RibbonWindow title issue. Also, during this release cycle we will focus on the RibbonWindow and its issues so that we can provide an improved version of the control with the Q2 2013 release.

Regards,
Tina Stancheva
the Telerik team