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