在网格焦点/点击上触发动画

Question

我有两个文本框的一个纯粹的动画和另一个使用。动画工作得很好，除了当文本框不集中时，我希望它能反转动画，这是可能的，如果你使用退出动作，但这就不允许我使用下面的文本框，因为它认为这是一个退出动作。所以我想知道是否有可能在网格被按下时只反转动画?或者甚至排除其他文本框?

我怎样才能做到这一点?这是我的代码。

 <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" />
    <TextBox Name="txtUserEntry" Background="Transparent" BorderBrush="{x:Null}" Margin="250.449,182.112,352.952,0" Height="25.689" VerticalAlignment="Top" BorderThickness="0" />
    <TextBox x:Name="textBox" Text="Floating Label Text"   Height="25.689" VerticalAlignment="Top" Margin="250.449,182.112,352.952,0" Style="{DynamicResource TextBoxStyle1}" BorderThickness="1" Foreground="#FF8B8B8B" Background="White"/>
  <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="15"/>
            <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="Storyboard1">
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FFABADB3"/>
                                    <EasingColorKeyFrame KeyTime="0:0:0.6" Value="#FF018CFF"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="StoryboardTextAnimation">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-29.961"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-21.265"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.715"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.715"/>
                                </DoubleAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FF8B8B8B"/>
                                    <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF00A2FF"/>
                                </ColorAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="TextBox">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <FontWeight>Normal</FontWeight>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                        <DiscreteObjectKeyFrame.Value>
                                            <FontWeight>Bold</FontWeight>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="StoryboardTextAnimation_Copy1">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="-29.961"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="-21.265"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="0.715"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="0.715"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
                                    <SplineColorKeyFrame KeyTime="0" Value="#FF00A2FF"/>
                                    <SplineColorKeyFrame KeyTime="0:0:0.3" Value="#FF8B8B8B"/>
                                </ColorAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="TextBox">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <FontWeight>Bold</FontWeight>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                        <DiscreteObjectKeyFrame.Value>
                                            <FontWeight>Normal</FontWeight>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>


                        </ControlTemplate.Resources>
                        <Border x:Name="border" SnapsToDevicePixels="True" BorderThickness="0,0,0,2" BorderBrush="#FFABADB3">
                            <ScrollViewer x:Name="TextBox" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" RenderTransformOrigin="0.5,0.5" Content="Floating Label Text" Background="White">
                                <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"/>
                            </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 Storyboard1}" />
                                    <BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation}" />
                                </Trigger.EnterActions>

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

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

        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <local:TextInputToVisibilityConverter x:Key="TextInputToVisibilityConverter" />
        <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>

   public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
    private void MainWindow_MouseDown(object sender, MouseButtonEventArgs e)
    {
        grid1.Focus();

    }

}
public class TextInputToVisibilityConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        // Always test MultiValueConverter inputs for non-null
        // (to avoid crash bugs for views in the designer)
        if (values[0] is bool && values[1] is bool)
        {
            bool hasText = !(bool)values[0];
            bool hasFocus = (bool)values[1];
            if (hasFocus || hasText)
                return Visibility.Collapsed;
        }
        return Visibility.Visible;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
} }

Answer 1

将两个文本框包装在一个容器中(一个Grid就足够了):

<Grid x:Name="TextBoxes">
    <TextBox Name="txtUserEntry" Background="Transparent" BorderBrush="{x:Null}" Margin="250.449,182.112,352.952,0" Height="25.689" VerticalAlignment="Top" BorderThickness="0" />
    <TextBox x:Name="textBox" Text="Floating Label Text"   Height="25.689" VerticalAlignment="Top" Margin="250.449,182.112,352.952,0" Style="{DynamicResource TextBoxStyle1}" BorderThickness="1" Foreground="#FF8B8B8B" Background="White"/>
</Grid>

这样你就可以使用包含Grid的IsKeyboardFocusWithin属性，这将是True，无论你的哪个文本框是聚焦的。

为了尽可能少地更改现有代码，您可以简单地更改Trigger并使其成为DataTrigger，并将其绑定到Grid祖先的IsKeyboardFocusWithin属性。

<Trigger Property="IsKeyboardFocused" Value="true">
    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type Grid}}"
             Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
        <BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation}" />
    </Trigger.EnterActions>
</DataTrigger>

添加您需要的ExitActions，并且它们应该只在 textbox不集中时执行。