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

Adding a button to the Title Bar

7 Answers 511 Views
Window
This is a migrated thread and some comments may be shown as answers.
Laura
Top achievements
Rank 1
Laura asked on 20 Aug 2009, 11:01 PM
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

7 Answers, 1 is accepted

Sort by
0
Miroslav Nedyalkov
Telerik team
answered on 24 Aug 2009, 01:07 PM
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.
0
Adriana
Top achievements
Rank 1
answered on 03 Feb 2011, 10:10 PM
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
0
George
Telerik team
answered on 09 Feb 2011, 11:08 AM
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
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
Akram
Top achievements
Rank 1
answered on 22 Dec 2012, 11:08 AM
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
0
Akram
Top achievements
Rank 1
answered on 22 Dec 2012, 12:22 PM
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
0
Dinesh
Top achievements
Rank 1
answered on 19 Feb 2019, 11:40 AM
how to add the additional information in ribbon control header like (user mail id and project name) 
0
Dinko
Telerik team
answered on 22 Feb 2019, 08:23 AM
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:Username@teknotherm.no" 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
Laura
Top achievements
Rank 1
Answers by
Miroslav Nedyalkov
Telerik team
Adriana
Top achievements
Rank 1
George
Telerik team
Akram
Top achievements
Rank 1
Dinesh
Top achievements
Rank 1
Dinko
Telerik team
Share this question
or