Adding icons on RadDropDownButton

[John]

Hello,

I have searched but not yet found a solution to an issue I am having when adding an icon to RadDropDownButtons.  The drop down function disappears.

I work on a large Silverlight application utilizing Telerik controls.  One thing I've recently done is add data path (vector) icons to all the buttons (see attached). This works great on all regular RadButtons.  However when I add the icons to RadDropDownButtons, the icons appear fine, but the drop down no longer functions.

How might I resolve this?  Below is typical coding:

<telerik:RadButton x:Name="RelatedIdButton"
  Margin="0 4 8 0"
  Content="{Binding Labels[RelatedId],Mode=OneWay}"
  CommandParameter="{Binding MasterIdColumn}"
  Command="{Binding ExecuteRelatedIdCommand}"
  Visibility="{Binding IsRelatedIdButtonVisible,Converter={StaticResource BooleanToVisibilityConverter}}"
  IsEnabled="{Binding IsRelatedIdButtonEnabled,Mode=TwoWay}"
  Style="{StaticResource RelatedIdButtonStyle}"
  ToolTipService.ToolTip="{Binding Path=Labels[RelatedIdToolTip]}"
  FlowDirection="LeftToRight" />


<telerik:RadDropDownButton Name="DuplicateRecordDropDownButton"
  Margin="0 4 8 0"
  Content="{Binding Labels[Duplicate],Mode=OneWay}"
  Visibility="{Binding IsDuplicateVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
  IsEnabled="{Binding IsDuplicateEnabled, Mode=TwoWay}"
  ToolTipService.ToolTip="{Binding Path=Labels[DuplicateToolTip]}">
<telerik:RadDropDownButton.DropDownContent>
<telerik:RadListBox IpmBehaviors:OnSelectBehavior.CloseAfterSelect="{Binding ElementName=DuplicateRecordDropDownButton}"
ItemsSource="{Binding AvailableDuplicateTemplates}"
DisplayMemberPath="ResourceName"
SelectedValue="{Binding SelectedDuplicationTemplate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Command="{Binding ExecuteDuplicateCommand}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
MaxHeight="400" />
</telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

Any suggestions or solutions would be greatly appreciated.

Thank you,
John Gnotek

[Pavel R. Pavlov]

Hi John,

I am not sure how you apply those icons to the RadDropDownButton. Could you please elaborate more on your scenario. Is the default Style of the control changed in any way? If so we will need to see the changes applied to the control in order to suggest a proper approach in your custom case.

Thank you for your kind cooperation.

Regards,
Pavel R. Pavlov
Telerik

[John]

The way i apply them to a RadButton is via a style:
Style="{StaticResource RelatedIdButtonStyle}"

This references a ButtonResources.xaml file:
<Style x:Key="RelatedIdButtonStyle"
  TargetType="telerik:RadButton">
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush"
Value="{StaticResource BasicBrush}" />
<Setter Property="Background"
Value="{StaticResource MainBrush}" />
<Setter Property="Foreground"
Value="{StaticResource MarkerBrush}" />
<Setter Property="FontFamily"
Value="Segoe UI" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Padding"
Value="3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Border22"
Storyboard.TargetProperty="Opacity"
To="0.2" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0:0:0"
  Storyboard.TargetName="Border"
  Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource BasicBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content2"
  Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource MainBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconShape2"
  Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource MainBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CommonStatesWrapper"
  Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="00:00:00.050"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0:0:0"
  Storyboard.TargetName="Border"
  Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource BasicBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation To="-1"
Duration="0:0:0"
Storyboard.TargetName="Content2"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0:0:0"
  Storyboard.TargetName="Border"
  Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource BasicBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Opacity"
To="0.3" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Content2"
Storyboard.TargetProperty="Opacity"
To="0.4" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="IconShape2"
Storyboard.TargetProperty="Opacity"
To="0.4" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStatesGroup">
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
  Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.150">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
  Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="00:00:00.150"
 Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
  Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
  Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="00:00:00.115"
 Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BackgroundVisibility">
