c# - UWP - ListView.ItemTemplate 中的 StateTrigger

Question

我在将 ColorAnimation 添加到我的 ListView ItemTemplate 上的 VisualStateManager 时遇到问题。 VisualStateManager 似乎没有改变其视觉状态。

我在这里要做的是启动一个 StoryBoard，它将开始平滑地更改 ListViewItem 上的 Rectangle.Fill 颜色，只要其底层 View 模型的 IsReady 属性值发生变化。

我做错了什么？以及如何正确执行此操作(最好没有毫无意义的 UserControl)？

这是 XAML:

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView ItemsSource="{x:Bind MyList}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:B">
                    <UserControl>
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="group">
                                    <VisualState x:Name="state1">
                                        <VisualState.StateTriggers>
                                            <StateTrigger IsActive="{x:Bind IsReady, Mode=OneWay}"/>
                                        </VisualState.StateTriggers>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:1.8" To="Red" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rect" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="rect" Fill="Blue" Width="20" Height="20" />
                        </Grid>
                    </UserControl>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Click="Button_Click">Test</Button>
    </Grid>
</Page>

这是背后的代码:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App1
{
    public abstract class NotifyPropertyChangedBase : INotifyPropertyChanged
    {
        protected NotifyPropertyChangedBase()
        {
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void RaisePropertyChanged([CallerMemberName]string propertyName = null)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class B : NotifyPropertyChangedBase
    {
        private bool isReady;
        public bool IsReady
        {
            get { return isReady; }
            set { if (isReady != value) { isReady = value; RaisePropertyChanged(); } }
        }
    }

    public sealed partial class MainPage : Page
    {
        public ObservableCollection<B> MyList { get; private set; } = new ObservableCollection<B>();

        public MainPage()
        {
            this.InitializeComponent();

            for (int i = 0; i < 10; i++)
            {
                MyList.Add(new B());
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MyList[2].IsReady = !MyList[2].IsReady;
        }
    }
}

Answer 1

这里需要一个UserControl。没有它，我们可能会出现您所看到的错误。要管理视觉状态，我们需要一个 Control然而，子类 Grid不是 Control子类，它继承自 Panel .

Visual states are sometimes useful for scenarios where you want to change the state of some area of UI that's not immediately a Control subclass. You can't do this directly because the control parameter of the GoToState(Control, String, Boolean) method requires a Control subclass, which refers to the object that the VisualStateManager acts upon.

We recommend you define a custom UserControl to either be the Content root or be a container for other content you want to apply states to (such as a Panel). Then you can call GoToState(Control, String, Boolean) on your UserControl and apply states regardless of whether the rest of the content is a Control.

有关详细信息，请参阅 Remarks 下的非控件元素的视觉状态的 VisualStateManager Class .