Introduction
In this article we will see how we can make use of a ListBox control to look like a menu.
Creating a WPF Project
Fire up Visual Studio 2010, create a WPF Application, and name it as ListBoxMenuSample.
First thing we need to add is a ListBox.
Then we would create a class which would have the following properties.
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.
Then we need to customize the ItemsPanelTemplate.
The above xaml code is for the customization of the ListBoxItem and ItemsPanelTemplate.
Before running the application let's create some sample data.
Now run the application, and you can see the template is working fine.
Now, with the help of Trigger we can apply to the ControlTemplate and we can achieve the mouse over functionality.
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.
Hope this article helps.