WatermarkedTextBox Styles and Templates

[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

This topic describes the styles and templates for the WatermarkedTextBox control. For more information, see Styling and Templating Overview.

WatermarkedTextBox

The following table lists the elements for the WatermarkedTextBox control.

WatermarkedTextBox Element	Description
RootElement	The root of the control.
WatermarkElement	The element that is used to display the watermark.

The following table lists the states for the WatermarkedTextBox control.

WatermarkedTextBox State	Description
Normal State	The default state.
Watermarked State	The state that is triggered when the watermark is visible.
MouseOver State	The state that is triggered when the mouse pointer is positioned over the control.
MouseOver Watermarked State	The state that is triggered when the mouse pointer is positioned over the control and the watermark is visible.
Disabled State	The state that is triggered when the control is disabled.
Disabled Watermarked State	The state that is triggered when the mouse pointer is positioned over the control and the watermark is visible.
Focused State	The state that is triggered when the control has the focus.

Example

The following example shows how to add a custom style as a StaticResource. For more information, see Styling and Templating Overview. In this example, the StaticResource refers to an x:Key attribute value that you must add to the Style element when you modify it for your project.

<WatermarkedTextBox x:Name="watermarkedTextBox1"
    Style="{StaticResource newWatermarkedTextBoxStyle}" />

The following example shows the default styles and templates for the WatermarkedTextBox control. To customize these styles, add the following XAML to your project, add an x:Key attribute to the Style element, and then reference the style as shown in the previous example.

<Style TargetType="local:WatermarkedTextBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">

  <Setter Property="BorderBrush" Value="#FF000000"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="FontSize" Value="11"/>
  <Setter Property="FontFamily" Value="Trebuchet MS"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:WatermarkedTextBox">
        <Grid x:Name="RootElement" >
          <Grid.Resources>
            <SolidColorBrush x:Key="Background" Color="#FF003255"/>
            <SolidColorBrush x:Key="BorderBrush" Color="#FF000000"/>
            <SolidColorBrush x:Key="AccentBrush" Color="#FFFFFFFF"/>
            <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF"/>
            <SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>


            <LinearGradientBrush x:Key="FocusedStrokeBrush" StartPoint="0.5,0" EndPoint="0.5,1">
              <GradientStop Color="#B2FFFFFF" Offset="0"/>
              <GradientStop Color="#51FFFFFF" Offset="1"/>
              <GradientStop Color="#66FFFFFF" Offset="0.325"/>
              <GradientStop Color="#1EFFFFFF" Offset="0.325"/>
            </LinearGradientBrush>

            <Storyboard x:Key="Disabled State">
              <DoubleAnimation Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="ELEMENT_Content" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="WatermarkElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.0"/>
            </Storyboard>
            <Storyboard x:Key="Disabled Watermarked State">
              <DoubleAnimation Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="ELEMENT_Content" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="WatermarkElement" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.0"/>
            </Storyboard>
            <Storyboard x:Key="Normal State">
              <DoubleAnimation Storyboard.TargetName="ELEMENT_Content" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="WatermarkElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.0"/>
            </Storyboard>
            <Storyboard x:Key="Focused State">
              <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.1"/>
              <DoubleAnimation Storyboard.TargetName="ELEMENT_Content" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="WatermarkElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.0"/>
            </Storyboard>
            <Storyboard x:Key="MouseOver State">
              <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.1"/>
              <DoubleAnimation Storyboard.TargetName="ELEMENT_Content" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="WatermarkElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.0"/>
            </Storyboard>
            <Storyboard  x:Key="Normal Watermarked State">
              <DoubleAnimation Storyboard.TargetName="ELEMENT_Content" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="WatermarkElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
            </Storyboard>
            <Storyboard x:Key="MouseOver Watermarked State">
              <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.1"/>
              <DoubleAnimation Storyboard.TargetName="ELEMENT_Content" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.0"/>
              <DoubleAnimation Storyboard.TargetName="WatermarkElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
            </Storyboard>
          </Grid.Resources>
          <Border x:Name="Border" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}">
            <Grid>
              <Grid  Margin="2">
                <Border x:Name="ELEMENT_Content" Padding="{TemplateBinding Padding}"/>
                <controls:ContentControl
                  x:Name="WatermarkElement"
                  IsTabStop="False"
                  IsHitTestVisible="False"
                  Content="{TemplateBinding Watermark}"
                  Foreground="{StaticResource WatermarkBrush}"
                  Background="{TemplateBinding Background}"
                  FontFamily="{TemplateBinding FontFamily}"
                  FontSize="{TemplateBinding FontSize}"
                  FontStretch="{TemplateBinding FontStretch}"
                  FontStyle="{TemplateBinding FontStyle}"
                  FontWeight="{TemplateBinding FontWeight}"
                  Padding="{TemplateBinding Padding}"
                  Margin="0,-2,0,0"/>
              </Grid>
              <Rectangle x:Name="DisabledVisual" Opacity="0"  StrokeThickness="1" Stroke="{StaticResource DisabledBrush}" Fill="{StaticResource DisabledBrush}"/>
              <Grid x:Name="DownStroke">
                <Rectangle Stroke="{StaticResource BorderBrush}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.025" Margin="1,1.75,1,1"/>
                <Rectangle Stroke="{StaticResource BorderBrush}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.025" Margin="1,1.5,1,1"/>
                <Rectangle Stroke="{StaticResource BorderBrush}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.025" Margin="1,1.25,1,1"/>
                <Rectangle Stroke="{StaticResource BorderBrush}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.025" Margin="1,1,1,1"/>
              </Grid>
              <Grid x:Name="FocusVisual" Opacity="0">
                <Rectangle RadiusX="1" RadiusY="1" Margin="2"  Stroke="{StaticResource AccentBrush}" StrokeThickness="1"/>
                <Rectangle RadiusX="1" RadiusY="1"  Stroke="{StaticResource Background}" StrokeThickness="2"/>
                <Rectangle RadiusX="1" RadiusY="1"  Stroke="{StaticResource FocusedStrokeBrush}" StrokeThickness="2"/>
              </Grid>
            </Grid>
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Other Resources

Control Styles and Templates

Styling and Templating Overview