FloydReme
4/17/2018 - 11:53 AM

Animated RoundTextBox

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>