Задать вопрос
@saphire13
Системный администратор
c#

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

Всем доброго дня.
Сильно не пинайте, но есть такой вопрос:
Имеется 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>
  • Вопрос задан
  • 1215 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
korobok
@korobok
Специалист по машинному обучению (Python)
Самый простой способ - это вынести анимацию в ресурс. К сожалению, 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.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Разработчик C# (криптография)
Avanpost
от 200 000 ₽
Middle+ .Net(C#) developer
Zam.io
от 200 000 до 300 000 ₽
C# разработчик
САТЕЛ
от 120 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Консультация по улучшению качества рендера
24 апр. 2024, в 14:24
5000 руб./за проект
Добавить WalletConnect к сайту на React
24 апр. 2024, в 14:02
5000 руб./за проект
HTML-вёрстка шаблонов для SaaS-сервиса
24 апр. 2024, в 13:45
15000 руб./за проект
Ещё заказы