Animation Using MVVM ?

Question

Hello World

i am converting my Current SL 5 application to using MVVM pattern. I am getting an issue, i am binding a ListBox with my list and ListBox.DataTemplate is a Border. I Need To find the DataContext Of Border on MouseEnter And Bind the DataContext with and another control and i also need to run a animation on Border's Height. On Mouse Leave I need to collapse Height back to same.

please let me know hows that Possible 

hele is my xaml

<ListBox x:Name="lbReviewBatches" Grid.Column="0" Margin="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Hidden"  VerticalAlignment="Top" HorizontalAlignment="Left"  ItemContainerStyle="{StaticResource  ListBoxItemStyleTransparent}" Style="{StaticResource ListBoxStyleEXEGO}" ItemsSource="{Binding Path=ReviewInfoUser}">

                        <ListBox.Resources>
                            <Views:ActualSizePropertyProxy Element="{Binding ElementName=lbReviewBatches}" x:Name="lbReviewBatchesActualWidth" />
                        </ListBox.Resources>

                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid  VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="0"  Height="200" Style="{StaticResource batchGridInnerStyle}">
                                    <Grid.RowDefinitions >
                                        <RowDefinition ></RowDefinition>
                                    </Grid.RowDefinitions>

                                    <Grid.Resources>
                                        <Storyboard x:Name="lbReviewBatches_Select">
                                            <DoubleAnimation Storyboard.TargetProperty="(StackPanel.Height)"
                                                 From="50"
                                                 To="200"
                                                 Duration="0:0:1"  />
                                        </Storyboard>
                                        <Storyboard x:Name="lbReviewBatches_UnSelect">
                                            <DoubleAnimation Storyboard.TargetProperty="(StackPanel.Height)"
                                                 From="200"
                                                 To="50"
                                                Duration="0:0:1"  />
                                        </Storyboard>
                                        <!--Storyboards Created By Ravi Mittal-->
                                        <Storyboard x:Name="lbReviewBorder_Select">
                                            <DoubleAnimation Storyboard.TargetProperty="(Border.Height)"
                                                 From="50"
                                                 To="200"
                                                 Duration="0:0:1"  />
                                        </Storyboard>
                                        <Storyboard x:Name="lbReviewBorder_UnSelect">
                                            <DoubleAnimation Storyboard.TargetProperty="(Border.Height)"
                                                 From="200"
                                                 To="50"
                                                Duration="0:0:1"  />
                                        </Storyboard>
                                    </Grid.Resources>
                                    <StackPanel Orientation="Vertical"   Width="{Binding ActualWidthValue, ElementName=lbReviewBatchesActualWidth}">
                                        <Border  BorderThickness="2" CornerRadius="6" Style="{StaticResource BatchInnerList}" Height="200"  Margin="5,0,8,0">
                                            <StackPanel Orientation="Vertical" Margin="0,0,50,0" >
                                                <TextBlock TextAlignment="Center" Text="{Binding strBatchName}"
                                       Style="{StaticResource tbBatchNameStyle}"
                                       Height="30" ></TextBlock>
                                                <Grid HorizontalAlignment="Stretch">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition />
                                                    </Grid.ColumnDefinitions>
                                                    <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical" Margin="1">
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.TotalDocuments, ConverterParameter=0}" Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"  />
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.ReviewedDocuments, ConverterParameter=1}" Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.PendingDocuments, ConverterParameter=2}" Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.Percentage, ConverterParameter=3}" Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.FullName, ConverterParameter=4}"  Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.CreatedDate, ConverterParameter=5}" Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.ExpectedDateAssigned, ConverterParameter=6}"  Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.CompletionDateAssigned, ConverterParameter=7}" Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                        <TextBlock Text="{Binding Converter={StaticResource ReviewerValues}, Path=ReviewGroupInfo.RatePerHour, ConverterParameter=8}" Style="{StaticResource tbContentStyle}" TextWrapping="Wrap"/>
                                                    </StackPanel>
                                                </Grid>
                                            </StackPanel>
                                        </Border>
                                    </StackPanel>
                                    <Intr:Interaction.Triggers>
                                        <Intr:EventTrigger EventName="MouseEnter">
                                            <Custom:EventToCommand Command="{Binding MouseEnterCommand,Mode=OneWay}" PassEventArgsToCommand="True" CommandParameter="{Binding ElementName=ComboProjects}"></Custom:EventToCommand>
                                        </Intr:EventTrigger>
                                        <Intr:EventTrigger EventName="MouseLeave">

                                        </Intr:EventTrigger>
                                    </Intr:Interaction.Triggers>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

Answer 1

Hi Ravi,

You can find Border in an event( e.g. Loaded event) and use FindName; or you can utililze VisualTreeHelper, refer this thread.

If you want to add animation for Border's Height, you may take a look at a test code in below thread:

http://social.msdn.microsoft.com/Forums/en-US/silverlightdesigning/thread/a96f70cc-4788-4c34-aadc-86877ac3bf3c#88ab228b-fcd1-4c6f-9f32-03733b7b3add/1?Re+BeginTime+in+DoubleAnimation+ignored

This thread include a sample on create and apply animation in codebehind.

If you mean you want to reuse the template, you can make your template into the Resource collection, inline templates cannot be reused. Templates and styles defined in a ResourceDictionary can always be shared and reused.

Best Regards,