user2714376
user2714376

Reputation: 9

how can i make animation on TextBox?

the nex code is simple code to make animation on a text box .

i need to but it in a style to make animation on more thane one text box .

i try but i failed .

th code

 <TextBox  Grid.Column=" 1" Margin=" 5">
            <TextBox.Background >
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop x:Name="sd1" Color="White" Offset="0"/>
                    <GradientStop x:Name="sd2" Color="#FF5F5F5F" Offset="1"/>
                </LinearGradientBrush>
            </TextBox.Background>
            <TextBox.Triggers >
                <EventTrigger RoutedEvent="GotFocus">
                    <BeginStoryboard >
                        <Storyboard >
                            <DoubleAnimation  Storyboard.TargetName="sd1" Storyboard.TargetProperty="Offset" From="0" To="1" Duration="0:0:2"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="LostFocus" >
                    <BeginStoryboard >
                        <Storyboard >
                            <DoubleAnimation  Storyboard.TargetName="sd1" Storyboard.TargetProperty="Offset" From="1" To="0" Duration="0:0:2"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBox.Triggers>
        </TextBox>

thank you ....

Upvotes: 0

Views: 2832

Answers (1)

rhe1980
rhe1980

Reputation: 1577

style as resource:

<Window.Resources>
    <Style x:Key="TextBoxStyle" TargetType="TextBox">
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="#FF5F5F5F" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="GotFocus">
                <BeginStoryboard >
                    <Storyboard >
                        <DoubleAnimation Storyboard.TargetProperty="Background.GradientStops[0].Offset" From="0" To="1" Duration="0:0:2"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="LostFocus" >
                <BeginStoryboard >
                    <Storyboard >
                        <DoubleAnimation Storyboard.TargetProperty="Background.GradientStops[0].Offset" From="1" To="0" Duration="0:0:2"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

and than your textbox:

 <TextBox  Grid.Column=" 1" Margin=" 5" Style="{StaticResource TextBoxStyle}"/>

Upvotes: 2

Related Questions