Question

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

我在这里尝试做的是启动StoryBoard，一旦其基础视图模型的IsReady属性值发生更改，就会开始平滑地更改Rectangle.Fill上的ListViewItem颜色

我做错了什么？以及如何正确地执行此操作（最好没有无意义的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。

视觉状态有时对于您想要更改某个UI区域的状态非常有用，而这些区域不是一个Control子类。您无法直接执行此操作，因为GoToState(Control, String, Boolean)方法的 control 参数需要Control子类，该子类引用VisualStateManager作用的对象。

我们建议您将自定义UserControl定义为Content根，或者将其作为要应用状态的其他内容的容器（例如Panel）。然后，您可以在GoToState(Control, String, Boolean)上致电UserControl并应用状态，无论其余内容是否为Control。

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

UWP - ListView.ItemTemplate中的StateTrigger

1 个答案: