WP8为LongListSelector添加类似ListBox的点击凹陷效果

我们知道WP8上的开发推荐使用LongListSelector代替ListBox，它的效率要比ListBox高。

但是LongListSelector并没有ListBox的点击凹陷效果，而且VisualStateGroups里也没有对应的VisualState提供给我们直接修改，

所以要想实现该点击凹陷效果只能想其它办法了。

以下是个人研究的一种方法：

1.新建一个UserControl，在xaml里删除它的所有子控件：

<UserControl x:Class="FYDZHWP8.LongListItemContainer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Foreground="Transparent"
Background="Transparent"
d:DesignHeight="480" d:DesignWidth="480">
</UserControl>

2. 这个LongListItemContainer对应的cs代码内容如下：

public partial class LongListItemContainer : UserControl
{
public LongListItemContainer()
{
InitializeComponent();
this.MouseLeftButtonDown += OnPointerDown;
this.MouseLeftButtonUp += OnPointerUp;
this.MouseLeave += OnPointerUp;
}

private void OnPointerDown(object sender, System.Windows.Input.MouseEventArgs e)
{
if ((sender as UIElement) != null)
(sender as UIElement).Projection = new PlaneProjection() { LocalOffsetZ = -30 };
}

private void OnPointerUp(object sender, System.Windows.Input.MouseEventArgs e)
{
if ((sender as UIElement) != null)
(sender as UIElement).Projection = null;
}
}

即，处理点击事件进行Z变换，以实现对Item的缩小显示（凹陷效果）。

3.在LongListSelector的ItemTemplate中使用该LongListItemContainer作为原来Template的父控件：

<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<local:LongListItemContainer>
<Grid Margin="0,0,0,10">
<TextBlock TextWrapping="NoWrap" Margin="0,0,0,0" TextAlignment="Left" TextTrimming="WordEllipsis"
VerticalAlignment="Top" Foreground="White" FontSize="30" Text="{Binding Title}"/>
<TextBlock TextWrapping="Wrap" Height="80" Margin="0,40,0,0" TextAlignment="Left" TextTrimming="WordEllipsis"
VerticalAlignment="Top" Foreground="DarkGray" FontSize="20" Text="{Binding Content}" />
</Grid>
</local:LongListItemContainer>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>

好了，运行一下吧，点击凹陷效果有啦~~~