Home Library Learn Samples Downloads Support Community Forums
This topic has not yet been rated - Rate this topic

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.

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.

XAML
Copy 
<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.

XAML
Copy 
<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>
Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.