WindowsPhone7中让相片实现随手指缩放及旋转效果
今天(应该是昨天了,晕)下午和两个哥们围着软件园转了一周 拍了几张照片还有以前的几张 回来想想干脆做个WP7上的应用吧,检验一下自己学习状况 呵呵
先看一下效果
因为模拟器上不能实现双手指的功能 所以前三张是在我的i8700上测试的 由于原图太大进行了缩小
首先建一个WP7项目
主页面用的是Panorama布局 这个页面会经常的切换 所以把上面的图片预览全部设为Button 而不是Image 这样用Button的Click事件避免与mouseUp 及mouseDown事件的影响
用Button显示图片需要自定义一个数据模板
以下是前台Xaml代码
<!--LayoutRoot 是包含所有页面内容的根网格--> <Grid x:Name="LayoutRoot" Background="Transparent"> <controls:Panorama> <controls:Panorama.TitleTemplate> <DataTemplate> <TextBlock Text="五一游玩" Margin="0,30,0,0"/> </DataTemplate> </controls:Panorama.TitleTemplate> <controls:Panorama.Background> <ImageBrush ImageSource="Images/WP_000012.jpg"/> </controls:Panorama.Background> <controls:Panorama.Resources> <ControlTemplate x:Key="imagebutton" TargetType="Button"> <Image Source="{TemplateBinding Content}" Stretch="Fill"/> </ControlTemplate> </controls:Panorama.Resources> <controls:PanoramaItem Header="图片欣赏"> <ScrollViewer> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="150" /> <RowDefinition Height="150" /> <RowDefinition Height="150" /> <RowDefinition Height="150" /> </Grid.RowDefinitions> <Button Name="ImageButton1" Width="180" Height="135" Margin="5" Template="{StaticResource imagebutton}" Content="Images/WP_000009.jpg" Grid.Column="0" Grid.Row="0" Click="ImageButton1_Click"/> <Button Name="ImageButton2" Width="180" Height="135" Margin="5" Template="{StaticResource imagebutton}" Content="Images/WP_000008.jpg" Grid.Column="1" Grid.Row="0" Click="ImageButton1_Click"/> <Button Name="ImageButton3" Width="180" Height="135" Margin="5" Template="{StaticResource imagebutton}" Content="Images/WP_000012.jpg" Grid.Column="0" Grid.Row="1" Click="ImageButton1_Click"/> <Button Name="ImageButton4" Width="180" Height="135" Margin="5" Template="{StaticResource imagebutton}" Content="Images/WP_000013.jpg" Grid.Column="1" Grid.Row="1" Click="ImageButton1_Click"/> <Button Name="ImageButton5" Width="180" Height="135" Margin="5" Template="{StaticResource imagebutton}" Content="Images/WP_000014.jpg" Grid.Column="0" Grid.Row="2" Click="ImageButton1_Click"/> <Button Name="ImageButton6" Width="180" Height="135" Margin="5" Template="{StaticResource imagebutton}" Content="Images/WP_000015.jpg" Grid.Column="1" Grid.Row="2" Click="ImageButton1_Click"/> <Button Name="ImageButton7" Width="180" Height="135" Margin="5" Template="{StaticResource imagebutton}" Content="Images/WP_000019.jpg" Grid.Column="0" Grid.Row="3" Click="ImageButton1_Click"/> </Grid> </ScrollViewer> </controls:PanoramaItem> <controls:PanoramaItem Header="item2"> <Grid /> </controls:PanoramaItem> </controls:Panorama> </Grid>
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace 北京的日子 { public partial class MainPage : PhoneApplicationPage { // 构造函数 public MainPage() { InitializeComponent(); } private void ImageButton1_Click(object sender, RoutedEventArgs e) { Button btn = sender as Button; this.NavigationService.Navigate(new Uri("/PageImages.xaml?picUri=" + btn.Content, UriKind.Relative)); } } }
PageImages.xaml页面
注意需要引用tookit类库 和命名空间
利用tookit监听手势动作
<phone:PhoneApplicationPage x:Class="北京的日子.PageImages" 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" xmlns:tookit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" mc:Ignorable="d" d:DesignHeight="728" d:DesignWidth="480" shell:SystemTray.IsVisible="False" OrientationChanged="PhoneApplicationPage_OrientationChanged"> <!--LayoutRoot 是包含所有页面内容的根网格--> <Grid x:Name="LayoutRoot" Background="Transparent"> <Canvas> <Image Name="image1" Width="480" Canvas.Left="0" Canvas.Top="184" Height="360" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top"> <Image.RenderTransform> <CompositeTransform x:Name="compTransform" CenterX="240" CenterY="364" ScaleX="1" ScaleY="1"/> </Image.RenderTransform> <tookit:GestureService.GestureListener> <tookit:GestureListener DoubleTap="DoubTap" DragDelta="DragDelta" PinchStarted="PinchStarted" PinchDelta="PinchDelta" Hold="OnHold"/> </tookit:GestureService.GestureListener> </Image> </Canvas> </Grid> <!--演示 ApplicationBar 用法的示例代码--> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton IconUri="Icon/appbar.save.rest.png" Text="保存图片" Click="ApplicationBarIconButton_Click"/> <!--<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="按钮 2" Click="ApplicationBarIconButton_Click_1"/>--> <!--<shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem Text="菜单项 1"/> <shell:ApplicationBarMenuItem Text="菜单项 2"/> </shell:ApplicationBar.MenuItems>--> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> </phone:PhoneApplicationPage>
C#代码 详见注释
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; using System.Windows.Media.Imaging; using System.Windows.Resources; using Microsoft.Xna.Framework.Media; using Microsoft.Phone.Tasks; using System.Text.RegularExpressions; namespace 北京的日子 { public partial class PageImages : PhoneApplicationPage { public PageImages() { InitializeComponent(); // this.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(PageImages_ManipulationDelta); } string uri=string.Empty; /// <summary> /// 在页面加载时接收上一个页面传过来图片地址 不同于OnLoad方法 当然也可以用它来实现 /// </summary> /// <param name="e"></param> protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { this.NavigationContext.QueryString.TryGetValue("picUri", out uri); BitmapImage bmp = new BitmapImage(new Uri(uri,UriKind.Relative)); image1.Source = bmp; base.OnNavigatedTo(e); } /// <summary> /// 当页面的方向发生改变时触发的事件 根据页面方向的不同重新为Image控件 /// 和模板及Canvas中的位置进行重新布局 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { if (PageOrientation.LandscapeLeft==e.Orientation||PageOrientation.LandscapeRight==e.Orientation) { image1.Width = 600; image1.Height = 480; compTransform.CenterX = 364; compTransform.CenterY = 240; Canvas.SetLeft(image1, 64); Canvas.SetTop(image1, 0); } if (PageOrientation.PortraitUp==e.Orientation) { image1.Width = 480; image1.Height = 360; compTransform.CenterX = 240; compTransform.CenterY = 364; Canvas.SetLeft(image1, 0); Canvas.SetTop(image1, 184); } } /// <summary> /// 双击图片时发生的事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void DoubTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e) { if (compTransform.ScaleX !=1|| compTransform.ScaleY != 1)//第二次双击恢复初始状态 { compTransform.ScaleX = compTransform.ScaleY = 1; SetCanvas(compTransform.ScaleX); compTransform.TranslateX =0; compTransform.TranslateY = 0; } else {//双击使图片比例放大三倍 compTransform.ScaleX = compTransform.ScaleY = 3; SetCanvas(compTransform.ScaleX); } } /// <summary> /// 相应的在Canvas中的布局也要发生改变使距离左端和顶端的距离放大同样倍数 /// </summary> /// <param name="scaleX">放大或缩小的比例</param> void SetCanvas(double scaleX) { //根据页面方向做不同的调整 if (PageOrientation.PortraitUp==this.Orientation) { Canvas.SetLeft(image1, 0 * scaleX); Canvas.SetTop(image1, 184 * scaleX); } else { Canvas.SetLeft(image1, 64 * scaleX); Canvas.SetTop(image1, 0 * scaleX); } } /// <summary> /// 当一个手指在图片上拖拉时发生 使图片跟随手指移动 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void DragDelta(object sender, DragDeltaGestureEventArgs e) { compTransform.TranslateX += e.HorizontalChange; compTransform.TranslateY += e.VerticalChange; } double initialAngle, initialScale; /// <summary> /// 当双指捏或者扩张这个动作刚开始时发生 记录下这个瞬间模板的比例和角度 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void PinchStarted(object sender, PinchStartedGestureEventArgs e) { initialAngle = compTransform.Rotation; initialScale = compTransform.ScaleX; } /// <summary> /// 当双指捏或者扩张时发生 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void PinchDelta(object sender, PinchGestureEventArgs e) { compTransform.ScaleX = compTransform.ScaleY = initialScale * e.DistanceRatio; SetCanvas(compTransform.ScaleX); compTransform.Rotation =initialAngle+ e.TotalAngleDelta; } /// <summary> /// 当手指放在图片上停留时 约一秒钟 使其恢复初始状态 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void OnHold(object sender, Microsoft.Phone.Controls.GestureEventArgs e) { compTransform.ScaleX = compTransform.ScaleY = 1; SetCanvas(compTransform.ScaleX); compTransform.TranslateX = compTransform.TranslateY = 0; compTransform.Rotation = 0; } /// <summary> /// 保存图片到相册, /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void ApplicationBarIconButton_Click(object sender, EventArgs e) { StreamResourceInfo streamInfo = Application.GetResourceStream(new Uri(uri, UriKind.Relative)); MediaLibrary media = new MediaLibrary(); //其实这里应该先将图片转换为JPEG流编码然后进行存储因为是照片所以直接是jpg格式 就省略了 if (null != media.SavePicture("picName", streamInfo.Stream)) { MessageBox.Show("保存成功!", "提示", MessageBoxButton.OK); } } } }
抛砖引玉 欢迎拍砖 希望大牛能指出不足!!!谢谢!!!
posted on 2012-04-30 06:08 MessageDream 阅读(745) 评论(1) 编辑 收藏 举报