How to add animation to the SurfaceListBoxItem template?

Question

Hi,

How to add animation to the SurfaceListBoxItem?

For Example, this is the template for SurfaceListBoxItem:

<DataTemplate x:Key="ListBoxItemTemplete">
       <StackPanel Height="140" Width="140">
                <Label 
                        Content="{Binding TaskName}" 
                        Background="{Binding TaskCardColor}"
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center"
                        FontSize="20"
                        Width="130"
                        Height="130"/>
            </StackPanel>            
        </DataTemplate>

and I was intend to make the item vibrate when try to drop it into a ListBox with wrong destination.

Can anyone help me about this?

Thank you very much.

Answer 1

Hi Frank

    you could use data triggers:

	<DataTemplate.Triggers> 
        <DataTrigger Binding="{Binding YOURBINDING}" Value="True"> 
          <DataTrigger.EnterActions> 
            <BeginStoryboard Name="YOURBEGINSTORYBOARD"> 
              <Storyboard> 
                <YOURSTORYBOARD /> 
              </Storyboard> 
            </BeginStoryboard> 
          </DataTrigger.EnterActions> 
          <DataTrigger.ExitActions> 
            <../> 
          </DataTrigger.ExitActions> 
        </DataTrigger> 
      </DataTemplate.Triggers>           
        </DataTemplate>

Also, if you are still not using it, I strongly recommend to use Expression Blend for all stuff like animations and UI design in general.

hth

---

Gian Paolo Santopaolo - @gsantopaolo
Founder and CTO Software Lab
softwarelab.it - digitalshopwindow.com - thedarksideof.net
Disclaimer: This post is provided "AS IS" with no warranties, and confer no rights.

Answer 2

Hi Gian,

Thanks for your replying.

Based on your tips, I change the template and it could vibrate but the problem is the item could not stop at the drop place for a while and vibrate.

<DataTemplate x:Key="ListBoxItemTemplete">
            <StackPanel x:Name="stackPanel" Height="140" Width="140" RenderTransformOrigin="0.5,0.5">
                <StackPanel.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </StackPanel.RenderTransform>
                <Label 
                        Content="{Binding TaskName}" 
                        Background="{Binding TaskCardColor}"
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center"
                        FontSize="20"
                        Width="130"
                        Height="130"/>
            </StackPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=IsVibrate}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource vibrate}"/>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

private void PlannedListBox_DragCanceled(object sender, SurfaceDragDropEventArgs e)
        {
            Task aniTemp = e.Cursor.Data as Task;
            aniTemp.IsVibrate = true;
                      
            foreach (Task item in PlannedListBox.Items)
            {
                SurfaceListBoxItem temp = PlannedListBox.ItemContainerGenerator.ContainerFromItem(item) as SurfaceListBoxItem;
                if (temp.Visibility == System.Windows.Visibility.Hidden)
                    temp.Visibility = System.Windows.Visibility.Visible;
            }
            
        }

It only vibrate while I drag and move the item over the wrong container. I want it vibrate only when I drop it on the wrong container, the item will stop at the drop point for probably 2 seconds,  then it would go back to the previous container.

Can you help me with this problem?

Thanks

Frank

Answer 3

Hi Frank

   if you can provide a working project with the code above I will try to find a solution for you.

regards

---

Gian Paolo Santopaolo - @gsantopaolo
Founder and CTO Software Lab
softwarelab.it - digitalshopwindow.com - thedarksideof.net
Disclaimer: This post is provided "AS IS" with no warranties, and confer no rights.

Answer 4

Hi Gian,

Here is my project, and thanks a lot.

The item should be vibrate when drop into the wrong listBox(in my project it would mean drop into another row), then after few seconds vibration, the item will go back to the previous listbox where it belong. 

Regards.

Frank