WP7 - adding a ‘Fade to Black’ effect to a ListBox

I wanted to have a small and ‘nice’ application in which to experiment things related to networking and graphic effects in WP7, so I took out the ‘My WP7 Brand’ project from CodePlex and started to customize it, this is how ‘All About PrimordialCode’ is born.

Let’s start reminding you I’m not a designer, like many of you I’m a developer.

The first thing I want to show you is how I realized a ‘fade to black’ effect for a ListBox, requisites:

• Items that are scrolling out of the ListBox visible area have to fade away gently, not with an abrupt cut.
• The ListBox have to maintain its full and normal interactions as much as possible.
• It has to work with dark and light themes.

The straightforward way to obtain those result is to use and ‘OpacityMask’ like in the following code:

<ListBox Margin="0,0,-12,0">

<ListBox.OpacityMask>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Offset="0" Color="Transparent" />

<GradientStop Offset="0.05" Color="Black" />

<GradientStop Offset="0.95" Color="Black" />

<GradientStop Offset="1" Color="Transparent" />

</LinearGradientBrush>

</ListBox.OpacityMask>

<ListBox.ItemTemplate>

<DataTemplate>

...your incredible item template goes here...

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

Read more: Windows Phone 7

Posted via email from Jasper-net