Problem Templating RadComboBox

5 posts, 1 answers
  1. Ramiro
    Ramiro avatar
    46 posts
    Member since:
    Aug 2010

    Posted 17 Dec 2010 Link to this post

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

    Posted 20 Dec 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for WPF
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ramiro
    Ramiro avatar
    46 posts
    Member since:
    Aug 2010

    Posted 20 Dec 2010 Link to this post

    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>

  5. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 22 Dec 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for WPF
  6. Ramiro
    Ramiro avatar
    46 posts
    Member since:
    Aug 2010

    Posted 23 Dec 2010 Link to this post

    Thanks very much
Back to Top
UI for WPF is Visual Studio 2017 Ready