Adding a button to the Title Bar

[Laura]

Hello,

I'd like to add a button to the left of Minimize Button of the RadWindow for WPF. I want to create a custom control based on RadWindow. I'm not very familiar with creating custom controls. I got the control template of the RadWindow by using Blend, but I don't want to redo the whole template; I want to be able to use the RadWindow as it comes and just add that button to the title bar. What is the best way to do so?

Thanks,
LauraH

[Miroslav Nedyalkov]

Hello Laura,

Unfortunately there is no easy way to add button just next to the other buttons of the RadWindow control. The easy way of adding button to the header of the RadWindow control will let you add button just next to the title itself. You can do this just by changing the HeaderTemplate property of the RadWindow control and add your button in it. Notice that this is the ContentTemplate of the ContentPresenter, shown in the header. The header by default is not visible for clicks. To change this you need to set the IsHeaderHitTestVisible property of the RadWindowControl. Here is an example:

<navigation:RadWindow x:Name="window" Header="Window" IsHeaderHitTestVisible="True">
    <navigation:RadWindow.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <ContentPresenter Content="{Binding}" />
                <Button Content="MyButton" />
            </StackPanel>
        </DataTemplate>
    </navigation:RadWindow.HeaderTemplate>
</navigation:RadWindow>

If you need to add button just next to the minimize, maximize and close buttons, you need to change the ControlTemplate of the RadWindow control.

Regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Adriana]

Hello,
   I want to include a button consisting of just an icon displayed right next to the minimize button that can be used to launch an About Box. You mentioned that in order to do this you need to change the ControlTemplate of a RadWindow. Can you supply an example of how to do this? I do not have access to Expression Blend.

Thank you,
Adriana

[George]

Hello Adriana,

With the RadControls installation we provide the control templates. You could edit the template for the RadWindow control and add another button next to the minimize button. 

Regards,
George
the Telerik team

[Akram]

Hi
i used your suggestion and it works but the tool tip does not appear

this is my xaml for the HeaderTemplate

                    <DataTemplate >
                        <DockPanel >
                           <ContentPresenter Content="{Binding}" DockPanel.Dock="Left"/>
                            <Image Source="resources\palette16.png" Stretch="None"  ToolTip="Select Theme" DockPanel.Dock="Right"/>
                        </DockPanel>
                   </DataTemplate>

Thanks
Akram

[Akram]

Hi
I fixed all problems, Also, i was able to add buttons near to maximize,minimize,close buttons

This is my xaml

<telerik:RadWindow x:Class="Run32.TestTitleButtonsWindow"
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"
Header="TestTitleButtonsWindow" Height="300" Width="510">
    <telerik:RadWindow.Style>
        <Style  TargetType="telerik:RadWindow">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding}" DockPanel.Dock="Left" VerticalAlignment="Center"/>
                            <WrapPanel  Grid.Column="1" FlowDirection="RightToLeft" Margin="2" VerticalAlignment="Center">
                                <Button Margin="2" Background="#00000000" BorderBrush="#00000000" ToolTip="Select Option1" Content="Click 1"/>
                                <Button Margin="2" Background="#00000000" BorderBrush="#00000000" ToolTip="Select Option2" Content="Click 2"/>
                                <Button Margin="2" Background="#00000000" BorderBrush="#00000000" ToolTip="Select Option3" Content="Click 3"/>
                                <Button Margin="2" Background="#00000000" BorderBrush="#00000000" ToolTip="Select Option4" Content="Click 4"/>
                            </WrapPanel>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadWindow.Style>
    <Grid>
        
    </Grid>
</telerik:RadWindow>

Thanks
Akram

[Dinesh]

how to add the additional information in ribbon control header like (user mail id and project name) 

[Dinko | Tech Support Engineer]

Hi Dinesh,

Thank you for the provided image which demonstrates the behavior which you are trying to achieve.   

The RadRibbonView expose Title and ApplicationName properties which you could set. In your case, you have three string position differently. This behavior couldn't be achieved out of the box. What you could try is extract and edit the default template of the RadRibbonView. You can take a look at the Editing Control Templates help article which describes how you can get the default template of the controls. In your case, you will need to edit the WindowTitle element which represents the title of the RibbonView.

Another approach which you could try is to set create a custom style which targets WindowTitle and set it to the WindowTitleStyle property. In the custom style, you can create your own ControlTemplate. The tricky part here is that you will need to give more space by setting static Width property to 500 for example. 

<telerik:RadRibbonView.WindowTitleStyle>
    <Style TargetType="ribbonView:WindowTitle" BasedOn="{StaticResource WindowTitleStyle}">
        <Setter Property="Width" Value="500"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <TextBlock Text="User:[e-mail]" HorizontalAlignment="Left"/>
                        <TextBlock Text="Tag test 2: string" HorizontalAlignment="Center"/>
                        <TextBlock Text="DataBase:Centralized" HorizontalAlignment="Right"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</telerik:RadRibbonView.WindowTitleStyle>

The BasedOn property is set if you are using NoXAML binaries. If not you can remove it from the style.

Regards,
Dinko
Progress Telerik