WPF如何实现类似iPhone界面切换的效果 （version .1）

转自：http://blog.csdn.net/fallincloud/article/details/6968764

在论坛上见到有人提出了这个问题（WPF实现点击横向切换界面）

我简单地做了个Sample。

效果图1：

效果图2：

设计思路

将这多个界面放入一个Orientation为Horizontal的StackPanel当中，点击Next时，里面所有控件执行TranslteTransform动画。

实现

xaml

  1. <Window x:Class="WPFNavigation.MainWindow"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="MainWindow" Height="350" Width="400">
  5. <Grid>
  6. <Grid.RowDefinitions>
  7. <RowDefinition Height="*"></RowDefinition>
  8. <RowDefinition Height="Auto"></RowDefinition>
  9. </Grid.RowDefinitions>
  10. <StackPanel Orientation="Horizontal"
  11. x:Name="NavigationPanel"
  12. Height="300"
  13. HorizontalAlignment="Left"
  14. VerticalAlignment="Top">
  15. <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
  16. Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"
  17. Background="Blue" >
  18. <TextBlock FontSize="36">Page1</TextBlock>
  19. </Grid>
  20. <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
  21. Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"
  22. Background="Violet">
  23. <TextBlock FontSize="36">Page2</TextBlock>
  24. </Grid>
  25. <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
  26. Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"
  27. Background="Purple" >
  28. <TextBlock FontSize="36">Page3</TextBlock>
  29. </Grid>
  30. </StackPanel>
  31. <StackPanel Grid.Row="1"  Orientation="Horizontal" >
  32. <Button Content="Previous" x:Name="ButtonPreviousPage" Click="ButtonPreviousPage_Click"></Button>
  33. <Button Content="Next" x:Name="ButtonNextPage" Click="ButtonNextPage_Click"></Button>
  34. </StackPanel>
  35. </Grid>
  36. </Window>

cs中

    1. /// <summary>
    2. /// Interaction logic for MainWindow.xaml
    3. /// </summary>
    4. public partial class MainWindow : Window
    5. {
    6. private static readonly double COUNT_PAGE = 3;
    7. private TranslateTransform NavigationPanelTranslateTransform;
    8. public MainWindow()
    9. {
    10. InitializeComponent();
    11. NavigationPanelTranslateTransform = new TranslateTransform();
    12. this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
    13. }
    14. void MainWindow_Loaded(object sender, RoutedEventArgs e)
    15. {
    16. foreach (FrameworkElement fe in NavigationPanel.Children)
    17. {
    18. fe.RenderTransform = NavigationPanelTranslateTransform;
    19. }
    20. DeterminButtonStates();
    21. }
    22. private void DeterminButtonStates()
    23. {
    24. double currentTranX = NavigationPanelTranslateTransform.X;
    25. if (currentTranX >= 0)
    26. {
    27. ButtonPreviousPage.IsEnabled = false;
    28. }
    29. else if (currentTranX <= -(COUNT_PAGE - 1) * this.ActualWidth)
    30. {
    31. ButtonNextPage.IsEnabled = false;
    32. }
    33. else
    34. {
    35. ButtonPreviousPage.IsEnabled = true;
    36. ButtonNextPage.IsEnabled = true;
    37. }
    38. }
    39. private void ButtonPreviousPage_Click(object sender, RoutedEventArgs e)
    40. {
    41. double currentTranX = NavigationPanelTranslateTransform.X;
    42. DoubleAnimation da = new DoubleAnimation(currentTranX, currentTranX+this.ActualWidth, TimeSpan.FromMilliseconds(250));
    43. da.Completed += (o1, e1) =>
    44. {
    45. DeterminButtonStates();
    46. };
    47. NavigationPanelTranslateTransform.BeginAnimation(TranslateTransform.XProperty, da);
    48. }
    49. private void ButtonNextPage_Click(object sender, RoutedEventArgs e)
    50. {
    51. double currentTranX = NavigationPanelTranslateTransform.X;
    52. DoubleAnimation da = new DoubleAnimation(currentTranX, currentTranX - this.ActualWidth, TimeSpan.FromMilliseconds(250));
    53. da.Completed += (o1, e1) =>
    54. {
    55. DeterminButtonStates();
    56. };
    57. NavigationPanelTranslateTransform.BeginAnimation(TranslateTransform.XProperty, da);
    58. }
    59. }

WPF如何实现类似iPhone界面切换的效果 （version .2）

转自：http://blog.csdn.net/fallincloud/article/details/6969329

前面写了篇WPF如何实现类似iPhone界面切换的效果 （version .1）

