c# - 如何在WPF中使用动画使文本 block 向上移动( float )

Question

我想知道如何在 Xaml (WPF) 中使用动画使文本 block 向上移动(或者更准确地说是向上 float )。

假设我有登录屏幕，并且有两个文本 block :用户名和密码。当我单击文本 block (用户名或密码)时，文本 block 将向上移动(向上 float )并带有动画效果，直到文本 block 越过框的边界线，然后文本 block 将停止移动。在同一个动画中，文本 block 中的文本字体大小变小(例如，从 12px 到 6px)。

此外，在同一动画中，当文本向上移动时，我想为文本添加模糊效果，模糊效果在文本 block 向上 float 时开始，并在文本 block 越过框线时恢复正常。

最后，当我在登录屏幕上的其他地方单击时，如果框中没有任何内容，文本 block 将返回到起点位置。

我发现了类似的东西 here

这是我的代码(行不通)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;
        }

Answer 1

因此，您正在寻找的内容被粗略地称为内联标签输入。它们并不难，但如果你想要真正的光滑的，那么定制控制模板确实需要一些努力。您需要创建 Storyboard 动画并通过触发器中的进入/退出操作触发它们。除非您正在使用 VisualStateManager，否则您将通过 VisualState 触发动画。

这是一个快速的 PoC 示例，说明您如何做类似的事情来开始。然而，我确实故意留下了一些收尾工作，以避免只交出一个完整的解决方案。除了应该有足够的快速完成和调整以满足您的需求。希望这会有所帮助，干杯!

结果(以断断续续的 .gif 形式提供视觉辅助)；

...这是从默认 wpf TextBox 模板制作的快速示例。

<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>

很抱歉，我很忙，没能尽快回复。享受:)