如何在 WPF 中使用动画使文本块向上移动（浮动）
Ida*_*Sim 1 c# wpf xaml visual-studio
我想知道如何使用 Xaml (WPF) 中的动画使文本块向上移动（或者更好地说是浮动）。
假设我有登录屏幕，并且有两个文本块：用户名和密码。当我点击文本块（用户名或密码）时，文本块会随着动画效果向上移动（浮动），直到文本块穿过框的边界线，然后文本块将停止移动。在同一个动画中，textblock中文字的字体大小变小（比如从12px到6px）。
另外，在同一个动画中，当文本向上移动时，我想为文本添加模糊效果，当文本块向上浮动时开始模糊效果，当文本块穿过框线时恢复正常。
最后，当我在登录屏幕上的其他地方单击时，如果框中没有写入任何内容，文本块将返回到起始点位置。
这是我的代码（不起作用）Xaml：
x:Class="tester.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:tester"
mc:Ignorable="d"
Title="Window1" Height="400" Width="600" >
<Grid>
<Border Margin="246,164,184,175" BorderThickness="1,1,1,1" BorderBrush="Black" >
<Label
Name="Two"
Margin="-1,-11,61,-1"
Width="100" Height="36" FontSize="20"
VerticalAlignment="Top" VerticalContentAlignment="Top"
Foreground="Blue" >
Name
<Label.Effect>
<BlurEffect Radius="0" x:Name="BlurEffect2"/>
</Label.Effect>
<Label.Triggers>
<EventTrigger
RoutedEvent="Label.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard x:Name="FirstLabelName" Completed="FirstLabelName_Completed" >
<DoubleAnimation
Storyboard.TargetName="Two"
Storyboard.TargetProperty="(Label.Height)"
To="20.0" Duration="0:0:0.3"
AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetName="Two"
Storyboard.TargetProperty="(FontSize)"
To="16" Duration="0:0:0.3"
AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetName="BlurEffect2"
Storyboard.TargetProperty="Radius"
To="10" Duration="0:0:0.3"
AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Label.Triggers>
</Label>
</Border>
<Border Margin="0,0,20,50" Height="30" Width="100" BorderThickness="1,1,1,1" BorderBrush="White" >
<Label
Name="one"
Margin="9,-1"
Width="80" Height="30" FontSize="16"
VerticalAlignment="Top" VerticalContentAlignment="Top"
Foreground="Blue" Visibility="Hidden">
Name
<Label.Effect>
<BlurEffect Radius="10" x:Name="BlurEffect"/>
</Label.Effect>
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard x:Name="StoryBoardOne">
<Storyboard x:Name="Effect1" >
<DoubleAnimation
Storyboard.TargetName="one"
Storyboard.TargetProperty="(Label.Height)"
To="30.0" Duration="0:0:0.5"
AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetName="one"
Storyboard.TargetProperty="(FontSize)"
To="12" Duration="0:0:0.3"
AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetName="BlurEffect"
Storyboard.TargetProperty="Radius"
To="0" Duration="0:0:0.5"
AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="StoryBoardOne"></StopStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Border>
</Grid>
</Window>
后退：
private void FirstLabelName_Completed(object sender, EventArgs e)
{
Two.Visibility = Visibility.Hidden;
one.Visibility = Visibility.Visible;
}
因此，您正在寻找的内容被松散地称为内联标签输入。它们并不难，但如果你想要真正的光滑的，它确实需要一些努力来定制控制模板。您需要创建Storyboard动画并通过触发器中的输入/退出操作来触发它们。除非您VisualStateManager在这种情况下使用，否则您将通过VisualState改为触发动画。
这是一个快速的 PoC 示例，说明您可以如何做类似的事情来帮助您入门。但是，我确实故意留下了一些收尾工作，以避免仅仅交出完整的解决方案。除了应该有足够的快速完成和调整以满足您的需求。希望这有帮助，干杯！
结果（以不稳定的 .gif 形式用于视觉辅助）；
...这是由默认 wpfTextBox模板制作的快速示例。
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel.Resources>
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<Style x:Key="CW-Inline-TextBox" TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="35"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Margin" Value="0,25,0,0"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="CW-Inline-input-example">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-6.667">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-25.733">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock">
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="#FF0285BA"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Border x:Name="border" Grid.Row="1"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false"
HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<TextBlock x:Name="textBlock" Text="{TemplateBinding Tag}"
VerticalAlignment="Center" Margin="8,0"
Foreground="Gray" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource CW-Inline-input-example}" />
</Trigger.EnterActions>
<!--
<Trigger.ExitActions>
// In case you wanted to do something cool on exit too..
</Trigger.ExitActions>
-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<TextBox Tag="Your label"
Height="35" Width="150" FontSize="20"
Style="{DynamicResource CW-Inline-TextBox}"/>
<TextBox Tag="Your other label"
Style="{DynamicResource CW-Inline-TextBox}"/>
<TextBox Tag="Another Instance"
Height="75" Width="150" FontSize="15"
Style="{DynamicResource CW-Inline-TextBox}"/>
</StackPanel>
抱歉，我没能早点回复，太忙了。享受 ：）
| 归档时间： |
|
| 查看次数： |
2918 次 |
| 最近记录： |