Articles in this section
Category / Section

How to customize the style of ComboBoxAdv control?

1 min read

ComboBoxAdv control can be customized by overriding its style. In the below example, Background color for the CheckBox is changed by appling style to CheckBox which is present inside 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 sign in to leave a comment
Access denied
Access denied