UWP - ListView.ItemTemplate中的StateTrigger

我在我的ListView ItemTemplate上添加ColorAnimation到VisualStateManager時遇到問題。 VisualStateManager似乎沒有改變它的視覺狀態。UWP - ListView.ItemTemplate中的StateTrigger

我想在這裏做的是開始一個StoryBoard將開始儘快順利改變對ListViewItem的Rectangle.Fill顏色，作爲其底層視圖模型的的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; 
     } 
    } 
}

來源

2017-03-08 Vitaly

你的問題是什麼？我用你的代碼進行了測試，它在我身邊效果很好。 –

@ JayZuo-MSFT，沒有使用'UserControl'，我在MainPage.g.cs的Set_Windows_UI_Xaml_StateTrigger_IsActive中收到'NullReferenceException' – Vitaly

這裏，UserControl是必要的。沒有它，我們可能會遇到你所看到的錯誤。爲了管理視覺狀態，我們需要一個Control子類，但是，Grid不是Control的子類，它繼承自Panel。

視覺狀態有時是要改變UI的一些區域立即不是一個Control子類的狀態情況下非常有用。您不能直接執行此操作，因爲GoToState(Control, String, Boolean)方法的控件參數需要Control子類，該子類引用VisualStateManager所執行的對象。

我們建議您將自定義UserControl定義爲Content根，或者是您想要將狀態應用於其他內容的容器（例如Panel）。然後，您可以在UserControl上致電GoToState(Control, String, Boolean)並應用狀態，而不管其餘內容是否爲Control。

欲瞭解更多信息，請參閱視覺狀態爲不在控制的VisualStateManager Class Remarks下的元素。

來源

2017-03-21 05:12:29

UWP - ListView.ItemTemplate中的StateTrigger

回答

相關問題