<VisualState x:Name="BackgroundHidden">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="BackgroundVisible" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}" />
<Border x:Name="Border22"
BorderThickness="0"
CornerRadius="0"
Background="{StaticResource BasicBrush}"
Opacity="0.2" />
<StackPanel Orientation="Horizontal"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<local:CustomShape x:Name="IconShape2"
  Style="{StaticResource RelatedId}"
  Margin="4 0"
  VerticalAlignment="Center"
  Foreground="{TemplateBinding Foreground}"
  IsHitTestVisible="False" />
<ContentControl x:Name="Content2"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
Margin="0,0,4,0">
<ContentControl.RenderTransform>
<TranslateTransform />
</ContentControl.RenderTransform>
</ContentControl>
</StackPanel>
<!-- Focus -->
<Border x:Name="CommonStatesWrapper">
<Border x:Name="FocusVisual"
Visibility="Collapsed"
Opacity="0"
CornerRadius="{TemplateBinding CornerRadius}"
BorderThickness="1"
BorderBrush="{StaticResource AccentBrush}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

This button resource references an Icons resource file with the attributes and vector path data:
    <Style x:Key="RelatedId" TargetType="local:CustomShape">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomShape">
                    <Grid  Height="14" Width="16" Margin="0 0 0 1" Background="#00F90B0B">
                        <Path Fill="{TemplateBinding Foreground}" Data="M20,240L181,40L180,179L461,179L461,41L620,241L460,440L460,302L182,302L182,440z" Stretch="Fill" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And this works great on RadButtons!  When I apply the same to a RadDropDownButton it works as well--icon appears as it does with a RadButton--however I lose the dropdown functionality.  No dropdown arrow.  No drop down!  Same result whether referencing TargetType="telerik:RadButton"> or TargetType="telerik:RadDropDownButton"> on the ButtonResources reference.

Attached is a results example for an "Email" RadDropDownButton without and with an icon as implemented above.  The code below:
<telerik:RadDropDownButton Name="EmailDropdownButton"
  Margin="0 4 8 0"
  AutoOpenDelay="0:0:0.0"
  Content="{Binding Labels[EmailText],Mode=OneWay}"
  IsEnabled="{Binding IsEmailButtonEnabled}"
  Visibility="{Binding IsEmailVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
  ToolTipService.ToolTip="{Binding Path=Labels[EmailTextToolTip]}">
<telerik:RadDropDownButton.DropDownContent>
<telerik:RadListBox IpmBehaviors:OnSelectBehavior.CloseAfterSelect="{Binding ElementName=EmailDropdownButton}"
ItemsSource="{Binding EmailItems}"
DisplayMemberPath="ResourceName"
SelectedValuePath="ResourceId"
SelectedValue="{Binding SelectedEmailResourceId, Mode=TwoWay}"
Command="{Binding ExecuteEmailCommand}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
MaxHeight="400" />
</telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

To add the icon, I simply add below the name:
Style="{StaticResource EmailButtonStyle}"
 
See attached file for the visual result.

Am I doing something amiss?  

Thank you,
John Gnotek

[Pavel R. Pavlov]

Hi John,

Thank you for providing us with detailed information about your scenario. Now I can see where your issue origins from. I will try to clarify how you can achieve your requirement.

I can see that the default Style of the RadButton control is extracted and you have customized it. Your custom style works correctly when it is applied to the RadButton control because most likely you have used the default template of the same control as base extend it and to create your custom Style.

However, when customizing Styles you need to have in mind that every control providing users with different functionality has different style. This means that you need to extract the default style of the RadDropDownButton and apply your customizations to it as well. By following this approach you will be able to achieve your requirements. Basically, changing only the TargetType property of your custom Style is not enough to apply it to a completely different control. It is highly possible that the other control has different visual states that visualize/hide different parts of the visual representation of the control.

Please try to apply your customizations to the default style of the RadDropDownButton and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

[John]

Thank you for the prompt advisement and direction.

John Gnotek