UWP 中的动画输入框

Question

我想像上面那样为输入框设置动画，如何在 MVVM 模板 10 中实现

我有一个列表视图并且需要像图片一样的搜索栏

Answer 1

这是 AutoSuggestBox。

你可以在https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlAutoSuggestBox

中看到如何使用

您可以在 https://msdn.microsoft.com/zh-cn/windows/uwp/controls-and-patterns/auto-suggest-box?f=255&MSPPError=-2147217396

上查看摘要

Answer 2

我附上了您问题的解决方案。对于 UWP c#

中的 AutoSuggestBox，有两个情节提要在 GotFocus 和 Lost Focus 上触发

这是我取得的成就：

XAML :

<Page.Resources>
    <Storyboard x:Name="OnCancel">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="70">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="HeaderGrid">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="51"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HeaderGrid">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="HeaderGrid">
            <EasingDoubleKeyFrame KeyTime="0" Value="-36.058"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="OnTextBoxFocus">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="70">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="HeaderGrid">
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HeaderGrid" d:IsOptimized="True"/>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="HeaderGrid">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-36.058"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid x:Name="HeaderGrid" Margin="0,0,-1,-0.117" RenderTransformOrigin="0.5,0.5" Height="51">
        <Grid.RenderTransform>
            <CompositeTransform/>
        </Grid.RenderTransform>
        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock" Margin="5,0,1,3" FontSize="36" SelectionHighlightColor="{x:Null}" Foreground="DodgerBlue"/>
        <TextBox Width="1" Height="1" IsReadOnly="True"/>
        <Path Data="M0,48 L360,48" Height="1" Margin="0,0,0,0.117" Stretch="Fill" Stroke="DodgerBlue" UseLayoutRounding="False" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition"/>
    </Grid>
    <StackPanel Grid.Row="1">
        <Grid Height="32" Margin="12,8,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <AutoSuggestBox x:Name="searchText" PlaceholderText="Search" QueryIcon="Find" TextMemberPath="name" LostFocus="searchText_LostFocus" GotFocus="searchText_GotFocus"/>
            <Button x:Name="button" Content="Cancel" VerticalAlignment="Stretch" d:LayoutOverrides="Height" Grid.Column="4" Margin="5,0,0,0" Width="70" Click="button_Click"/>
        </Grid>
        <ListView x:Name="listView" Background="#FFECECEC" Margin="0,8,0,0">
            <ListViewItem Content="List View Item 1" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 2" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 3" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 4" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 5" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 6" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 7" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 8" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 9" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
            <ListViewItem Content="List View Item 10" BorderThickness="0,0,0,1" BorderBrush="#FFB9B9B9"/>
        </ListView>
    </StackPanel>

</Grid>

在后面的代码中 XAML.CS

 private void searchText_LostFocus(object sender, RoutedEventArgs e)
    {
        OnCancel.Begin();
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        OnCancel.Begin();
    }


    private void searchText_GotFocus(object sender, RoutedEventArgs e)
    {
        OnTextBoxFocus.Begin();
    }

另外不要忘记在初始化时设置按钮的宽度 = 0。

希望对您有所帮助。

Answer 3

您可以使用数据绑定将您的标题和 Cancel 按钮的 Visibility 属性绑定到 ViewModel 中定义的属性，如@Raunaq Patel据说，动画是由 GotFocus 和 LostFocus 事件触发的。

因此您可以像这样编写代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock x:Name="pageHeader" Text="Main Page" Grid.Row="0" Visibility="{Binding IsVisible}" FontSize="30" />
    <Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <AutoSuggestBox HorizontalAlignment="Stretch" GotFocus="{x:Bind ViewModel.Search_GotFocus}"
                            LostFocus="{x:Bind ViewModel.Search_LostFocus}" VerticalAlignment="Stretch"
                            Width="{Binding BoxWidth}" />

            <TextBlock Text="Cancel" Foreground="BlueViolet" Tapped="{x:Bind ViewModel.Cancel_Tapped}" Width="100"
                       VerticalAlignment="Stretch" HorizontalAlignment="Center" FontSize="20"
                       Visibility="{Binding CancelIsVisible}" Grid.Column="1" />
        </Grid>
        <ListView Grid.Row="1" IsEnabled="{Binding ListViewEnable}">
            <ListViewItem>Item 1</ListViewItem>
            <ListViewItem>Item 2</ListViewItem>
            <ListViewItem>Item 3</ListViewItem>
            <ListViewItem>Item 4</ListViewItem>
            <ListViewItem>Item 5</ListViewItem>
        </ListView>
    </Grid>
</Grid>

由于您使用的是模板 10，因此 MainPageViewModel 中的代码是这样的：

public class MainPageViewModel : ViewModelBase
{
    private Visibility _IsVisible;

    public Visibility IsVisible
    {
        get { return _IsVisible; }
        set
        {
            if (value != _IsVisible)
            {
                _IsVisible = value;
                RaisePropertyChanged();
            }
        }
    }

    private Visibility _CancelIsVisible;

    public Visibility CancelIsVisible
    {
        get { return _CancelIsVisible; }
        set
        {
            if (value != _CancelIsVisible)
            {
                _CancelIsVisible = value;
                RaisePropertyChanged();
            }
        }
    }

    private bool _ListViewEnable;

    public bool ListViewEnable
    {
        get { return _ListViewEnable; }
        set
        {
            if (value != _ListViewEnable)
            {
                _ListViewEnable = value;
                RaisePropertyChanged();
            }
        }
    }

    private double _BoxWidth;

    public double BoxWidth
    {
        get { return _BoxWidth; }
        set
        {
            if (value != _BoxWidth)
            {
                _BoxWidth = value;
                RaisePropertyChanged();
            }
        }
    }

    public MainPageViewModel()
    {
        _IsVisible = Visibility.Visible;
        _CancelIsVisible = Visibility.Collapsed;
        _ListViewEnable = true;
        _BoxWidth = Window.Current.Bounds.Width;
    }

    public void Search_GotFocus(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        IsVisible = Visibility.Collapsed;
        CancelIsVisible = Visibility.Visible;
        ListViewEnable = false;
        BoxWidth = _BoxWidth - 100;
    }

    public void Search_LostFocus(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        IsVisible = Visibility.Visible;
        CancelIsVisible = Visibility.Collapsed;
        ListViewEnable = true;
        BoxWidth = Window.Current.Bounds.Width;
    }

    public void Cancel_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        IsVisible = Visibility.Visible;
        CancelIsVisible = Visibility.Collapsed;
        ListViewEnable = true;
        BoxWidth = Window.Current.Bounds.Width;
    }
}

这里可以看到ListView里面的数据是假的，当然可以用DataTemplate绑定collection到[=18=的ItemSource ].这是我的示例的渲染图像：

UWP 中的动画输入框

Animate input box in UWP

xaml

uwp

template10