现在又花了点时间重构了下，将动画的效果和Previous和Next这两个按钮的状态控制都封装了起来，效果依然和前面一样

不过重用性高了许多。使用方法如下:

XAML:

  1. <Window x:Class="WPFNavigation.MainWindow"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:local="clr-namespace:WPFNavigation"
  5. Title="MainWindow" Height="350" Width="400">
  6. <Grid>
  7. <Grid.RowDefinitions>
  8. <RowDefinition Height="*"></RowDefinition>
  9. <RowDefinition Height="Auto"></RowDefinition>
  10. </Grid.RowDefinitions>
  11. <local:NavigationPanel Orientation="Horizontal"
  12. x:Name="NavigationPanel"
  13. Height="300"
  14. HorizontalAlignment="Left"
  15. VerticalAlignment="Top">
  16. <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
  17. Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type local:NavigationPanel}}, Path=ActualHeight}"
  18. Background="Blue" >
  19. <TextBlock FontSize="36">Page1</TextBlock>
  20. </Grid>
  21. <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
  22. Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type local:NavigationPanel}}, Path=ActualHeight}"
  23. Background="Violet">
  24. <TextBlock FontSize="36">Page2</TextBlock>
  25. </Grid>
  26. <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
  27. Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type local:NavigationPanel}}, Path=ActualHeight}"
  28. Background="Purple" >
  29. <TextBlock FontSize="36">Page3</TextBlock>
  30. </Grid>
  31. </local:NavigationPanel>
  32. <StackPanel Grid.Row="1"  Orientation="Horizontal" >
  33. <Button Content="Previous" x:Name="ButtonPreviousPage"
  34. IsEnabled="{Binding ElementName=NavigationPanel, Path=PreviousIsValid, Mode=OneWay}"
  35. Click="ButtonPreviousPage_Click"></Button>
  36. <Button Content="Next" x:Name="ButtonNextPage" Click="ButtonNextPage_Click"
  37. IsEnabled="{Binding ElementName=NavigationPanel, Path=NextIsValid, Mode=OneWay}"></Button>
  38. </StackPanel>
  39. </Grid>
  40. </Window>

C#:

  1. /// <summary>
  2. /// Interaction logic for MainWindow.xaml
  3. /// </summary>
  4. public partial class MainWindow : Window
  5. {
  6. public MainWindow()
  7. {
  8. InitializeComponent();
  9. }
  10. private void ButtonPreviousPage_Click(object sender, RoutedEventArgs e)
  11. {
  12. NavigationPanel.Previous();
  13. }
  14. private void ButtonNextPage_Click(object sender, RoutedEventArgs e)
  15. {
  16. NavigationPanel.Next();
  17. }
  18. }

以上是用法，封装的NavigationPanel设计如下：

