WatermarkedTextBox Styles and Templates
This topic describes the styles and templates for the WatermarkedTextBox control. For more information, see Styling and Templating Overview.
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. |
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>