ComponentOne MultiSelect for WPF
Features / Appearance
In This Topic
    Appearance
    In This Topic

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

    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

    XAML
    Copy Code
    <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>
    
    Back to Top

    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

    XAML
    Copy Code
    <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>
    
    Back to Top

    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

    XAML
    Copy Code
    <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>
    
    Back to Top

    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