RadWindow template

[Jan]

Hello
Can you please send us the latest RadWindow template and necessary resource dependencies (styles, brushes, colors, sub-templates..)?
We need to change window buttons, but we use older template version.
Thank you.

[Dani]

Hi Jan,

Please, find attached the latest RadWindow contol template and resources for Office Black theme.

I hope this helps.

Best wishes,
Dani
the Telerik team

[Jan]

Thank you, we will use the template you provided. 
One more question: Is the template theme specific?
If it is, could you sent us the Windows 7 specific one? Thank you.

[Dani]

Hello Jan,

The template is the one used by the default Office Black theme. This is the template that Blend would generate for you if you chose to get the resources from Blend.

For any other theme, you can either get the corresponding resources from RadControls installation folder, or you can send a request to our support team to provide the needed resources.

I attach here the resource dictionary for RadScheduleView Windows7 theme.

I hope this helps.

Greetings,
Dani
the Telerik team

[Jan]

Thank you. We used Ofiice_Black theme template and header buttons within.
There are few issues you can help us about:
1.) Mouse over storyboard doesn't work for minimize and restore button. 
2.) The button click could not be handled via control code-behind
      and retrieving the button in OnApplyTemplate().
      Break point within button click event handler never gets hit.

This is the header button style:

<Style x:Key="WindowHeaderButtonStyle" TargetType="Button">
        <Setter Property="IsEnabled" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="MinWidth" Value="5" />
        <Setter Property="MinHeight" Value="5" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Cursor" Value="Arrow" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
 
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="Focused">
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0"
												Storyboard.TargetName="OuterBorder"
												Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
													Value="{StaticResource HeaderButton_OverBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0"
												Storyboard.TargetName="ShadowOver"
												Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0"
												Storyboard.TargetName="OuterBorder"
												Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
													Value="{StaticResource HeaderButton_PressedBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0"
												Storyboard.TargetName="ShadowOver"
												Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                </VisualState>
                                <VisualState x:Name="Normal">
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
 
                        <Border BorderBrush="{StaticResource ButtonArea_OuterBorderBrush}"
								Width="25" HorizontalAlignment="Left" BorderThickness="0 0 1 0">
                            <Border x:Name="OuterBorder"
									Background="{StaticResource HeaderButton_NormalBackgroundBrush}">
                                <Border BorderBrush="#99FFFFFF" BorderThickness="1" />
                            </Border>
                        </Border>
                        <ContentPresenter Content="{TemplateBinding Content}"
								ContentTemplate="{TemplateBinding ContentTemplate}" />
 
                        <StackPanel x:Name="ShadowOver" Visibility="Collapsed"
								IsHitTestVisible="True" Width="34.175" Height="36.089"
								Margin="-22 -5 -20 -15">
                            
                            <StackPanel IsHitTestVisible="True">
                                <Rectangle IsHitTestVisible="True"
										Stroke="{StaticResource HeaderButton_ShadowStrokeBrush}"
										OpacityMask="{StaticResource HeaderButton_ShadowOpacityMaskBrush}"
										StrokeThickness="10" HorizontalAlignment="Left" Margin="0"
										VerticalAlignment="Top" Width="34.175" Height="25.915"
										RadiusX="5" RadiusY="5" />
                                <Rectangle IsHitTestVisible="True"
										Stroke="{StaticResource HeaderButton_ShadowStroke2Brush}"
										StrokeThickness="10" HorizontalAlignment="Left"
										Margin="9 -33 -8 0" VerticalAlignment="Top" Width="16.163"
										Height="36.415" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0.99246469169824569"
													ScaleY="1.0075925202828731" />
                                            <SkewTransform AngleX="0" AngleY="0" />
                                            <RotateTransform Angle="90" />
                                            <TranslateTransform X="0" Y="0" />
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </StackPanel>
 
                        </StackPanel>
                        
                    </Grid>
 
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This click event handlers in OnApplyTemplate() code don't work:

            RadButton closeButton = (RadButton)this.GetTemplateChild("PART_CloseButton");
            this.restoreButton = (RadButton)this.GetTemplateChild("PART_RestoreButton");
            this.minimizeButton = (RadButton)this.GetTemplateChild("PART_MinimizeButton");
 
            closeButton.Click += new RoutedEventHandler(closeButton_Click);
            restoreButton.Click += new RoutedEventHandler(restoreButton_Click);
            minimizeButton.Click += new RoutedEventHandler(minimizeButton_Click);


This is how we use the templated button (e.g. restore button):

