在开发WindowsPhone的Panorama和Pivot时模版页时，会遇到把一些图片绑定子项，或图片文字混合绑定子项目，如下图，红色选中区域，都是作为一个整体的子项承呈现的，这时就需要后台进行数据绑定来操作了。
因为右图是文字与图片混合编排，重点看一下这个功能实现的代码。
一、 定义一个绑定子项的类
public class ImageString
{
public BitmapImage Image
{
get;
set;
}
public string Name
{
get;
set;
}
public string SubName
{
get;
set;
}
}
二、 前端xaml的Pranrama代码
<controls:PanoramaItem Header="重点景点">
<Grid>
<ListBox Margin="0,0,-12,0" Name="zdjd_listbox" SelectionChanged="zdjd_listbox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="{Binding Image}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Name="Title_TB" Text="{Binding Name}" TextWrapping="Wrap" FontSize="30"/>
<TextBlock Name="SubTitle_TB" Text="{Binding SubName}" TextWrapping="Wrap" Margin="12,-6,12,0" FontSize="20"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PanoramaItem>
三、 定义ImageString集合，并追加数据，然后绑定到前台的List上
BitmapImage bimg1 = new BitmapImage(new Uri(@"Images/sls.jpg", UriKind.RelativeOrAbsolute));
string title1 = "少林寺";
string sm1 = "位于中国河南省郑州市登封的嵩山，是少林武术的发源地，由于其坐落嵩山的腹地少室山下……";
imagestrings.Add(new ImageString { Image = bimg1, Name = title1, SubName = sm1 });
BitmapImage bimg2 = new BitmapImage(new Uri(@"Images/lmsk.jpg", UriKind.RelativeOrAbsolute));
string title2 = "龙门石窟";
string sm2 = "龙门石窟是中国著名的三大石刻艺术宝库之一，位于河南省洛阳市南郊12公里处的伊河两岸……";
imagestrings.Add(new ImageString { Image = bimg2, Name = title2, SubName = sm2 });
qy_listbox.ItemsSource = imagedata;
这样，就可以完成图片和文字混编的绑定。
此时，如果点击任一子项目，是没有效果的，如果在点击子项目时，子项目能有所变化，这样用户体验将增加不少。
下来，可以给qy_listbox中的StackPanel控件增加三个事件，代码如下：
<StackPanel Orientation="Horizontal" Margin="0,0,0,17" ManipulationStarted="StackPanel_ManipulationStarted" ManipulationDelta="StackPanel_ManipulationDelta" ManipulationCompleted="StackPanel_ManipulationCompleted">
后台代码如下：
int value = 20;
void LoadPlaneProjection(object sender, double X,double Y)
{
PlaneProjection pp = new PlaneProjection();
StackPanel sp = (sender as StackPanel);
if (X > 200)
{
pp.RotationY = -value;
}
else
{
pp.RotationY = value;
}
if (Y > 110)
{
pp.RotationX = value;
}
else
{
pp.RotationX = -value;
}
sp.Projection = pp;
}
private void StackPanel_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
//倾角显示动画
LoadPlaneProjection(sender, e.ManipulationOrigin.X ,e.ManipulationOrigin.Y);
}
private void StackPanel_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
LoadPlaneProjection(sender, e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
}
private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
PlaneProjection pp = new PlaneProjection();
StackPanel sp = (sender as StackPanel);
pp.RotationY = 0;
pp.RotationX = 0;
sp.Projection = pp;
}
这样就会有一个倾角的效果，当点击子项目的四个角的任意一角时，被点击的角会陷下去。效果图如下图，此时可以导航到相应的页面或作别的处理。
本文转自桂素伟51CTO博客，原文链接： http://blog.51cto.com/axzxs/872462，如需转载请自行联系原作者