Home / Community & Support / Developer Productivity Tools Forums / Silverlight > RibbonBar > Template ScreenTip

• Gilbert van Veen

  Posted on Oct 6, 2011 (permalink)

  Hello,
  
  Is it possible to "template" the ScreenTip?
  
  

   

  <telerikRibbonBar:RadRibbonButton

    

  Name="Time_WorkRulesRibbon"

    

  Text="Work rules" 

    

  Size="Large" 

    

  LargeImage="/Images/workrule.png" 

    

  telerikRibbonBar:ScreenTip.Title="Work rules" 

    

  telerikRibbonBar:ScreenTip.Description="Work rules" 

    

  Click="RadRibbonButton_Click"

    

  Tag="Time_WorkRules"/>

  I want use one image file (workrule.png) but in the screentip I want to resize it (make it smaller).
  
  

   

   

   

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Oct 11, 2011 (permalink)

  Hi Gilbert Van Veen,

   Currently you can customize the default style of the Telerik.Windows.Controls.ScreenTip:

  <LinearGradientBrush x:Key="QuickAccessKeyHintBackgroundBrush" StartPoint="0,0" EndPoint="0,1">

              <GradientStop Offset="0" Color="#ffffff" />

              <GradientStop Offset="1" Color="#e4e4f0" />

          </LinearGradientBrush>

          <SolidColorBrush x:Key="QuickAccessKeyHintForegroundBrush" Color="#4C4C4C" />

          <SolidColorBrush x:Key="QuickAccessKeyHintBorderBrush" Color="#767676" />

   

          <Style TargetType="telerik:ScreenTip">

              <Setter Property="Padding" Value="4,2,4,2" />

              <Setter Property="Background" Value="{StaticResource QuickAccessKeyHintBackgroundBrush}" />

              <Setter Property="Foreground" Value="{StaticResource QuickAccessKeyHintForegroundBrush}" />

              <Setter Property="BorderBrush" Value="{StaticResource QuickAccessKeyHintBorderBrush}" />

              <Setter Property="MinHeight" Value="50" />

              <Setter Property="BorderThickness" Value="1" />

              <Setter Property="Template">

                  <Setter.Value>

                      <ControlTemplate TargetType="telerik:ScreenTip">

                          <Grid x:Name="RootElement">

                              <VisualStateManager.VisualStateGroups>

                                  <VisualStateGroup x:Name="ContentState">

                                      <VisualState x:Name="Title">

                                          <Storyboard>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Width">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="210" />

                                              </ObjectAnimationUsingKeyFrames>

                                          </Storyboard>

                                      </VisualState>

                                      <VisualState x:Name="TitleDescription">

                                          <Storyboard>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DescriptionPresenter" Storyboard.TargetProperty="Visibility">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

                                              </ObjectAnimationUsingKeyFrames>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitlePresenter" Storyboard.TargetProperty="Margin">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="0,4,0,0" />

                                              </ObjectAnimationUsingKeyFrames>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Width">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="210" />

                                              </ObjectAnimationUsingKeyFrames>

                                          </Storyboard>

                                      </VisualState>

                                      <VisualState x:Name="TitleDescriptionImage">

                                          <Storyboard>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DescriptionPresenter" Storyboard.TargetProperty="Visibility">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

                                              </ObjectAnimationUsingKeyFrames>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitlePresenter" Storyboard.TargetProperty="Margin">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="0,4,0,0" />

                                              </ObjectAnimationUsingKeyFrames>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Visibility">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

                                              </ObjectAnimationUsingKeyFrames>

                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Width">

                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="318" />

                                              </ObjectAnimationUsingKeyFrames>

                                          </Storyboard>

                                      </VisualState>

                                  </VisualStateGroup>

                              </VisualStateManager.VisualStateGroups>

                              <Border x:Name="Border"

                                      Background="{TemplateBinding Background}"

                                      BorderBrush="{TemplateBinding BorderBrush}"

                                      BorderThickness="{TemplateBinding BorderThickness}">

                                  <Grid Margin="{TemplateBinding Padding}">

                                      <Grid.ColumnDefinitions>

                                          <ColumnDefinition Width="Auto" />

                                          <ColumnDefinition Width="*" />

                                      </Grid.ColumnDefinitions>

                                      <Grid.RowDefinitions>

                                          <RowDefinition Height="Auto" />

                                          <RowDefinition Height="Auto" />

                                      </Grid.RowDefinitions>

                                      <TextBlock x:Name="TitlePresenter"

                                                 Grid.ColumnSpan="2"

                                                 FontWeight="Bold"

                                                 Text="{TemplateBinding Title}"

                                                 TextWrapping="Wrap" />

                                      <Image x:Name="Image"

                                             Grid.Row="1"                                       

                                             Margin="29,10,21,6"

                                             VerticalAlignment="Top"

                                             Source="{TemplateBinding Icon}"

                                             Stretch="None"

                                             Visibility="Collapsed" />

                                      <TextBlock x:Name="DescriptionPresenter"

                                                 Grid.Row="1"

                                                 Grid.Column="1"

                                                 Margin="8,7,8,2"

                                                 VerticalAlignment="Top"

                                                 Text="{TemplateBinding Description}"

                                                 TextWrapping="Wrap"

                                                 Visibility="Collapsed" />

                                  </Grid>

                              </Border>

                          </Grid>

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

          </Style>

  Unfortunately, it only applies when you don't use the ScreenTip as attached property. We logged this as a bug and you can track its status here. As you can see in the template, the Image element has no defined Width or Height and the Stretch is None, so the size of the Image displayed depends mostly on the size of the original image. 
  We also updated your telerik account points as a thanks for your cooperation.Greetings,
  Petar Mladenov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > RibbonBar > Template ScreenTip