Problem Templating RadComboBox

[ENTERPRISE INTERNATIONAL SAS]

hi!

I would like to template RadComboBox, so I generated a copy of template by using blend, this is template generated:

<ControlTemplate x:Key="RadComboBoxControlTemplate1" TargetType="{x:Type telerik:RadComboBox}">
    <Grid x:Name="VisualRoot">
        <Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
        <telerik:RadToggleButton x:Name="PART_DropDownButton" ClickMode="Press" IsTabStop="False" Margin="0" Padding="0">
            <telerik:RadToggleButton.Template>
                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                </ControlTemplate>
            </telerik:RadToggleButton.Template>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonChrome" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}">
                    <telerik:StyleManager.Theme>
                        <telerik:Office_BlackTheme/>
                    </telerik:StyleManager.Theme>
                </Telerik_Windows_Controls_Chromes:ButtonChrome>
                <ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                    <ContentControl.Template>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                            <Grid Margin="5,0">
                                <Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
                                <Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                            </Grid>
                        </ControlTemplate>
                    </ContentControl.Template>
                </ContentControl>
                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
        </telerik:RadToggleButton>
        <Popup x:Name="PART_Popup" AllowsTransparency="True" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding MinDropDownWidth}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <telerik:RadButton x:Name="PART_ClearButton" Content="{TemplateBinding ClearSelectionButtonContent}" Margin="-1,-1,-1,0" Grid.Row="0" Visibility="{TemplateBinding ClearSelectionButtonVisibility}">
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlackTheme/>
                        </telerik:StyleManager.Theme>
                    </telerik:RadButton>
                    <ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Padding="1,1,1,0" Grid.Row="1" VerticalScrollBarVisibility="Auto">
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlackTheme/>
                        </telerik:StyleManager.Theme>
                        <ItemsPresenter/>
                    </ScrollViewer>
                </Grid>
            </Border>
        </Popup>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
            <Setter Property="Foreground" TargetName="DropDownIcon" Value="#FF8D8D8D"/>
            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsEnabled" Value="True"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsEnabled" Value="True"/>
                <Condition Property="IsDropDownOpen" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

I would like to change black triangle DropDownIcon to my own image, how can I do this???

thanks

[Dani]

Hello Ramiro,

Great that you started off with generating the control template of RadComboBox in Blend. What you need to modify is the following ContentControl:

<ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                    <ContentControl.Template>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                            <Grid Margin="5,0">
<Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
<Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                            </Grid>
                        </ControlTemplate>
                    </ContentControl.Template>
                </ContentControl>

You can modify the two Path elements or replace them with your own.

I hope this is the guidance that you needed. If you need further assistance , please let me know.

All the best,
Dani
the Telerik team

[ENTERPRISE INTERNATIONAL SAS]

Thanks, but my exact question is if I can change path element by an Image to represent a .png image file because this was not possible:

<ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                            <ContentControl.Template>
                                <ControlTemplate TargetType="{x:Type ContentControl}">
                                    <Grid Margin="5,0">
                                        <Image Source="Images/LupaMini1.png"/>
                                    </Grid>
                                </ControlTemplate>
                            </ContentControl.Template>
</ContentControl>

[Dani]

Hello Ramiro,

Yes, it is possible to replace the black arrow with an image of yours. Please, find attached a very basic sample demonstrating this.

If you need further help, please let me know.

Best wishes,
Dani
the Telerik team

[ENTERPRISE INTERNATIONAL SAS]

Thanks very much