RadCombobox with Watermark

3 posts, 0 answers
  1. Minh Pham
    Minh Pham avatar
    2 posts
    Member since:
    Feb 2010

    Posted 28 Feb 2010 Link to this post

    Hi there,

    I'm currently trying to make a watermark for RadCombobox by defining a style for it but it did not work even though it works really well with normal Combobox. Here's the style i tried:

    <Style x:Name="comboToggleStyle" TargetType="ToggleButton"
                <Setter Property="Foreground" Value="#FF333333"/> 
                <Setter Property="Background" Value="#FF1F3B53"/> 
                <Setter Property="BorderBrush"
                    <Setter.Value> 
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"
                            <GradientStop Color="#FFA3AEB9" Offset="0"/> 
                            <GradientStop Color="#FF8399A9" Offset="0.375"/> 
                            <GradientStop Color="#FF718597" Offset="0.375"/> 
                            <GradientStop Color="#FF617584" Offset="1"/> 
                        </LinearGradientBrush> 
                    </Setter.Value> 
                </Setter> 
                <Setter Property="BorderThickness" Value="1"/> 
                <Setter Property="Padding" Value="3"/> 
                <Setter Property="Template"
                    <Setter.Value> 
                        <ControlTemplate TargetType="ToggleButton"
                            <Grid> 
                                <VisualStateManager.VisualStateGroups> 
                                    <VisualStateGroup x:Name="CommonStates"
                                        <VisualState x:Name="Normal"/> 
                                        <VisualState x:Name="MouseOver"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Pressed"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay2" Storyboard.TargetProperty="Opacity"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#E5FFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#BCFFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Disabled"/> 
                                    </VisualStateGroup> 
                                    <VisualStateGroup x:Name="CheckStates"
                                        <VisualState x:Name="Checked"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay3" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#E5FFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#BCFFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Unchecked"/> 
                                    </VisualStateGroup> 
                                    <VisualStateGroup x:Name="FocusStates"
                                        <VisualState x:Name="Watermark"
     
                                        </VisualState> 
                                        <VisualState x:Name="Focused"
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility"
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <Visibility>Visible</Visibility> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Unfocused"/> 
                                    </VisualStateGroup> 
                                </VisualStateManager.VisualStateGroups> 
                                <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="3" RadiusY="3"/> 
                                <Rectangle x:Name="BackgroundOverlay" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="3" RadiusY="3" Opacity="0"/> 
                                <Rectangle x:Name="BackgroundOverlay2" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="3" RadiusY="3" Opacity="0"/> 
                                <Rectangle x:Name="BackgroundGradient" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="{TemplateBinding BorderThickness}"
                                    <Rectangle.Fill> 
                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"
                                            <GradientStop Color="#FFFFFFFF" Offset="0"/> 
                                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/> 
                                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/> 
                                            <GradientStop Color="#C6FFFFFF" Offset="1"/> 
                                        </LinearGradientBrush> 
                                    </Rectangle.Fill> 
                                </Rectangle> 
                                <Rectangle x:Name="BackgroundOverlay3" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="3" RadiusY="3" Opacity="0"/> 
                                <Rectangle x:Name="BackgroundGradient2" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="{TemplateBinding BorderThickness}" Opacity="0"
                                    <Rectangle.Fill> 
                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"
                                            <GradientStop Color="#FFFFFFFF" Offset="0"/> 
                                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/> 
                                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/> 
                                            <GradientStop Color="#C6FFFFFF" Offset="1"/> 
                                        </LinearGradientBrush> 
                                    </Rectangle.Fill> 
                                </Rectangle> 
                                <Rectangle x:Name="Highlight" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="{TemplateBinding BorderThickness}" IsHitTestVisible="false" Opacity="0"/> 
                                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
                                <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="3.5" RadiusY="3.5" Margin="1" IsHitTestVisible="false" Visibility="Collapsed"/> 
                            </Grid> 
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
    <Style x:Key="TestComboBoxStyle" TargetType="telerikComboBox:RadComboBox" BasedOn="{StaticResource NormalRadComboBox}"
                <Setter Property="HorizontalContentAlignment" Value="Left"/> 
                <Setter Property="TabNavigation" Value="Once"/> 
                <Setter Property="MaxDropDownHeight" Value="300"/> 
                <Setter Property="BorderBrush"
                    <Setter.Value> 
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"
                            <GradientStop Color="#FFA3AEB9" Offset="0"/> 
                            <GradientStop Color="#FF8399A9" Offset="0.375"/> 
                            <GradientStop Color="#FF718597" Offset="0.375"/> 
                            <GradientStop Color="#FF617584" Offset="1"/> 
                        </LinearGradientBrush> 
                    </Setter.Value> 
                </Setter> 
                <Setter Property="Template"
                    <Setter.Value> 
                        <ControlTemplate TargetType="telerikComboBox:RadComboBox"
                            <Grid> 
     
                                <VisualStateManager.VisualStateGroups> 
                                    <VisualStateGroup x:Name="CommonStates"
                                        <VisualState x:Name="Normal"/> 
                                        <VisualState x:Name="MouseOver"/> 
                                        <VisualState x:Name="Disabled"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value=".55"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                    </VisualStateGroup> 
                                    <VisualStateGroup x:Name="Watermark"
                                        <VisualStateGroup.Transitions> 
                                            <VisualTransition From="ShowWatermark" GeneratedDuration="00:00:00.5000000" To="HideWatermark"/> 
                                        </VisualStateGroup.Transitions> 
                                        <VisualState x:Name="ShowWatermark"
                                        </VisualState> 
                                        <VisualState x:Name="HideWatermark"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="TextPrompt" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
     
                                    </VisualStateGroup> 
     
                                    <VisualStateGroup x:Name="FocusStates"
                                        <VisualState x:Name="Focused"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Unfocused"/> 
                                        <VisualState x:Name="FocusedDropDown"
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="(UIElement.Visibility)"
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00"
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <Visibility>Visible</Visibility> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                    </VisualStateGroup> 
                                    <VisualStateGroup x:Name="ValidationStates"
                                        <VisualState x:Name="Valid"/> 
                                        <VisualState x:Name="InvalidUnfocused"
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility"
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <Visibility>Visible</Visibility> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <!--<VisualState x:Name="InvalidFocused"
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility"
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <Visibility>Visible</Visibility> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState>--> 
                                    </VisualStateGroup> 
                                </VisualStateManager.VisualStateGroups> 
                                <Border x:Name="ContentPresenterBorder"
                                    <Grid> 
                                        <ToggleButton x:Name="DropDownToggle" HorizontalAlignment="Stretch" Margin="0" Style="{StaticResource comboToggleStyle}" VerticalAlignment="Stretch" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalContentAlignment="Right"
                                            <Path x:Name="BtnArrow" Stretch="Uniform" Height="4" HorizontalAlignment="Right" Margin="0,0,6,0" Width="8" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "
                                                <Path.Fill> 
                                                    <SolidColorBrush x:Name="BtnArrowColor" Color="#FF333333"/> 
                                                </Path.Fill> 
                                            </Path> 
                                        </ToggleButton> 
                                        <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            <Grid> 
                                                <TextBlock x:Name="TextPrompt" FontSize="12" Margin="5" Text="{TemplateBinding Tag}" Foreground="DarkGray"/> 
                                                <TextBlock Text=" "/> 
                                            </Grid> 
                                        </ContentPresenter> 
                                    </Grid> 
                                </Border> 
                                <Rectangle x:Name="DisabledVisualElement" Fill="White" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/> 
                                <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/> 
                                <Border x:Name="ValidationErrorElement" Visibility="Collapsed" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1"
                                    <Grid Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12" Background="Transparent"
                                        <Path Fill="#FFDC000C" Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"/> 
                                        <Path Fill="#ffffff" Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8"/> 
                                    </Grid> 
                                </Border> 
                                <Popup x:Name="Popup"
                                    <Border x:Name="PopupBorder" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"
                                        <Border.Background> 
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"
                                                <GradientStop Color="#FFFFFFFF" Offset="0"/> 
                                                <GradientStop Color="#FFFEFEFE" Offset="1"/> 
                                            </LinearGradientBrush> 
                                        </Border.Background> 
                                        <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1"
                                            <ItemsPresenter/> 
                                        </ScrollViewer> 
                                    </Border> 
                                </Popup> 
                            </Grid> 
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style>     

    Any help would really be appreciated.
  2. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 01 Mar 2010 Link to this post

    Hi,

    RadComboBox is a very different control than the standard Silverlight ComboBox and it is normal that the control template from the one is not working when applied on the other. I would recommend starting from one of our control templates and implementing the functionality there:
    http://www.telerik.com/help/silverlight/common-styling-appearance-edit-control-templates-blend.html

    Kind regards,
    Valeri Hristov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Minh Pham
    Minh Pham avatar
    2 posts
    Member since:
    Feb 2010

    Posted 01 Mar 2010 Link to this post

    Hi again,

    Sorry to bug you guys again but could u be more specific and give me a head start on where to start and how.
    I'd really appreciate your help.

    Thanks and best regards.
Back to Top