Как сделать запуск анимации по событию WPF?

Question

[Александр]

Всем доброго дня.
Сильно не пинайте, но есть такой вопрос:
Имеется TextBox, под ним два TextBlock, при щелчке мышкой (начале ввода) в TextBox'е должна запускаться анимация, которая поднимет TextBlock над TextBox'ом, на подобии подсказки. Проблема в том, что не знаю на что завязать запуск анимации. По логике завязывать надо на TextBox.MouseLeftButtonUp, или начало ввода. Есть идея сделать кастомный RoutedEvent... Короче, я запутался :( Пока, чтобы посмотреть как все это выглядеть будет, завязал запуск триггеров на Window.Loaded. Подскажите, куда копать???

<Window.Resources>
        <PathGeometry x:Key="pathUsernameRU">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,10"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
        <PathGeometry x:Key="pathUsernameEN">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,70"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <Grid Width="300" Height="100">
        <Canvas>
            <TextBox Canvas.Top="35" Height="30" Width="300" BorderThickness="0"></TextBox>
            <Rectangle Canvas.Top="60" Fill="Black" Width="300" Height="2"></Rectangle>
            <TextBlock Text="Имя Пользователя" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0"></TextBlock>
            <TextBlock Text="Username" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="0"
                                                         To="1"
                                                         Duration="0:0:0.2">
                                        </DoubleAnimation>
                                        <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
                                                                  PathGeometry="{StaticResource pathUsernameEN}"
                                                                  Duration="0:0:0.2"
                                                                  Source="Y">
                                        </DoubleAnimationUsingPath>
                                    </Storyboard>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
            <TextBlock Text="Имя пользователя" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="0"
                                                         To="1"
                                                         Duration="0:0:0.2">
                                        </DoubleAnimation>
                                        <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
                                                                  PathGeometry="{StaticResource pathUsernameRU}"
                                                                  Duration="0:0:0.2"
                                                                  Source="Y">
                                        </DoubleAnimationUsingPath>
                                    </Storyboard>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
        </Canvas>
    </Grid>

Answer 1

[Роман Черешнев]

Самый простой способ - это вынести анимацию в ресурс. К сожалению, MouseLeftButtonUp обрабатывается самим TexBox'ом поэтому пользоваться им не получится. Можно использовать PreviewMouseLeftButtonDown.

<Window.Resources>
        <PathGeometry x:Key="pathUsernameRU">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,10"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
        <PathGeometry x:Key="pathUsernameEN">
            <PathFigure StartPoint="0,45">
                <PolyLineSegment Points="0,70"></PolyLineSegment>
            </PathFigure>
        </PathGeometry>
        <Storyboard x:Key="Storyboard">
        	<DoubleAnimation Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="Opacity" 
				From="0" To="1"  Duration="0:0:0.2"></DoubleAnimation>
			<DoubleAnimationUsingPath Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="(Canvas.Top)" 
				PathGeometry="{StaticResource pathUsernameEN}" Duration="0:0:0.2" Source="Y"/>
        	<DoubleAnimation Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Opacity" From="0" To="1" 
				Duration="0:0:0.2" />
            <DoubleAnimationUsingPath Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(Canvas.Top)" 
				PathGeometry="{StaticResource pathUsernameRU}" Duration="0:0:0.2" Source="Y"/>
        </Storyboard>
    </Window.Resources>
    <Grid Width="300" Height="100">
        <Canvas>
            <TextBox x:Name="textBox" Canvas.Top="35" Height="30" Width="300" BorderThickness="0">
				<TextBox.Triggers>
					<EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
							<BeginStoryboard Storyboard="{StaticResource Storyboard}"/>	
					</EventTrigger>
				</TextBox.Triggers>
			</TextBox>
            <Rectangle Canvas.Top="60" Fill="Black" Width="300" Height="2"></Rectangle>
            <TextBlock x:Name="textBlock" Text="Username" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0"/>
            <TextBlock x:Name="textBlock1" Text="Имя пользователя" Canvas.Top="45" Foreground="#7BBFD3" Opacity="0"/>

        </Canvas>
    </Grid>

После этого появляется веселый эффект, когда при нажатии каждый раз вылезает подсказка. Можно от этого избавиться немного поменяв анимацию и убрав From

<Storyboard x:Key="Storyboard">
        	<DoubleAnimation Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="Opacity" 
				 				To="1"  Duration="0:0:0.2"/>
        	<DoubleAnimation Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Opacity"  
								To="1" Duration="0:0:0.2" />
        	<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
								Storyboard.TargetName="textBlock" Duration="0:0:0.2" To="70"/>
        	<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
								Storyboard.TargetName="textBlock1" Duration="0:0:0.2" To="20"/>
</Storyboard>

Но чаще всего для подсказок используют ToolTip.

Comments

[Александр]

Спасибо огромное! Именно то, что нужно, с небольшими допиливаниями!

Это не совсем подсказка, скорее внешний вид. Хочу сделать нечто на подобии этого
metroui.org.ua/inputs.html
В самом низу, modern inputs

А вообще, RoutedEvent свой реально сделать? Вроде как: появилось событие PreviewMouseLeftButtonDown на неком элементе, где то в коде посадить "слушателя" того же типа и затем в RoutedEvent на необходимом триггере ссылаться на него?