【问题标题】:How can I detect if textbox has text?如何检测文本框是否有文本?
【发布时间】:2015-10-01 08:41:13
【问题描述】:

我有一个带有动画的文本框,但如果文本框有文本,我希望它停止该动画,如果文本框没有文本,我希望它重新开始?但我不确定这是否可能,因为动画链接到另一个文本框?

TextBoxStyle1 是动画。

TextBoxStyle2 是文本输入的位置。

这是我的代码;

 <Window.Resources>

    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <local:TextInputToVisibilityConverter x:Key="TextInputToVisibilityConverter" />

    <Storyboard x:Key="StoryboardBorder">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
            <EasingColorKeyFrame KeyTime="0" Value="#FFABADB3"/>
            <EasingColorKeyFrame KeyTime="0:0:0.6" Value="#FF00BCD4"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>


    <FontFamily x:Key="MainFont">Arial</FontFamily>

    <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
    <SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FFC1C1C1"/>
    <SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF00BCD4"/>


    <Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
        <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="FontFamily" Value="{StaticResource MainFont}"/>
        <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="StoryboardTextAnimation">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-23.333"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-25.597"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
                                <EasingColorKeyFrame KeyTime="0" Value="#FF8B8B8B"/>
                                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF00BCD4"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="StoryboardTextAnimation_Copy1">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
                                <SplineDoubleKeyFrame KeyTime="0" Value="-23.333"/>
                                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
                                <SplineDoubleKeyFrame KeyTime="0" Value="0.76"/>
                                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
                                <SplineDoubleKeyFrame KeyTime="0" Value="0.76"/>
                                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
                                <SplineDoubleKeyFrame KeyTime="0" Value="-25.597"/>
                                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
                                <SplineColorKeyFrame KeyTime="0" Value="#FF00BCD4"/>
                                <SplineColorKeyFrame KeyTime="0:0:0.2" Value="#FFC1C1C1"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>

                    </ControlTemplate.Resources>

                    <Border x:Name="border" SnapsToDevicePixels="True" BorderThickness="0,0,0,2" BorderBrush="Transparent">
                        <ScrollViewer x:Name="TextBox" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" RenderTransformOrigin="0.5,0.5" Content="Floating Label Text" Background="White" Margin="0,3.75,0,3.25">
                            <ScrollViewer.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </ScrollViewer.RenderTransform>
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            <Setter Property="Text" Value="{x:Null}" />

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

                        <Trigger Property="IsKeyboardFocused" Value="False">
                            <Setter Property="Text" Value="{x:Null}" />


                        </Trigger>


                        <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}"
         Value="True">

                            <DataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource StoryboardBorder}" />
                                <BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation}" />
                            </DataTrigger.EnterActions>

                            <DataTrigger.ExitActions>

                                <BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation_Copy1}" />
                            </DataTrigger.ExitActions>

                        </DataTrigger>


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


    <SolidColorBrush x:Key="brushWatermarkForeground" Color="LightGray" />


    <SolidColorBrush x:Key="TextBox.MouseOver.Border2" Color="#FF7EB4EA"/>
    <Style x:Key="TextBoxStyleNew" TargetType="{x:Type TextBox}">
        <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="StoryboardAnimateText"/>
                    </ControlTemplate.Resources>
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="0,0,0,2" Margin="0,-5,0,0">
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                    </Border>
                    <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.Border2}"/>
                            <Setter Property="BorderThickness" TargetName="border" Value="0"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                            <Setter Property="BorderThickness" TargetName="border" Value="0"/>

                        </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>
    <Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
        <Setter Property="TextWrapping" Value="NoWrap"/>
        <Setter Property="TextTrimming" Value="None"/>
    </Style>
    <SolidColorBrush x:Key="TextBox.MouseOver.Border3" Color="#FF00BCD4"/>
    <SolidColorBrush x:Key="TextBox.Focus.Border2" Color="#FF00BCD4"/>


    <Style x:Key="TextBoxStyle2" TargetType="{x:Type TextBox}">
        <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}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                    </Border>
                    <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>
                    </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>



