Animated RoundTextBox
<Page.Resources>
<Style x:Key="TextBoxTriggers" TargetType="{x:Type TextBox}">
<Setter Property="Width" Value="450"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border CornerRadius="10"
Background="#FFBBDEFB">
<Grid x:Name="StyleGrid">
<TextBox x:Name="Watermark"
Background="{x:Null}"
BorderBrush="{x:Null}"
Foreground="#FF517296"
HorizontalAlignment="Left"
VerticalAlignment="Center"
SelectionBrush="#FF324D6A"
BorderThickness="0"
Margin="10,8,0,6"
MaxLength="30"
Width="430"
GotFocus="Watermark_GotFocus"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True" SourceName="Watermark"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Text" TargetName="Watermark" Value=""/>
<Setter Property="Width" Value="600" TargetName="Watermark"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False" SourceName="Watermark"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Text" TargetName="Watermark" Value="Search..."/>
<Setter Property="FontStyle" Value="Italic" TargetName="Watermark"/>
<Setter Property="Foreground" Value="#BE517296" TargetName="Watermark"/>
</MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
Duration="0:0:0.25"
FillBehavior="HoldEnd"
To="600"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
Duration="0:0:0.25"
To="450"
FillBehavior="HoldEnd"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Page.Resources>