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>

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