Articles in this section
Category / Section

How to customize the style of ComboBoxAdv control?

2 mins read

The ComboBoxAdv control can be customized by overriding its style. In the below example, the background color for the CheckBox is changed by applying a style to the CheckBox which is present inside the ComboBoxItemAdv.

The same has been explained in the following code example.

XAML

 
  <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Syncfusion.Shared.WPF;component/Controls/ComboBoxAdv/Themes/MetroStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="CheckBox" x:Key="CheckBoxStyle">
                <Setter Property="Background" Value="Yellow"/>
            </Style>         
            <Style x:Key="Comboboboxitem"
           TargetType="{x:Type syncfusion:ComboBoxItemAdv}" BasedOn="{StaticResource MetroComboBoxItemAdvStyle}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxItemFocusVisual}" />
                <Setter Property="HorizontalContentAlignment"
                Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
                <Setter Property="VerticalContentAlignment"
                Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
                <Setter Property="Padding"
                Value="3,0,3,0" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Background" Value="{StaticResource MetroComboBoxItemBackground}" />
                <Setter Property="BorderBrush" Value="{StaticResource MetroComboBoxItemBorderBrush}" />
                <Setter Property="Foreground" Value="{DynamicResource   MetroForegroundBrush}" />
                <Setter Property="FontFamily" Value="{DynamicResource MetroFontFamily}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type syncfusion:ComboBoxItemAdv}">
                            <Border x:Name="Bd" CornerRadius="0" Margin="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                <Grid Margin="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <CheckBox  Style="{StaticResource CheckBoxStyle}" Margin="2" Visibility="{Binding Path=AllowMultiSelect, Converter={StaticResource VisiblityConverter}, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:ComboBoxAdv}}}" IsHitTestVisible="False"  x:Name="PART_CheckBox" IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
                                    <ContentPresenter Name="content" Margin="2,1,2,2" Grid.Column="1"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Grid>
                            </Border>                       
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>      
    </Window.Resources>
    <Grid>      
        <syncfusion:ComboBoxAdv  AllowMultiSelect="True"  ItemContainerStyle="{StaticResource Comboboboxitem }" Height="25" Width="259" >
            <syncfusion:ComboBoxItemAdv Content="WPF"/>
            <syncfusion:ComboBoxItemAdv Content="Diagram"/>
            <syncfusion:ComboBoxItemAdv Content="Gauge"/>
            <syncfusion:ComboBoxItemAdv Content="GridView"/>
        </syncfusion:ComboBoxAdv>    
    </Grid>

 

The above code generates the following output.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied