Wpf：使用保持结束动画幻灯片转换

Question

我有一个文本框，其中可见我正在设置动画文本框中的幻灯片。

风格：

<Style x:Key="CustomTextBoxStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform/>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                            <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Themes:ListBoxChrome>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </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>
                <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                                 From="20" To="0" 
                                                 DecelerationRatio="0.5" 
                                                 Duration="00:00:01.000"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>

现在的问题是整个文本框从右侧滑入

而我希望右端固定而不是漂浮。

Answer 1

我不确定您的其他用户界面是什么样的，但我会将控件置于DockPanel内，停靠在右侧，然后为{{1}设置动画。 } property。

Answer 2

感谢克里斯让我的工作

我将发布工作解决方案以供参考。

风格：

 <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetProperty="Width"
                                                 From="0" To="150" 
                                                 DecelerationRatio="0.5" 
                                                 Duration="00:00:01.000"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>

和xaml：

<DockPanel Width="150" Height="30">
            <TextBox x:Name="TextBox" 
                 TextChanged="TextBox_OnTextChanged"
                 Text="{Binding SearchedText, RelativeSource={RelativeSource AncestorType={x:Type UserControl}},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                 Visibility="{Binding IsSearching, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                 HorizontalAlignment="Right" Style="{DynamicResource CustomTextBoxStyle}">
                <TextBox.InputBindings>
                    <KeyBinding Key="Escape" Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}},Path=CancelCommand}" />
                </TextBox.InputBindings>
                <TextBox.RenderTransform>
                    <TranslateTransform X="{Binding ActualWidth,
                                RelativeSource={RelativeSource AncestorType=Rectangle}}"/>
                </TextBox.RenderTransform>
            </TextBox>
        </DockPanel>