<telerik:RadButton x:Name="PART_RestoreButton"
								                                                        Style="{StaticResource WindowHeaderButtonStyle}" Height="16"
								                                                        VerticalAlignment="Top" HorizontalAlignment="Right"
								                                                        
								                                                        Command="telerik:WindowCommands.Restore">
 
                                                                        <Grid VerticalAlignment="Stretch" 
                                                                                                      HorizontalAlignment="Stretch"
									                                                                  x:Name="restore">
 
                                                                            <Path Stretch="Fill" 
                                                                                                            HorizontalAlignment="Left" Margin="8.5,3,0,0"
										                                                                    VerticalAlignment="Top"
										                                                                    Stroke="{StaticResource HeaderButton_StrokeBrush}"
										                                                                    Fill="{StaticResource HeaderButton_FillBrush}" Width="9"
										                                                                    Height="8"
										                                                                    Data="M1.5,0.5 L10.5,0.5 C11.052284,0.5 11.5,0.94771537 11.5,1.5 L11.5,8.5 C11.5,9.0522842 11.052284,9.5 10.5,9.5 L1.5,9.5 C0.94771519,9.5 0.5,9.0522841 0.5,8.5 L0.5,1.5 C0.5,0.94771546 0.9477151,0.5 1.5,0.5 z" />
 
                                                                            <Path Stretch="Fill"
										                                                                    Stroke="{StaticResource HeaderButton_StrokeBrush}"
										                                                                    Fill="{StaticResource HeaderButton_FillBrush}"
										                                                                    Margin="6.5,5,0,0" HorizontalAlignment="Left"
										                                                                    VerticalAlignment="Top" Width="9" Height="9"
										                                                                    Data="M3.5443635,6.4780002 L8.4556365,6.4780002 8.4556365,3.52 3.5443635,3.52 z M1.5,0.5 L10.5,0.5 C11.052284,0.5 11.5,0.94771537 11.5,1.5 L11.5,8.5 C11.5,9.0522842 11.052284,9.5 10.5,9.5 L1.5,9.5 C0.94771519,9.5 0.5,9.0522841 0.5,8.5 L0.5,1.5 C0.5,0.94771546 0.9477151,0.5 1.5,0.5 z" />
 
                                                                        </Grid>
                                                                    </telerik:RadButton>

Can you help us with this?

[Dani]

Hi Jan,

I tested your code and got it working with a few minor fixes.

First of all, you have created your custom style for the restore button, but I would like to put a little reminder here: the TargetType of your new style should refer to RadButton rather than Button:

<Style x:Key="WindowHeaderButtonStyle" TargetType="telerik:RadButton">
           ...
    <Setter Property="Template">
        <Setter.Value>
             <ControlTemplate TargetType="telerik:RadButton">
                                                ....
                                               </ControlTemplate>
                                       </Setter.Value>
                    </Setter>
</Style>

Apart from this one issue, your style and button declaration in xaml seem fine.

As for the button click event handlers, I believe you need to verify that the button is not null before assigning the event handler. Please, check the modified code below:

private RadButton restoreButton;
        private RadButton minimizeButton;
        private RadButton closeButton;

        public Window()
        {
            InitializeComponent();
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.closeButton = (RadButton)this.GetTemplateChild("PART_CloseButton");
            this.restoreButton = (RadButton)this.GetTemplateChild("PART_RestoreButton");
            this.minimizeButton = (RadButton)this.GetTemplateChild("PART_MinimizeButton");

            if (this.closeButton !=null)
            {
                this.closeButton.Click += new RoutedEventHandler(closeButton_Click);
            }

            if (this.restoreButton != null)
            {
                this.restoreButton.Click += new RoutedEventHandler(restoreButton_Click);
            }

            if (this.minimizeButton != null)
            {
                this.minimizeButton.Click += new RoutedEventHandler(minimizeButton_Click);
            }
        }

        private void closeButton_Click(object sender, RoutedEventArgs e)
        {

        }

        private void restoreButton_Click(object sender, RoutedEventArgs e)
        {

        }

        private void minimizeButton_Click(object sender, RoutedEventArgs e)
        {

        }

I hope this will be helpful. If you need further help, please let me know.

Regards,
Dani
the Telerik team

[Jan]

We used :RadButton reference in templates, but without any success.
The button simply doesn't give any hover effects. Is there anything else we can try? 

[Dani]

Hi Jan,

Please, check if you have the Visibility Binding in the declaration of the restore button:

<telerik:RadButton x:Name="PART_RestoreButton"
                                                           Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource Self}}"
                                                                                        Style="{StaticResource WindowHeaderButtonStyle}" Height="16"
                                                                                        VerticalAlignment="Top" HorizontalAlignment="Right"
                                                                                        Command="telerik:WindowCommands.Restore">
...
</telerik:RadButton>

The Restore button should be visible only after you have maximized or minimized RadWindow. In that case, the mouse over animation is effective too.

I hope this helps.

Best wishes,
Dani
the Telerik team