windows phone 7 ListBox使用图片触摸时放大实现

最近在学wp7应用开发，wp7的特性调用，如打电话，发短信，振动器等...很简单，但你要把silverlight应用到wp7开发中，还是有点难度的.

Xaml代码

<phone:PhoneApplicationPage

x:Class="WindowsPhone6.Page2"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"

shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

</StackPanel>

//自己的代码

<Canvas x:Name="canvas1" Grid.Row="1">

<ListBox Canvas.Left="6" Canvas.Top="0" Height="690" Name="listBox1" Width="474">

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel>

<Image Source="{Binding Image1}" Width="450" Height="450" x:Name="image1"ManipulationStarted="image1_ManipulationStarted_1">

</Image>

<TextBlock Text="{Binding Name1}"></TextBlock>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Canvas>

<!--ContentPanel - place additional content here-->

</Grid>

<!--Sample code showing usage of ApplicationBar-->

<!--<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>

<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text="MenuItem 1"/>

<shell:ApplicationBarMenuItem Text="MenuItem 2"/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

首先我们要向listBox绑定数据，

声明条件：本人工程文件里面有个images文件夹，里面的图片按WP_000006.jpg WP_000007.jpg,排序到WP_0000022.jpg.

public class Images

{

string name1;

BitmapImage image1;

public string Name1

{

set

{

name1 = value;

}

get

{

return name1;

}

}

public BitmapImage Image1

{

set

{

image1 = value;

}

get

{

return image1;

}

}

}

//绑定图片到ListBox

public void InitPicture()

{

Images image = new Images();

string temppic = "WP_00000";

for (int i = 6; i <=22; i++)

{

//wp7不支持直接从本地本机中获取文件，麻烦啊...,只能用Uri

if (i >= 10)

{

temppic = "WP_0000";

}

image.Image1 = new BitmapImage(new Uri("images/" + temppic + i.ToString() + ".jpg", UriKind.Relative));

image.Name1 = "images/" + temppic + i.ToString() + ".jpg";

listimages.Add(image);

image = new Images();

}

this.listBox1.ItemsSource = listimages;

}

//触摸时触发

private void image1_ManipulationStarted_1(object sender, ManipulationStartedEventArgs e)

{

Storyboard sb = new Storyboard();//创建故事面板

Image image1 = sender as Image;//获取被触摸的图片，很重要！！

DoubleAnimation da = new DoubleAnimation();//double类型动画

da.From = 100;

da.To = 500;

da.Duration = new Duration(TimeSpan.FromSeconds(2));//2秒内完成

Storyboard.SetTarget(sb, image1);

Storyboard.SetTargetProperty(da,new PropertyPath("(Image.Width)"));//改变图片宽度

sb.Children.Add(da);

sb.Begin();//开始啦

//image1.BeginAnimation(Image.WidthProperty, da);

}