</Window.Resources>



<Grid Name="grid1" Focusable="True">

    <Grid x:Name="TextBoxes" Margin="23.75,0,-23.75,0">
        <TextBlock Margin="250.449,182.112,374.044,0"   Text="Hint Text" Foreground="{StaticResource brushWatermarkForeground}"
               Visibility="{Binding ElementName=txtUserEntry, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" Height="19.725" VerticalAlignment="Top" Style="{DynamicResource TextBlockStyle1}" />
        <TextBox Name="txtUserEntry"  Background="Transparent" BorderBrush="#FFC1C1C1" Margin="250.449,182.112,352.952,0" Height="25.689" VerticalAlignment="Top" BorderThickness="0,0,0,2" Style="{DynamicResource TextBoxStyle2}" />
        <TextBox x:Name="textBox1" Text="Floating Label Text"   Height="25.689" VerticalAlignment="Top" Margin="250.449,182.112,352.952,0" Style="{DynamicResource TextBoxStyle1}" BorderThickness="1" Foreground="#FFC1C1C1" Background="White" BorderBrush="#FFC1C1C1"/>
    </Grid>

</Grid>

【问题讨论】:

  • 你试过 textBox1.text 吗?
  • 为什么这个被降价了?我是新手,所以如果我的问题不是很好,我很抱歉。我做了,但是没有用。
  • @WalterM 这并不愚蠢,只是不清楚他想引用什么 TextBox 样式。他有 2 种 TextBox 样式,我刚刚发现只涉及 TextBox 样式 1。这个问题非常接近一个完美的问题,只是不清楚。它当然不应该像那样被否决。
  • 请注意,他可能希望在 XAML 中执行此操作,而不是在代码中。而且我敢肯定,不是每个人都知道如何在 XAML 中做到这一点。
  • 他是她哈哈 .. 无论如何我没有意识到这在 XAML 中是可能的?

标签: c# wpf animation textbox storyboard


【解决方案1】:

不知道为什么投反对票,因为解决这个问题对于任何希望磨练 WPF 样式/模板技能的人来说都是一个很好的练习。

在创建样式/模板时需要记住两件重要的事情,尤其是在涉及触发器时。

  1. 触发器的顺序很重要。
  2. 如果您发现自己摸不着头脑,您需要换个角度看待它并简化它。

在你得到的时候,现在是继续做custom control的好时机,事实上我在下面提供的例子就是这样。

对于您正在尝试做的事情,您有 3 种可能的结果需要测试。如果我们退后几步看看,我们可以确切地看到我们需要做什么,我会分解它。

  1. 聚焦
    • 为边框和标签着色(无论如何都会发生这种情况)
  2. !IsFocused & Text.Length = 0
    • ENTER:降低标签并调整其大小。
    • 退出:提升标签并调整其大小。
  3. IsFocused & Text.Length = 0
    • ENTER:显示提示。
    • 退出:隐藏提示。

就是这样,我们只需要三个触发器,一个触发器和两个 MultiTrigger。您可以发挥创意并使其仅作为一个触发器,但可维护性和可读性将是可怕的。

让我们从自定义控件的代码开始:

public class AnimatedTextBox : TextBox
{
    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register("Label", typeof (string), typeof (AnimatedTextBox),
            new FrameworkPropertyMetadata(null));

    public static readonly DependencyProperty HintProperty =
        DependencyProperty.Register("Hint", typeof (string), typeof (AnimatedTextBox),
            new FrameworkPropertyMetadata(null));

