Change the RadToggleButton on a RadComboBox

[Richard]

I am using the Office 2013 Theme on my project and the arrow on the RadComboBox is very small.  Also, for some reason, you have to click directly on the arrow itself in order for the dropdown to open.  If you click anywhere in the ToggleButton area around the arrow it will not open.  So anywho, I decided to try changing the toggle button on the control to make it larger.  I basically got some code for a normal ComboBox from https://stackoverflow.com/questions/27128526/how-to-change-combobox-arrow-image-in-wpf and modified it to work with the telerik:RadComboBox.  The control shows as intended in the XAML design window but, when I run the application the styling does not take effect.  Any idea what I may be missing here? 

 

<Page xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 

      xmlns:ExtendedGridControl="clr-namespace:ExtendedGrid.ExtendedGridControl;assembly=ExtendedGrid"

      xmlns:ExtendedColumn="clr-namespace:ExtendedGrid.ExtendedColumn;assembly=ExtendedGrid"

      x:Class="SuperGateWPFT.Page1"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      xmlns:rv="clr-namespace:Microsoft.Reporting.WinForms;assembly=Microsoft.ReportViewer.WinForms"            

      xmlns:local="clr-namespace:SuperGateWPFT"

      mc:Ignorable="d"  d:DesignHeight="775" d:DesignWidth="1200"  MinWidth="1200" MinHeight="775"

      Title="SuperGate"  Loaded="Page_Loaded">

 

    <Page.Resources>

<DataTemplate x:Key="MultipleSelectionBoxTemplateDept">
            <TextBlock Text="{Binding ElementName=cmbDept, Path=SelectedItems.Count, StringFormat='Selected Items Count: {0}'}" Foreground="Red" FontWeight="Bold" />
        </DataTemplate>

 

        <!--Toggle Button Template-->

        <ControlTemplate x:Key="MyRadToggleButton" TargetType="telerik:RadToggleButton">

            <Grid x:Name="gd">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition />

                    <ColumnDefinition Width="25" />

                </Grid.ColumnDefinitions>

                <Border x:Name="Border" SnapsToDevicePixels="True" Grid.ColumnSpan="2" Background="White" BorderBrush="Black" BorderThickness="1"/>

                <Border x:Name="Boredr1" SnapsToDevicePixels="True" Grid.Column="1"  Margin="1" Background="Black" BorderBrush="Black" BorderThickness="0,0,1,0" />

                <Path x:Name="Arrow" SnapsToDevicePixels="True" Grid.Column="1" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 6 6 L 12 0 Z"/>

                <ContentPresenter Grid.Column="0" TextElement.Foreground="Orange"></ContentPresenter>

            </Grid>

            <ControlTemplate.Triggers>

                <Trigger Property="telerik:RadToggleButton.IsMouseOver" Value="True">

                    <Setter TargetName="Border" Property="BorderBrush" Value="Black"/>

                    <Setter TargetName="Boredr1" Property="BorderBrush" Value="Black"/>

                </Trigger>

                <Trigger Property="telerik:RadToggleButton.IsChecked" Value="True">

                    <Setter TargetName="Arrow" Property="Data" Value="M 0 0 L 5 5 L 10 0"/>

                    <Setter TargetName="Arrow" Property="Fill" Value="White"/>

                    <Setter TargetName="Arrow" Property="Stroke" Value="White"/>

                    <Setter TargetName="Arrow" Property="StrokeThickness" Value="1.5"/>

                </Trigger>

                <Trigger Property="telerik:RadToggleButton.IsEnabled" Value="False">

                    <Setter TargetName="gd" Property="Visibility" Value="Visible"/>

                </Trigger>

            </ControlTemplate.Triggers>

        </ControlTemplate>

 

        <!--TextBox Template-->

        <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">

            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" />

        </ControlTemplate>

 

        <!--combobox-->

        <Style x:Key="MyComboBoxStyle" TargetType="telerik:RadComboBox">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate  TargetType="telerik:RadComboBox">

                        <Grid>

                            <telerik:RadToggleButton Name="ToggleButton" Foreground="Black" Template="{StaticResource MyRadToggleButton}" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">

                            </telerik:RadToggleButton>

                            <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3"  VerticalAlignment="Center" HorizontalAlignment="Left" />

                            <TextBox OverridesDefaultStyle="True" SelectionBrush="Gray" CaretBrush="Black" Margin="0,0,30,0" TextWrapping="NoWrap"   x:Name="PART_EditableTextBox" FontFamily="Segoe UI Dark"   Foreground="Black" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" Focusable="True"  VerticalAlignment="Center"  FontSize="15"   Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/>

                            <Popup Name="Popup"  Grid.ColumnSpan="2" Placement="Bottom"  IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">

                                <Grid Name="DropDown" SnapsToDevicePixels="True" MaxWidth="{TemplateBinding ActualWidth}" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">

                                    <Border Grid.ColumnSpan="2" Grid.RowSpan="2" x:Name="DropDownBorder" SnapsToDevicePixels="True" Background="Transparent" MaxWidth="{TemplateBinding ActualWidth}" BorderThickness="1" BorderBrush="Black"/>

                                    <ScrollViewer Grid.ColumnSpan="2" ScrollViewer.CanContentScroll="False" Grid.Row="1" SnapsToDevicePixels="True">

                                        <StackPanel IsItemsHost="True" Background="Transparent">

                                        </StackPanel>

                                    </ScrollViewer>

                                </Grid>

                            </Popup>

                        </Grid>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsEditable" Value="true">

                                <Setter Property="IsTabStop" Value="false"/>

                                <Setter  TargetName="PART_EditableTextBox" Property="Background" Value="White"/>

                                <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>

                                <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/>

                                <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>

                            </Trigger>

                            <Trigger Property="HasItems" Value="false">

                                <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>

                            </Trigger>

                            <Trigger Property="IsEnabled" Value="false">

                                <Setter Property="IsTabStop" Value="false"/>

                                <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>

                                <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/>

                                <Setter  TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False"/>

                                <Setter  TargetName="PART_EditableTextBox" Property="Background" Value="White"/>

                                <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>

                            </Trigger>

                            <Trigger Property="IsGrouping" Value="true">

                                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>

                            </Trigger>

                            <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">

                                <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Style.Triggers>

            </Style.Triggers>

        </Style>

    </Page.Resources>

 

<Border BorderThickness="1" BorderBrush="Black" Height="27">

        <telerik:RadComboBox Style="{StaticResource MyComboBoxStyle}"  Name="cmbDept" AllowMultipleSelection="True" IsEditable="False" Width="250" Height="25" Margin="0,0,0,0" VerticalAlignment="Top" ItemsSource="{Binding}" MultipleSelectionBoxTemplate="{StaticResource MultipleSelectionBoxTemplateDept}" OpenDropDownOnFocus="True"></telerik:RadComboBox>

</Border>

[Richard]

I figured it out with the help I found here: http://www.telerik.com/forums/problem-while-styling-the-radcombobox

It does not display right in the XAML design now but at least it does in runtime.

I had to change

<!--combobox-->
<Style x:Key="MyComboBoxStyle" TargetType="telerik:RadComboBox">
        <Setter Property="Template">

To This:

<!--combobox-->
<Style x:Key="MyComboBoxStyle" TargetType="telerik:RadComboBox">
        <Setter Property="NonEditableTemplate">

[Sia]

Hello,

Indeed I see that this information is missing in our help. I have just logged internal issue for updating it. You can find your points updated. Please let me know if you need additional advice about styling your combo box. 

Regards,
Sia
Progress Telerik