具体实现如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Data;
  8. using System.Windows.Documents;
  9. using System.Windows.Input;
  10. using System.Windows.Media;
  11. using System.Windows.Media.Imaging;
  12. using System.Windows.Navigation;
  13. using System.Windows.Shapes;
  14. using System.Windows.Media.Animation;
  15. namespace WPFNavigation
  16. {
  17. public class NavigationPanel : StackPanel
  18. {
  19. public event EventHandler AnimationComplte;
  20. private static double COUNT_OF_PAGE;
  21. private TranslateTransform NavigationPanelTranslateTransform;
  22. private static readonly TimeSpan DURATION = TimeSpan.FromMilliseconds(250);
  23. public NavigationPanel():base()
  24. {
  25. this.Orientation = Orientation.Horizontal;
  26. NavigationPanelTranslateTransform = new TranslateTransform();
  27. this.Loaded += new RoutedEventHandler(NavigationPanel_Loaded);
  28. }
  29. void NavigationPanel_Loaded(object sender, RoutedEventArgs e)
  30. {
  31. COUNT_OF_PAGE = this.Children.Count;
  32. CurrentIndex = 0;
  33. foreach (FrameworkElement fe in this.Children)
  34. {
  35. fe.RenderTransform = NavigationPanelTranslateTransform;
  36. }
  37. }
  38. public void Next()
  39. {
  40. AnimationChildren(true);
  41. }
  42. public void Previous()
  43. {
  44. AnimationChildren(false);
  45. }
  46. private bool ValidateNext()
  47. {
  48. return CurrentIndex < (COUNT_OF_PAGE - 1) && CurrentIndex >= 0;
  49. }
  50. private bool ValidatePrevious()
  51. {
  52. return CurrentIndex <= (COUNT_OF_PAGE - 1) && CurrentIndex > 0;
  53. }
  54. private bool ValidateCurrentIndex()
  55. {
  56. if (CurrentIndex > -1 && CurrentIndex < this.Children.Count)
  57. {
  58. return true;
  59. }
  60. return false;
  61. }
  62. private  void AnimationChildren(bool forward)
  63. {
  64. double currentTranX = NavigationPanelTranslateTransform.X;
  65. double nextTranX = currentTranX;
  66. if (forward)
  67. {
  68. if (ValidateCurrentIndex())
  69. {
  70. nextTranX -= (this.Children[CurrentIndex] as FrameworkElement).ActualWidth;
  71. }
  72. }
  73. else
  74. {
  75. if (ValidateCurrentIndex())
  76. {
  77. nextTranX += (this.Children[CurrentIndex] as FrameworkElement).ActualWidth;
  78. }
  79. }
  80. DoubleAnimation da = new DoubleAnimation(currentTranX, nextTranX, DURATION);
  81. da.Completed += (o1, e1) =>
  82. {
  83. CurrentIndex += forward ? 1 : -1;
  84. if (AnimationComplte != null)
  85. {
  86. AnimationComplte(this, e1);
  87. }
  88. };
  89. NavigationPanelTranslateTransform.BeginAnimation(TranslateTransform.XProperty, da);
  90. }
  91. #region CurrentIndex
  92. /// <summary>
  93. /// The <see cref="CurrentIndex" /> dependency property's name.
  94. /// </summary>
  95. public const string CurrentIndexPropertyName = "CurrentIndex";
  96. /// <summary>
  97. /// Gets or sets the value of the <see cref="CurrentIndex" />
  98. /// property. This is a dependency property.
  99. /// </summary>
  100. public int CurrentIndex
  101. {
  102. get
  103. {
  104. return (int)GetValue(CurrentIndexProperty);
  105. }
  106. set
  107. {
  108. SetValue(CurrentIndexProperty, value);
  109. }
  110. }
  111. /// <summary>
  112. /// Identifies the <see cref="CurrentIndex" /> dependency property.
  113. /// </summary>
  114. public static readonly DependencyProperty CurrentIndexProperty = DependencyProperty.Register(
  115. CurrentIndexPropertyName,
  116. typeof(int),
  117. typeof(NavigationPanel),
  118. new UIPropertyMetadata(-1, OnCurrentIndexChanged));
  119. private static void OnCurrentIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  120. {
  121. (d as NavigationPanel).OnCurrentIndexChanged((int)e.OldValue, (int)e.NewValue);
  122. }
  123. protected virtual void OnCurrentIndexChanged(int oldIndex, int newIndex)
  124. {
  125. NextIsValid = ValidateNext();
  126. PreviousIsValid = ValidatePrevious();
  127. }
  128. #endregion // CurrentIndex
  129. #region NextIsValid
  130. /// <summary>
  131. /// The <see cref="NextIsValid" /> dependency property's name.
  132. /// </summary>
  133. public const string NextIsValidPropertyName = "NextIsValid";
  134. /// <summary>
  135. /// Gets or sets the value of the <see cref="NextIsValid" />
  136. /// property. This is a dependency property.
  137. /// </summary>
  138. public bool NextIsValid
  139. {
  140. get
  141. {
  142. return (bool)GetValue(NextIsValidProperty);
  143. }
  144. set
  145. {
  146. SetValue(NextIsValidProperty, value);
  147. }
  148. }
  149. /// <summary>
  150. /// Identifies the <see cref="NextIsValid" /> dependency property.
  151. /// </summary>
  152. public static readonly DependencyProperty NextIsValidProperty = DependencyProperty.Register(
  153. NextIsValidPropertyName,
  154. typeof(bool),
  155. typeof(NavigationPanel),
  156. new UIPropertyMetadata(false));
  157. #endregion // NextIsValid
  158. #region PreviousIsValid
  159. /// <summary>
  160. /// The <see cref="PreviousIsValid" /> dependency property's name.
  161. /// </summary>
  162. public const string PreviousIsValidPropertyName = "PreviousIsValid";
  163. /// <summary>
  164. /// Gets or sets the value of the <see cref="PreviousIsValid" />
  165. /// property. This is a dependency property.
  166. /// </summary>
  167. public bool PreviousIsValid
  168. {
  169. get
  170. {
  171. return (bool)GetValue(PreviousIsValidProperty);
  172. }
  173. set
  174. {
  175. SetValue(PreviousIsValidProperty, value);
  176. }
  177. }
  178. /// <summary>
  179. /// Identifies the <see cref="PreviousIsValid" /> dependency property.
  180. /// </summary>
  181. public static readonly DependencyProperty PreviousIsValidProperty = DependencyProperty.Register(
  182. PreviousIsValidPropertyName,
  183. typeof(bool),
  184. typeof(NavigationPanel),
  185. new UIPropertyMetadata(false));
  186. #endregion // PreviousIsValid
  187. }
  188. }

