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.