Collpasing items in listbox

This sample shows how to animate the item in a listbox that is being deleted.
The sample would be lot cleaner, if Triggers , the ListBoxItem is exposed(instead of us keeping track of the items) and x:Static are supported
Note:Actual logic to delete which should be done after the animation is complete is not there
you can see a demo here and download source from here


4 thoughts on “Collpasing items in listbox

  1. Lee,

    Nice sample. I have a couple of questions.

    1) I have created a listbox populated from a web service connected to a database. However, I need to select (click on) an item in the listbox before I can select the button associated with it (as your ‘Delete’ button is associated with the items in your list box). How did you avoid this extra step?

    2) Is it possible to hide, perhaps via the visibility or opacity properties or some other manner with which I am unaware, the ‘Delete’ button on your sample? I was thinking of hiding it until the mouse enters a listbox item, then making it visible. This, however, would require the capability to hide the button again when the mouse moves out of that listbox item.


  2. 1. you should be able to specify ClickMode=”Press” on the button

    2.yes, these are the changes you need to make
    1. give the Grid in DataTemplate some background

    2.add x:Name=”btndelete” to the button, change the Button loaded handler to
    private void Button_Loaded(object sender, RoutedEventArgs e)
    Button b = (sender as Button) as Button;
    Grid g = b.Parent as Grid;
    b.Tag = _items.Count().ToString();
    g.MouseMove += new MouseEventHandler(g_MouseMove);
    g.MouseLeave += new MouseEventHandler(g_MouseLeave);
    and add the event handlers
    void g_MouseLeave(object sender, MouseEventArgs e)
    Grid g = (sender as Grid);
    Button b = g.FindName(“btndelete”) as Button;
    b.Visibility = Visibility.Collapsed;

    void g_MouseMove(object sender, MouseEventArgs e)
    Grid g = (sender as Grid);
    Button b = g.FindName(“btndelete”) as Button;
    b.Visibility = Visibility.Visible;

    That should do it

  3. Lee,

    Your instructions were excellent. I added an event handler for MouseEnter instead of MouseMove, and I set ‘Visibility=collapsed’ for the button in page.xaml so the page would render with the buttons hidden. The buttons appear as the mouse enters the listbox item and disappears as it leaves. I will now try to accomplish this with my application.

    Your example was clean and easy to follow. Thanks for posting it and thanks for your additional assistance.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s