RadRibbonView hide titlebar issue

[Martin]

Hi, I'm using a RadRibbonWindow and RadRibbonView, I want to hide the title bar to save room so I set TitleBarVisibility="Collapsed", but this hides the windows close/maximise/minimise buttons, so I thought I would just make my own ones (see xaml below), but this doesn't work because the click event doesn't work on the buttons, also when the windowstate is normal you can see the top of the original close/maximise buttons and it doesn't look good.

Is there any good solution for hiding the title bar but maintaining the button?

<telerik:RadRibbonWindow x:Class="TelerikTest.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                Title="MainWindow" Name="dlgMain" Height="350" Width="525" >
    <Grid>
        <!-- Custom close/maximise/minimise buttons -->
        <Grid Panel.ZIndex="1" Margin="180,0,26,0" Height="24" HorizontalAlignment="Stretch"  VerticalAlignment="Top"  >
            <Button Name="btnClose" HorizontalAlignment="Right" Width="22" Content="❌" ToolTip="Close" Click="btnClose_Click" />
            <Button Name="btnMaximise" HorizontalAlignment="Right" Width="22" Content="▭" Margin="0,0,24,0" ToolTip="Toggle maximise" Click="btnMaximise_Click"/>
            <Button Name="btnMinimise" HorizontalAlignment="Right" Width="22" Content="‗‗" Margin="0,0,48,0" ToolTip="Minimise" Click="btnMinimise_Click"/>
        </Grid>

        <telerik:RadRibbonView Name="xRadRibbonBar"  Title="Test" ApplicationName="" IsBackstageOpen="False" SelectedIndex="0"
                               ApplicationButtonVisibility="Visible" TitleBarVisibility="Collapsed"  ContentHeight="72"
                             MinimizeButtonVisibility="Visible" >

            <telerik:RadRibbonView.ApplicationButtonContent>
                <TextBlock Text="File" />
            </telerik:RadRibbonView.ApplicationButtonContent>

            <telerik:RadRibbonTab Header="Home" >
                <telerik:RadRibbonGroup Header="Group" >
                    <telerik:RadRibbonButton Size="Large" Text="Item" >
                    </telerik:RadRibbonButton>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
        </telerik:RadRibbonView>

    </Grid>
</telerik:RadRibbonWindow>

[Boris]

Hello Martin,

By default when you add a RadRibbonView in a RadRibbonWindow, the components are integrated together to create a seamless UI experience. For that purpose the QuickAccessToolbar as well as the ApplicationName and the Title of the RadRibbonView are displayed in the title tray of the RadRibbonWindow. In this case the value of the RadRibbonWindow Title is ignored. However you need to use the default value of the TitleBarVisibility property of the RadRibbonView which is Visible (you have set it to Collapsed in your code snippet).

If you apply the described approach above and the close / minimize / maximize buttons still disappear  could you please make sure that the parent element of the RadRibbonView (for e.g. Grid) doesn't have a Background or a Margin property set. Also, if you set the Margin property of the RadRibbonView the RadRibbonWindow's title will stop appearing.

For more information about this you can check the article for RadRibbonWindow.

However, if this is not what you are after could you please send us a picture that illustrates from where exactly you want to save some space.

Please let me know if this helps.

Regards,
Boris Penev
Telerik

 

[Martin]

Hi, I've added 2 pics to demonstrate what I'm trying to do:

Capture1.png shows a typical RadRibbonView + RadRibbonWindow.

Capture2.png shows what I'm trying to do (e.g. hide the titlebar). However it doesn't work well because
a) You can still see the top of the standard windows buttons behind and
b) The custom minimise/maximise/close buttons I've added don't work because seemingly the mouse events aren't captured properly when the buttons are in that location.

[Boris]

Hello Martin,

The design from your picture can be achieved by editing the Template of the RadRibbonWindow. In order to remove the standard buttons for Minimize / Maximize / Close you could comment-out or delete them with their corresponding Triggers from the Template of the RadRibbonWindow. The buttons are placed in a StackPanel with x:Name="buttonPanel" and their corresponding Triggers in the ControlTemplate. 
Please keep in mind that you need to add a static constructor for the MainWindow to disable the default windows theme.

public partial class MainWindow : RadRibbonWindow
    {
        static MainWindow()
        {
            RadRibbonWindow.IsWindowsThemeEnabled = false;
        }

        public MainWindow()
        {
            InitializeComponent();
        }
    }

 Please check the Themes section in RibbonWindow help article.

You will also need to change the TargetType property of the Style for the RadRibbonWindow. In the snipet below local is your project namespace.

<Style TargetType="local:MainWindow">
...
</Style>

As for your second question you can attach your custom Minimize / Maximize / Close buttons to the built-in  Commands for the default ones.

<telerik:RadRibbonWindow x:Class="RibbonViewWithRadWindowExample.MainWindow"
                        ...
                         xmlns:Primitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"
                         xmlns:Shell="clr-namespace:Telerik.Windows.Controls.RibbonView.Shell;assembly=Telerik.Windows.Controls.RibbonView"
                        ...>

<Button x:Name="btnMinimise"
                            Width="22"
                            Command="Shell:SystemCommands.MinimizeWindowCommand"
                            Content="‗‗"
                            ToolTip="Minimise" />

Also, in order to show the Border at the Top of the RadRibbonWindow you need to edit the Margin property of the AdornerDecorator element in the Template.

I attached a sample project demonstrating the suggested approaches.

Regards,
Boris Penev
Telerik

 

 

[Martin]

Great demo, I just added made it so maximise toggled between normal/maximised properly and hooked up some events so the window can be dragged around by the title bar and it works great now, thanks.