Issue with VariableSizedWrapGrid in applying animation to its children

[Nazia]

Hi all,
I have a usercontrol

<Grid>
       <StackPanel >
           <TextBlock Text="{Binding Name}" Tapped="TextBlock_Tapped_1"/>
           <Grid Height="0" Background="Red" Width="200"/>
       </StackPanel>
   </Grid>

the event handler is

private void TextBlock_Tapped_1(object sender, TappedRoutedEventArgs e)
       {

           Grid item = ((((sender as TextBlock).Parent as StackPanel)).Children[1] as Grid);
           {
               if (!Convert.ToBoolean(((sender as TextBlock).Tag)))
               {
                   sb = this.Resources["DownAnimation"] as Storyboard;
                   sb.Stop();
                   Storyboard.SetTarget(sb, item as FrameworkElement);
                   sb.Begin();
                   sb.Completed += sb_Completed;
                   (sender as TextBlock).Tag = !Convert.ToBoolean(((sender as TextBlock).Tag));
               }
               else
               {
                   sb = this.Resources["UpAnimation"] as Storyboard;
                   sb.Stop();
                   Storyboard.SetTarget(sb, item as FrameworkElement);
                   sb.Begin();
                   sb.Completed += sb_Completed;
                   (sender as TextBlock).Tag = !Convert.ToBoolean(((sender as TextBlock).Tag));
               }
           }
       }

 the animations are to increase the heigth of the grid and set it to 0 in upanimation.

<Storyboard x:Name="DownAnimation">
           <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" >
               <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
               <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
           </DoubleAnimationUsingKeyFrames>
       </Storyboard>

       <Storyboard x:Name="UpAnimation">
           <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" >
               <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
               <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
           </DoubleAnimationUsingKeyFrames>
       </Storyboard>

in mainpage.cs,
I am creating two instances of that control and adding it to a VariableSizedWrapGrid.

FilterData d = new FilterData();
            d.Name = itemsCol[cnt];
            d.listCol = VM.sampledata.Where(item => item.designation == d.Name);
            FilterUserControl ctrl1 = new FilterUserControl();
            ctrl1.DataContext = d;
            Grid.SetColumn(ctrl1, cnt);
            filterHolder.Children.Add(ctrl1);
            cnt++;
            d = new FilterData();
            d.Name = itemsCol[cnt];
            d.listCol = VM.sampledata.Where(item => item.designation == d.Name);
            ctrl1 = new FilterUserControl();
            ctrl1.DataContext = d;
            Grid.SetColumn(ctrl1, cnt);
            filterHolder.Children.Add(ctrl1);

If I add it to a Grid, it works fine but I need to add them to VariableSizedWrapGrid.
how to achieve this?
Here the animation always applies to first child and even when I click on second child, nothing happens and when clicked the first again, animation applies to both the grids.

Suggest me some solution.

Note: I am using VariableSizedWrapGrid because the no.of childs may vary.

[Tsvyatko]

Hello Nazia,

It seems that the issue you are encountering is related to Microsoft VariableSizedWrapGrid. Since this is not related to any of the telerik products I can suggest to repost this question to the MS comunity/Stackoverflow forums.

Regards,
Tsvyatko
the Telerik team