Change the RadToggleButton on a RadComboBox

3 posts, 0 answers
  1. Richard
    Richard avatar
    7 posts
    Member since:
    Jan 2017

    Posted 07 Jun Link to this post

    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? 

     

          xmlns:ExtendedGridControl="clr-namespace:ExtendedGrid.ExtendedGridControl;assembly=ExtendedGrid"
          xmlns:ExtendedColumn="clr-namespace:ExtendedGrid.ExtendedColumn;assembly=ExtendedGrid"
          x:Class="SuperGateWPFT.Page1"
          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>
  2. Richard
    Richard avatar
    7 posts
    Member since:
    Jan 2017

    Posted 07 Jun in reply to Richard Link to this post

    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">

  3. Sia
    Admin
    Sia avatar
    685 posts

    Posted 12 Jun Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top