Adorners
HighlightOnFocus Adorner
The
HighlightOnFocus Adorner highlights the focused element. It can applied via the
Annotations.HighlightOnFocus attached property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.HighlightOnFocus="True"
Result:
Required Field Adorner
The
Required Field Adorner shows a "required" icon next to the associated control. It can applied via the
Annotations.IsRequired attached property. The positioning of the icon can be set via
RequiredImageAlignment property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.IsRequired="True"
uia:Annotations.RequiredImageAlignment="Right"
Result:
Edit Tracker Adorner
The
Edit Tracker Adorner shows a "change" icon at the associated input control, if the user changes the value. It can applied via the
Annotations.ShowEditTracker attached property. The positioning of the icon can be set via
TrackerImageAlignment property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.ShowEditTracker="True"
uia:Annotations.TrackerImageAlignment="Right"
Result:
Element Tracker Adorner
The
Element Tracker Adorner shows an icon at the focused element. It can applied via the
Annotations.ShowElementTracker attached property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.ShowElementTracker="True"
Result:
Error Template Adorner
The
Error Template Adorner shows an error icon next to a data binded element. It can applied via the
Annotations.AttachErrorTemplate attached property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
Text="{Binding Name, ValidatesOnDataErrors=True}"
uia:Annotations.AttachErrorTemplate="True"
Result:

The
Error Template Adorner is only available in the WPF version of TT.UIA.
EditContextMenu Adorner
The
EditContextMenu Adorner attaches an edit context menu to the accociates element. It can applied via the
Annotations.AttachEditContextMenu attached property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.AttachEditContextMenu="True"
Result:
Editor Toolbar Adorner
The
Editor Toolbar Adorner attaches an editor toolbar to the accociates element. It can applied via the
Annotations.AttachEditorToolbar attached property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.AttachEditorToolbar="True"
Result:

If you need a custom toolbar, use the
GenericAdorner class (only in the WPF version of TT.UIA).
SmartTag Adorner
The
SmartTag Adorner attaches a smart Tag next to the accociates element. It can applied via the attached properties
Annotations.AttachSmartTag and
Annotations.SmartTagMenu .
Declaration:
...
<Window.Resources>
<ContextMenu x:Key="editSmartTagMenu">
<MenuItem Name="checkNameMenuItem" Header="_Validate Name" Click="checkNameMenuItem_Click">
<MenuItem.Icon>
<Image Source="/Images/Check.png" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
<Window.Resources>
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.AttachEditContextMenu="True"
uia:Annotations.SmartTagMenu="{StaticResource editSmartTagMenu}" />
...
Result:

In the Silverlight version you can use the
Menu and
MenuItem controls, that are included.
CueBanner Adorner
The
CueBanner Adorner shows a watermark text on input controls like
TextBox,
ComboBox and
DatePicker. It can applied via the
Annotations.CueBanner attached property.
Declaration:
<TextBox xmlns:uia="clr-namespace:Thinktecture.UIAnnotations;assembly=Thinktecture.UIAnnotations"
uia:Annotations.CueBanner="Enter your name!"
Result:
Assign adorners implicitly via Data Annotations
If you put some data annotations on the properties of your model classes, the
Annotation class can reflect it and is able to assign the associated adorners, and do property changes (
IsEnabled,
Format property on bindings, .etc.). For example, if you declare something like this...
using System.ComponentModel.DataAnnotations;
public class Person
{
[Required]
[Display(Prompt = "Enter the full name!")]
public string Name { get; set; }
}
...you can set the
Annotations.ApplyDataAnnotations attached property on window level.
<Window uia:ApplyDataAnnotations="True">
<TextBox Text="{Binding Person.Name}" />
</Window>
Result:

The following data annotations are reflected by the
Annoations class:
- EditableAttribute.AllowEdit: IsEnabled property on associated control is set.
- RequiredAttribute: Attaches the Required Adorner to the associated control.
- StringLengthAttribute.MaximumLength: MaxLength property is set on the associated TextBox, ComboBox or DatePicker.
- DisplayFormatAttribute.DataFormatString: The format is applied to the Binding object of the associated control.
- DisplayFormatAttribute.NullDisplayText: Attaches the CueBanner Adorner to the associated control.
Additional the
Annotations class can map the
DisplayAttribute.Description text to a different element of the window. This can be usefull, if you want to show the description of the focused field in a status bar or something like that.
using System.ComponentModel.DataAnnotations;
public class Person
{
[Display(Description="The name of the person.")]
[Required]
[Display(Prompt = "Enter the full name!")]
public string Name { get; set; }
}
<Window
uia:ApplyDataAnnotations="True"
uia:Annotations.DescriptionDisplayControl="{Binding ElementName=descriptionLabel}"
uia:Annotations.DescriptionDefaultText="Ready.">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Text="{Binding Person.Name}" VerticalAlignment="Center" Margin="40,0,40,0" />
<Label x:Name="descriptionLabel" VerticalAlignment="Bottom"/>
</Grid>
</Window>
Result:
Generic Adorner
With the
Generic Adorner you are able to define any element as an adorner and attach it to an other element. You can define a generic adorner using the
GenericAdorners class.
The
Generic Adorner is only available in the WPF version of TT.UIA.
Declaration:
<Window ...>
<Window.Resources>
<ToolBar x:Key="adornerToolbar">
<Button ToolTip="Undo" Command="UndoCommand">
<Image Source="/Images/Undo.png" Stretch="None" />
</Button>
<Button ToolTip="Redo" Command="RedoCommand">
<Image Source="/Images/Redo.png" Stretch="None" />
</Button>
<Button ToolTip="Delete" Command="DeleteCommand">
<Image Source="/Images/Delete.png" Stretch="None" />
</Button>
</ToolBar>
</Window.Resources>
<TextBox
am:GenericAdorners.AdornerElement="{StaticResource adornerToolbar}"
am:GenericAdorners.VerticalAlignment="Top"
am:GenericAdorners.HorizontalAlignment="Right"
am:GenericAdorners.Placement="VerticalOuterHorizontalInner"
am:GenericAdorners.Margin="0,0,0,0"
am:GenericAdorners.Visible="True"
am:GenericAdorners.VisibleOnFocus="True" />
</Window>
Result:

Set the
VisibleOnFocus property if you want that the adorner only appears if the associated control has the focus.
You can control the placement of the Adorner using the properties HorizontalAlignment, VerticalAlignment and Placement. Check the image below for the possible combinations.

In the demos you find a GenericAdorner sample that shows the usage.
