Animate per item in template

Question

Hi, given the code below, when the visibility of the last TextBlock (DownloadedVersion) is changed in the code-behind, the height of the Grid/Border/StackPanel grows and shrinks accordingly.  What I want to do is animate the grow/shrink.  I've looked at visual states, triggers, themes etc but haven't found the right combination.  Any pointers? thx

<GridView.ItemTemplate>
  <DataTemplate >
    <Grid Width="175" Height="Auto">                                
      <Border Background="Transparent" >
        <StackPanel Orientation="Vertical" >
          <TextBlock Text="{Binding Path=Name}"  />
          <TextBlock Text="{Binding Path=Version}"  />
          <TextBlock Text="{Binding Path=DownloadVersion}" 
             Visibility="{Binding Path=DownVerVis}" />
        </StackPanel>
      </Border>
    </Grid>
  </DataTemplate>
</GridView.ItemTemplate>

Answer 1

Hi,

Yes, you can add animate in select change event. Please follow this sample code to change the Opacity of each items.

void animateitem::MainPage::mygrid_SelectionChanged_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
{
	GridView^ gridview=safe_cast<GridView^>(sender);
	if(e->AddedItems->Size)
	{
		GridViewItem^ gridviewitem=safe_cast<GridViewItem^>(gridview->ItemContainerGenerator->ContainerFromItem(e->AddedItems->GetAt(0)));
		if(gridviewitem!=nullptr)
		{
			Storyboard^ sb = ref new Storyboard();
			DoubleAnimation^ da = ref new DoubleAnimation();
			da->From=1.0;
			da->To=0.0;
			da->AutoReverse=true;
			Windows::Foundation::TimeSpan ts;
			ts.Duration=5000000;
			Windows::UI::Xaml::Duration dur(ts);
			da->Duration=dur;
			sb->Children->Append(da);
			Storyboard::SetTargetProperty(sb, "Opacity");
			Storyboard::SetTarget(sb, gridviewitem);
			sb->Begin();

		}
	}
}

Best regards,
Jesse

---

Jesse Jiang [MSFT]
MSDN Community Support | Feedback to us

Answer 2

Hi, thanks for the response, the code will be useful in doing what I want to do.

However, it doesn't fully answer my question.  Let me put it another way: say I have the following binding setup between xaml and code...

<GridView ItemsSource="{Binding Items}" ...>
   <DataTemplate>
      <TextBlock Text="{Binding Path=Name}"...>
   </DataTemplate>
</GridView>

Then in code-behind:

public ref class MyData sealed
{
  property Platform::String^ Name;
}

IVector<MyData^>^ Items
// ...popuplate Items with MyData objects

// later...
// can you do something like this...
for_each(begin(Items), end(Items) [](MyData^ data) {
   Get GridViewItem *gvi = data->GetBindingTarget;
   ...use animation with gvi...
}

I want to do this because I only want to animate certain GridViewItems.

Is this possible?

Answer 3

Yes, you can get the index of that item, and decide to add the animate of it.
For example I get the index first. If the index is even, I add the animate.

oid animateitem::MainPage::mygrid_SelectionChanged_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
{
	GridView^ gridview=safe_cast<GridView^>(sender);
	if(e->AddedItems->Size)
	{
		GridViewItem^ gridviewitem=safe_cast<GridViewItem^>(gridview->ItemContainerGenerator->ContainerFromItem(e->AddedItems->GetAt(0)));
		int index=gridview->ItemContainerGenerator->IndexFromContainer(gridviewitem);
		if(gridviewitem!=nullptr&&index%2)
		{
			Storyboard^ sb = ref new Storyboard();
			DoubleAnimation^ da = ref new DoubleAnimation();
			da->From=1.0;
			da->To=0.0;
			da->AutoReverse=true;
			Windows::Foundation::TimeSpan ts;
			ts.Duration=5000000;
			Windows::UI::Xaml::Duration dur(ts);
			da->Duration=dur;
			sb->Children->Append(da);
			Storyboard::SetTargetProperty(sb, "Opacity");
			Storyboard::SetTarget(sb, gridviewitem);
			sb->Begin();

		}
	}
}

Best regards,
Jesse

---

Jesse Jiang [MSFT]
MSDN Community Support | Feedback to us

Answer 4

Jesse, from your sample i see animation of GridViewItem, but what about animation of any part of template ?

For example from template in first post i need to animate opacity of this controm from template:

<TextBlock Text="{Binding Path=DownloadVersion}" />

Answer 5

Is it possible or not ?

Answer 6

Or is there any other way how to animate GridView items (like live tiles in start screen) ?

Answer 7

I found a workaround for this (see below).  I know it's a pretty bad hack but it will work in the absence of anything else.

1) Add a flag to the item data template to indicate that an item is to be animated

[Bindable...}
public ref class MyData sealed
{
  property Platform::String^ Name;
  property Platform::String^ Flag;
}

<GridView ItemsSource="{Binding Items}" ...>
   <DataTemplate>
      <TextBlock Text="{Binding Path=Name}"...>
      <TextBlock Text="{Binding Path=Flag}"...>
   </DataTemplate>
</GridView>

2) Iterate through the data source in the code-behind and set the flag as appropriate

IVector<MyData^>^ Items
  for all MyData objects obj in Items
    if (whatever condition)
       obj.Flag = "set"

3) Then iterate through the framework elements and animate items if their flag is set

 for_each ( GridViewItem^ gridviewitem in GridView )
       TextBlock tbFlag = findChild(gridviewitem, "Flag");
       if ( tbFlag == "set" )
           ...do some animation on gridviewitem...