locked
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>
    

    Thursday, September 06, 2012 1:28 AM

Answers

  • 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

    • Marked as answer by Jesse Jiang Wednesday, September 19, 2012 6:46 AM
    Thursday, September 13, 2012 5:07 AM

All replies

  • 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

    Monday, September 10, 2012 9:53 AM
  • 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?

    Wednesday, September 12, 2012 1:06 AM
  • 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

    • Marked as answer by Jesse Jiang Wednesday, September 19, 2012 6:46 AM
    Thursday, September 13, 2012 5:07 AM
  • 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}" />

    Thursday, September 13, 2012 8:02 AM
  • Is it possible or not ?
    Friday, September 14, 2012 7:41 AM
  • Or is there any other way how to animate GridView items (like live tiles in start screen) ?
    Tuesday, September 18, 2012 12:42 PM
  • 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...

    Wednesday, October 03, 2012 11:51 PM