Styling

TagEditor allows you to style the UI of the control along with the tags to change its overall appearance. For example, it lets you customize its background color, foreground color and font styles. Let us explore how to style the TagEditor control and its tags in the following sections.

Apply Style to the TagEditor

The following image shows styles applied to the TagEditor control.

To apply style to the TagEditor, use the following code. This example use the sample created in Quick Start topic.

te.DisplayMode = DisplayMode.Text;
//styling tageditor
te.Background = new SolidColorBrush(Color.FromRgb(204, 230, 255));
//works only when tags are displayed as text
te.Foreground = new SolidColorBrush(Color.FromRgb(0, 119, 230));
te.FontFamily = new FontFamily("Cambria");
te.FontSize = 20;

Apply Style to the Tags

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

To apply style to the tags in the TagEditor control, use the following code. Tags styles in TagEditor can be accessed via the TagStyle property. This example use the sample created in Quick Start topic.

//styling for tags
Style ts = new Style(typeof(C1Tag));
ts.Setters.Add(new Setter(ItemsControl.ForegroundProperty,
               new SolidColorBrush(Color.FromRgb(165, 42, 42))));
ts.Setters.Add(new Setter(ItemsControl.BackgroundProperty,
               new SolidColorBrush(Color.FromRgb(255, 240, 255))));
te.TagStyle = ts;