This project is read-only.

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:

HighlightOnFocus.png

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:

Required.png

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:

EditTracker.png

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:

ElementTracker.png

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:

ErrorTemplate.png
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:

EditContextMenu.png

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:

EditorToolbar.png
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:

SmartTag.png
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:

CueBanner.png

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:

ApplyDataAnnotations.png
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:

DescriptionDisplayControl.png

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:

EditorToolbar.png

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.

GenericAdornerPlacementSmall.png

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

GenericAdornerDemo.png

Last edited Jul 13, 2011 at 12:24 PM by JoergNeumann, version 25

Comments

No comments yet.