MultiSelect allows you to customize the appearance of all the individual elements of the control and manage its overall appearance.

• Apply Styles to C1MultiSelect
• Apply Styles to Tags
• Apply Styles to CheckList Items
• Apply Theme

Apply Styles to C1MultiSelect

The following image shows styles applied to C1MultiSelect.

To apply style to MultiSelect using System.Windows.Style class, use the following code.

In code

Dim s As Style = New Style(GetType(C1MultiSelect))
s.Setters.Add(New Setter(ItemsControl.BackgroundProperty, 
              New SolidColorBrush(Color.FromRgb(255, 235, 205))))
mselect.Style = s

Style s = new Style(typeof(C1MultiSelect));
s.Setters.Add(new Setter(ItemsControl.BackgroundProperty,
              new SolidColorBrush(Color.FromRgb(255, 235, 205))));
mselect.Style = s;

In XAML

<c1:C1MultiSelect x:Name="mselect" ShowDropDownButton="true" HorizontalAlignment="Left"
        Margin="9,35,0,0" VerticalAlignment="Top" Width="270" Style="{StaticResource styleMultiSelect}"> 
    <c1:C1MultiSelect.Resources> 
        <Style TargetType="c1:C1MultiSelect" > 
              <Setter Property="Background" Value="#FFEBCD"/>                     
        </Style> 
     </c1:C1MultiSelect.Resources> 
</c1:C1MultiSelect>

Apply Styles to Tags

The following image shows styles applied to the tags in MultiSelect.

To customize the appearance of tags of C1MultiSelect, use the following code. Tags styles in C1MultiSelect can be accessed via the TagStyle property.

In code

Dim ts As Style = New Style(GetType(C1Tag))
ts.Setters.Add(New Setter(ItemsControl.ForegroundProperty,
               New SolidColorBrush(Color.FromRgb(165, 42, 42))))
mselect.TagStyle = ts

Style ts = new Style(typeof(C1Tag));
ts.Setters.Add(new Setter(ItemsControl.ForegroundProperty,
               new SolidColorBrush(Color.FromRgb(165, 42, 42))));
mselect.TagStyle = ts;

In XAML

<Window.Resources> 
     <Style x:Key="StyleForTag" TargetType="c1:C1Tag"> 
          <Setter Property="Foreground" Value="#A52A2A" /> 
     </Style> 
</Window.Resources> 
<Grid> 
    <c1:C1MultiSelect x:Name="mselect" ShowDropDownButton="true" HorizontalAlignment="Left"
        Margin="9,35,0,0" VerticalAlignment="Top" Width="270" TagStyle="{StaticResource StyleForTag}" />
</Grid>

Apply Styles to CheckList Items

The following image shows styles applied to the CheckList items in MultiSelect.

To customize the appearance of checklist items in C1MultiSelect, use the following code. Styles an be applied to the Checklist items in C1MultiSelect using the ItemContainerStyle property.

In code

Dim cs As Style = New Style(GetType(C1CheckListItem))
cs.Setters.Add(New Setter(ItemsControl.BackgroundProperty,
                   New SolidColorBrush(Color.FromRgb(240, 248, 255))))
mselect.ItemContainerStyle = cs

Style cs = new Style(typeof(C1CheckListItem));
cs.Setters.Add(new Setter(ItemsControl.BackgroundProperty,
               new SolidColorBrush(Color.FromRgb(240, 248, 255))));
mselect.ItemContainerStyle = cs;

In XAML

<Window.Resources> 
     <Style x:Key="StyleForItems"> 
          <Setter Property="Foreground" Value="#F0F8FF" />
     </Style> 
</Window.Resources> 
<Grid> 
    <c1:C1MultiSelect x:Name="mselect" ShowDropDownButton="true" HorizontalAlignment="Left"
        Margin="9,35,0,0" VerticalAlignment="Top" Width="270" ItemContainerStyle="{StaticResource StyleForItems}" />
</Grid>

Apply Theme

You can customize the appearance of the MultiSelect control using built-in themes or by designing your own themes. For example, you can apply ShinyBlue theme to the control using the following code:

Public Partial Class MainWindow
    Inherits Window

    Public Sub New()
        InitializeComponent()
        Dim myTheme As MyThemes = New MyThemes()
        MyThemes.MyTheme.Apply(mselect)
    End Sub
End Class

Public Class MyThemes
    Private Shared _myTheme As C1ThemeShinyBlue = Nothing

    Public Shared ReadOnly Property MyTheme As C1ThemeShinyBlue
        Get
            If _myTheme Is Nothing Then _myTheme = New C1ThemeShinyBlue()
            Return _myTheme
        End Get
    End Property
End Class

public partial class MainWindow : Window
{
public MainWindow()
{
     InitializeComponent();

     MyThemes myTheme = new MyThemes();
     MyThemes.MyTheme.Apply(mselect);
}
}
public class MyThemes
{
     private static C1ThemeShinyBlue _myTheme = null;
     public static C1ThemeShinyBlue MyTheme
     {
         get
         {
             if (_myTheme == null)
                 _myTheme = new C1ThemeShinyBlue();
             return _myTheme;
         }
     }
}

Similarly, you can apply any other built-in or your own custom theme to the MultiSelect control. For more information on themes, see Theming.

The following image shows the MultiSelect control with MacBlue theme applied to it.

Back to Top