WP下ListBox的绑定和效果

核心提示：因为右图是文字与图片混合编排，重点看一下这个功能实现的代码，WP下ListBox的绑定和效果(2)，一、 定义一个绑定子项的类public class ImageString{public BitmapImage Image{get;set;}public string Name{get;set;}public str

因为右图是文字与图片混合编排，重点看一下这个功能实现的代码。

一、　　　　　　 定义一个绑定子项的类

　　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;

　　　　}

这样就会有一个倾角的效果，当点击子项目的四个角的任意一角时，被点击的角会陷下去。效果图如下图，此时可以导航到相应的页面或作别的处理。