Interactive Menu using ListBox in WPF


Introduction

In this article we will see how we can make use of a ListBox control to look like a menu.

1.gif
 
Creating a WPF Project

Fire up Visual Studio 2010, create a WPF Application, and name it as ListBoxMenuSample.

2.gif

First thing we need to add is a ListBox.

Then we would create a class which would have the following properties.

3.gif 

As you see in the above class, we have two Image Uri, this is because when we would mouse hover an item then the large image should be displayed.

We can achieve this by simply modifying the ListBoxItem template and the ItemsPanelTemplate.

Let's start with the ListBoxItem customization.

4.gif
 
Then we need to customize the ItemsPanelTemplate.

5.gif 

The above xaml code is for the customization of the ListBoxItem and ItemsPanelTemplate.

Before running the application let's create some sample data.

6.gif 

Now run the application, and you can see the template is working fine.

7.gif 

Now, with the help of Trigger we can apply to the ControlTemplate and we can achieve the mouse over functionality.

8.gif 

Add the above Trigger for the ControlTemplate of the ListBoxItem. Remember the values are fully dependent on the image's size. Such as if your image has some big padding then you need to reduce, otherwise you may not achieve your target requirement.

Now, let's run the application once again and you would see the Mouse over effect.

9.gif 

Hope this article helps.