WPF如何实现类似iPhone界面切换的效果(转载)的更多相关文章

  1. 编写最简单的 iPhone 界面切换应用

    编写最简单的 iPhone 界面切换应用   以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建 ...

  2. Xcode界面切换动画效果

    CATransition *animation = [CATransition animation]; [animation setDuration:0.2f]; [animation setTimi ...

  3. WPF触控程序开发(三)——类似IPhone相册的反弹效果

    用过IPhone的都知道,IPhone相册里,当图片放大到一定程度后,手指一放,会自动缩回,移动图片超出边框后手指一放,图片也会自动缩回,整个过程非常和谐.自然.精确,那么WPF能否做到呢,答案是肯定 ...

  4. 巧妙利用jQuery和PHP打造类似360安全卫士防火墙功能开关(类似iphone界面)效果

    安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上. 准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: CREATE TABLE `p ...

  5. 不用图片，纯Css3实现超酷的类似iphone的玻璃气泡效果

    最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果. 这里分享下实现心得,希望能给大家一点启发. 首先分析下iphone的气泡效果有一下特点 1. 四面圆角 2. 界面上向下 ...

  6. WPF点击不同界面上的按钮实现界面切换

    原文:WPF点击不同界面上的按钮实现界面切换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_29844879/article/details/ ...

  7. Html5 Egret游戏开发 成语大挑战（五）界面切换和数据处理

    经过前面的制作,使用Egret的Wing很快完成了开始界面和选关卡界面,下面通常来说就是游戏界面,但此时界面切换和关卡数据还没有准备好,这次讲解界面的切换和关卡数据的解析.前面多次修改了Main.ts ...

  8. C#实现多国语言的界面切换

    在PictureStudio中,我需要实现多国语言的界面切换,而且切换各种语言版本的时候希望程序是动态的加载语言,不希望切换语言后重新启动程序. 实现这样的功能可以有很愚蠢的方法,比如说你可以在程序中 ...

  9. Expression Blend 的点滴（4）--创建类似iPhone屏幕锁控件（下）

    原文:Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下) 接着上篇... 接下去,将一步步演示如果创建当点击checkBox后,其中的按钮由左边滑动到右边,表示处于 ...

随机推荐

  1. jmeter 使用URL重写处理用户会话

    如果您的web应用程序使用URL重写而不是cookie保存会话信息, 那么你需要做一些额外的工作来测试你的网站. 正确应对URL重写,JMeter需要解析HTML 接收从服务器和检索独特的会话ID,使 ...

  2. [Tomcat] Tomcat远程调试

    如何用eclispe远程调试tomcat 关键步骤: 1)修改启动脚本startup.bat 复制startup.bat为startup-debug.bat,然后打开startup-debug.bat ...

  3. (12)odoo各种提前期和时间

    1)Product的提前期    Customer Lead Time(sale_delay):客户提前期,指SO确认到向客户发货的天数,由于销售数量不同该时间也不同,因此,这里是一个平均时间.    ...

  4. Uva----------(11078)Open Credit System

    Open Credit System Input:Standard Input Output: Standard Output In an open credit system, the studen ...

  5. jQuery修改后代、兄弟样式

    <div> <div >1</div> <div class="one"> 2 <div>2_1 <div> ...

  6. Graphical installers are not supported by the vm

    http://www-01.ibm.com/support/docview.wss?uid=swg21462180 Technote (troubleshooting) Problem(Abstrac ...

  7. su和su -和sudo

    1.su和sudo没有切换工作目录和环境变量,只是赋予用户权限, 而su -是真正切换到root登录,工作目录切换到/root,环境变量也同时改变. [root@oc3408554812 home]# ...

  8. sharepoint workflow不能正常使用

    程序集“Microsoft.SharePoint.WorkflowServices, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce ...

  9. JS引用类型之——数组

    前言 数组作为JS中非常常用的引用类型,其功能是非常强大滴,今天小猪就彻底的看了下它.为了防止猪脑子不够用所以记录在案呐 1.数组的创建 var arrayObj = new Array(); //创 ...

  10. 转载：完全卸载oracle11g步骤

    完全卸载oracle11g步骤: 1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务. 2. 开始->程序->Oracle - OraHo ...