    static AnimatedTextBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof (AnimatedTextBox),
            new FrameworkPropertyMetadata(typeof (AnimatedTextBox)));
    }

    public string Label
    {
        get { return (string) GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    public string Hint
    {
        get { return (string) GetValue(HintProperty); }
        set { SetValue(HintProperty, value); }
    }
}

我刚刚制作了 Label 和 Hint 字符串以保持简单,您可以将它们设为对象并扩展一些可能性。

现在是样式:

<Color x:Key="Color.Control.Border.Focus">#FF00BCD4</Color>
    <SolidColorBrush x:Key="SolidColorBrush.Control.Border" Color="#FFABADB3" />
    <SolidColorBrush x:Key="SolidColorBrush.Hint" Color="LightGray" />

    <Style TargetType="{x:Type local:AnimatedTextBox}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
        <Setter Property="BorderBrush" Value="{StaticResource SolidColorBrush.Control.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 local:AnimatedTextBox}">
                    <ControlTemplate.Resources />
                    <Border x:Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="0,0,0,2"
                            SnapsToDevicePixels="True">
                        <StackPanel>
                            <TextBlock x:Name="LabelTextBlock"
                                       Focusable="False"
                                       Foreground="{TemplateBinding BorderBrush}"
                                       RenderTransformOrigin="0.5,0.5"
                                       Text="{TemplateBinding Label}">
                                <TextBlock.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX=".75" ScaleY=".75" />
                                        <TranslateTransform X="0" Y="0" />
                                    </TransformGroup>
                                </TextBlock.RenderTransform>
                            </TextBlock>
                            <Grid>
                                <ScrollViewer x:Name="PART_ContentHost"
                                              Focusable="false"
                                              HorizontalScrollBarVisibility="Hidden"
                                              VerticalScrollBarVisibility="Hidden" />
                                <TextBlock x:Name="HintTextBlock"
                                           Margin="5 0 0 0"
                                           Focusable="False"
                                           Foreground="{StaticResource SolidColorBrush.Hint}"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           Text="{TemplateBinding Hint}" />
                            </Grid>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Duration="0:0:0.6"
                                                        Storyboard.TargetProperty="BorderBrush.Color"
                                                        To="{StaticResource Color.Control.Border.Focus}" />
                                        <ColorAnimation Duration="0:0:0.6"
                                                        Storyboard.TargetName="LabelTextBlock"
                                                        Storyboard.TargetProperty="Foreground.Color"
                                                        To="{StaticResource Color.Control.Border.Focus}" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Duration="0:0:0.6" Storyboard.TargetProperty="BorderBrush.Color" />
                                        <ColorAnimation Duration="0:0:0.6"
                                                        Storyboard.TargetName="LabelTextBlock"
                                                        Storyboard.TargetProperty="Foreground.Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0" />
                                <Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="false" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="LabelTextBlock"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                         To="1" />
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="LabelTextBlock"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                         To="1" />
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="LabelTextBlock"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)"
                                                         To="15" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="LabelTextBlock"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" />
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="LabelTextBlock"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" />
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="LabelTextBlock"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0" />
                                <Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="true" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="HintTextBlock"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="HintTextBlock"
                                                         Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

样式是你所拥有的 95%,我只是将它组合成一个控件。我真正改变的唯一一件事是我将模板设置为默认为“IsFocused”和“HasText”状态。这个想法是我们的​​控件总是努力处于该状态,因此更容易将其绊倒并将其设置为其他状态。反之,还有一些 if 和 buts,因此为最小公分母编码对我们有利。

用法如下:

<Grid>
    <StackPanel VerticalAlignment="Center">
        <local:AnimatedTextBox Width="300"
                               Margin=" 0 0 0 15"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Hint="Hint 1"
                               Label="Label 1" />
        <local:AnimatedTextBox Width="300"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Hint="Hint 2"
                               Label="Label 2" />
    </StackPanel>
</Grid>

它可能并不完美,但希望它能让你走上正轨。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-02-14
    • 2013-12-03
    • 2012-02-18
    • 2010-12-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多