Answered by:
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 6, 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,
JesseJesse 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,
JesseJesse 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,
JesseJesse 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 3, 2012 11:51 PM