How to show animation(using Storyboard or some other way) when user mouse over an item in a ListBox?

Jan 24, 2010 at 2:15 PM
Edited Jan 24, 2010 at 2:17 PM

I would like to show an animation when user mouse over an item in a ListBox. Is it possible to do? If so, how can I do that? Any help is really appreciated...              

     <StackPanel Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">

                        <TextBlock x:Name="lblLeftList" FontSize="14" Margin="0,0,0,10" Foreground="#FFC8B5B5"><Run Text="The first list"/></TextBlock>

                        <ListBox x:Name="leftList" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="20,10,20,20" Height="435" Width="242" HorizontalAlignment="Center" VerticalAlignment="Center">

                            <ListBox.ItemTemplate>

                                <DataTemplate>

                                    <dd:DropTarget Width="200" Height="20"

                                       Background="Red" ShowHover="False" >

                                        <dd:DropTarget.Content>

                                            <dd:DragSource x:Name="drgSourceLeft" ShowReturnToOriginalPositionAnimation="True" MouseEnter="drgSourceLeft_MouseEnter"

                                               AllDropTargetsValid="True" DragHandleMode="FullDragSource" DropMode="ReturnDragSource" AutoFitGhost="True">                                          

                                                <dd:DragSource.Ghost>

                                                    <Grid Width="200" Height="20" Background="{Binding Background}" x:Name="grdLeftItem">

                                                        <TextBlock x:Name="txtLeftItem" Text="{Binding Name}" Opacity="0.5"

                                                       FontSize="12" VerticalAlignment="Center"

                                                     HorizontalAlignment="Center"/>

                                                    </Grid>

                                                </dd:DragSource.Ghost>

                                                <Grid Width="200" Height="20" Background="{Binding Background}">

                                                        <TextBlock x:Name="leftItem" Text="{Binding Name}"

                                                     FontSize="12" VerticalAlignment="Center"

                                                     HorizontalAlignment="Center" >           

                                                        </TextBlock>

                                                    </Grid>

                                            </dd:DragSource>

                                        </dd:DropTarget.Content>

                                    </dd:DropTarget>

                                </DataTemplate>

                            </ListBox.ItemTemplate>

                        </ListBox>

                    </StackPanel>

 

Coordinator
Jan 27, 2010 at 7:05 PM

The easiest way to solve this would probably be to surround each listboxitem with a grid (so: first element in the datatemplate is a grid), capture that grids' Loaded event, and add handlers to the Grid's MouseEnter event to trigger your animation.  A more elegant way could be to write a custom control which would serve as a ListboxItem and implements that behaviour for you.

Jan 28, 2010 at 2:08 AM

Great.. Thank you very much Kevin..

 

Jan 31, 2010 at 2:05 AM
KevD wrote:

The easiest way to solve this would probably be to surround each listboxitem with a grid (so: first element in the datatemplate is a grid), capture that grids' Loaded event, and add handlers to the Grid's MouseEnter event to trigger your animation.  A more elegant way could be to write a custom control which would serve as a ListboxItem and implements that behaviour for you.

Kevin,

As you mentioned, I would like to write a custom control to implement ListBoxItem animation behaviour. I am not a advanced programmer and not quite sure how to do that. Would you able to help me with this or direct me to some resources in the web. I really appreciate your time and consideration.

 This is what I have so far...

........

  private ObservableCollection<ListContent> leftItems; 

        public class ListContent

        {

            public string Name { get; set; }

            public GradientBrush Background { get; set; }

        }

…………… 

    XDocument doc = XDocument.Load(""); 

                IEnumerable<XElement> elements = doc.Element("").Elements("").Single(x => (string)x.Attribute("") == moduleName).Element("").Elements("");

                leftItems = new ObservableCollection<ListContent>();

                foreach (XElement node in elements)

                {

                                   leftItems.Add(new ListContent() { Name = node.Value, Background = getGradient(true) });

                } 

                leftList.ItemsSource = leftItems;

 

Thanks,

Samanf..

Jun 3, 2010 at 9:56 AM
Edited Jun 3, 2010 at 10:01 AM

I guess you solved it by now, if not you can try to do what I did.

I use 2 options:

  • with attached behaviors: i wrote an behavior and attached it to my item template (for mouse over, drag, drop, correct drop) . Don't forget to define the STATES of your ITEM. I suppose you use a custom control as an ITEM.

or

  • i wrote a custom control (i needed a stack panel but to be filled from down) that inherits panel, overriding few functions.

 

Regards,

Radu

 

 

Jun 3, 2010 at 10:03 AM
Edited Jun 3, 2010 at 10:11 AM

Here is my MoveOnTop behavior. 


Imports System.Collections.Generic
Imports System.Windows.Interactivity
Imports System.Windows.Media.Effects.DropShadowEffect

Public Class moveOnTop
    Inherits TriggerAction(Of DependencyObject)

    Private Const zIndexStrips = 0

    Protected Overrides Sub OnAttached()

        MyBase.OnAttached()
        Dim el As FrameworkElement = Me.AssociatedObject
        AddHandler el.MouseEnter, AddressOf el_MouseEnter
        AddHandler el.MouseLeave, AddressOf el_MouseLeave

    End Sub

    Protected Overrides Sub Invoke(ByVal parameter As Object)

    End Sub


    Private Sub el_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
        VisualStateManager.GoToState(Me.AssociatedObject, "Focused", True)
        Me.ChangeZindex(100)
    End Sub

    Private Sub el_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
        VisualStateManager.GoToState(Me.AssociatedObject, "Base", True)
        Me.ChangeZindex(++zIndexStrips)
    End Sub

    Private Sub ChangeZindex(ByVal zIndex As Integer)
        Dim parent As DependencyObject = Me.AssociatedObject
        While parent IsNot Nothing
            If (TypeOf (parent) Is strip) Then
                Canvas.SetZIndex(parent, zIndex)
                Exit While
            End If
            parent = VisualTreeHelper.GetParent(parent)
        End While
    End Sub

End Class

 

As you see, I want to bring on top only the "strip" the rest of the controls are not moved on top. Maybe is not the best one, but it suits my needs.