none
animating a grid of an itemscontrol RRS feed

  • Question

  • Hey guys,

    I'm trying to animate the height of a grid which exist inside of an itemsControl, I tried to do it in the XAML page, but I didn't know where to put my StoryBoard, so I tried to do it programmatically and this is where I've reached so far :

    private void Show(Grid savingPanel)
            {
                Storyboard sb = new Storyboard();
                DoubleAnimation animation = new DoubleAnimation { From = 0, To = 113, Duration = TimeSpan.FromSeconds(0) };
                Storyboard.SetTarget(animation, savingPanel);
                Storyboard.SetTargetProperty(animation, new PropertyPath(Height));
                sb.Children.Add(animation);
                sb.Begin();
            }


    now what I'm having problem with is how can I access the chosen grid. Well first of all here is my ItemsControl:

    <ItemsControl Name="items">                    
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <Grid Name="grid1">
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
    
                                        <Canvas Name="canvas1" Height="60" VerticalAlignment="Top">
                                            <TextBlock Text="{Binding RecordedTime}" Canvas.Left="10" Canvas.Top="7" Width="370"  FontSize="36"/>
                                            <Controls:RoundButton Name="{Binding records.Count.Tostring()}" Canvas.Left="380" Height="58" Canvas.Top="6" Tag="" ImageSource="/Stopwatch;component/Images/appbar.save.rest.png" Click="save_Click"/>
                                        </Canvas>
                                        <!--The saving grid-->
                                        <Grid Name="{Binding records.Count.Tostring()}" Grid.Row="1" Height="{Binding resize}">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="50"/>
                                                <RowDefinition/>
                                            </Grid.RowDefinitions>
    
                                            <Canvas>
                                                <TextBlock Text="Name:" FontSize="20" Canvas.Top="12" Canvas.Left="10"/>
                                                <TextBox Canvas.Left="60" Width="250" Height="55" FontSize="20"/>
                                            </Canvas>
    
                                            <Grid Grid.Row="1">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition/>
                                                </Grid.ColumnDefinitions>
                                                <Button Content="Save" FontSize="20" Height="70" Width="150" />
                                                <Button Content="Cancel" Grid.Column="1" FontSize="20" Height="70" Width="150"/>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>


    What I tried to do is to name my RoundButton ( whitch will trigger the event) with the Count property of the itemsource list and I named the grid (which I'm trying to animate) with the same name so I coud do this in the end:

    private void save_Click(object sender, RoutedEventArgs e)
            {
                Button  btn = (Button)sender;            
                ContentPresenter container = items.ItemContainerGenerator.ContainerFromIndex(Convert.ToInt32(btn.Name)) as ContentPresenter;
                Grid savingPanel = (Grid)container.Content;
                Show(savingPanel);
            }

    I know this is wrong, but this is my grasp of how to access an itemsControl children.

    So could anyone help me in understanding how animation and accessing an Itemscontrol children works??

    Thank you.


    • Edited by Ayoub.A Sunday, July 14, 2013 7:26 PM
    Sunday, July 14, 2013 2:43 PM