RadWindow template

8 posts, 0 answers
  1. Jan
    Jan avatar
    58 posts
    Member since:
    May 2010

    Posted 14 Oct 2011 Link to this post

    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.
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 17 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
  4. Jan
    Jan avatar
    58 posts
    Member since:
    May 2010

    Posted 17 Oct 2011 Link to this post

    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.
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 17 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  6. Jan
    Jan avatar
    58 posts
    Member since:
    May 2010

    Posted 18 Oct 2011 Link to this post

    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?


  7. Dani
    Admin
    Dani avatar
    848 posts

    Posted 20 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  8. Jan
    Jan avatar
    58 posts
    Member since:
    May 2010

    Posted 24 Oct 2011 Link to this post

    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? 
  9. Dani
    Admin
    Dani avatar
    848 posts

    Posted 25 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
DevCraft banner