在新聞類的APP中，有一個經常使用的場景：左右滑動屏幕來切換上一條或下一條新聞。

那么通常我們該使用哪種方式去實現呢？可以參考一下Demo的實現步驟。

1，添加Windows Phone用戶自定義控件。例如：

這里我為了演示的方便，添加了5個用戶自定義控件，通常我們在做應用的時候，只需要添加一個用戶自定義控件，結合數據綁定，來承載不同新聞內容。

演示的自定義控件XAML代碼也比較簡單：

1 <UserControl x:Class="PageSliding.WindowsPhoneControl1" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 mc:Ignorable="d" 7 FontFamily="{StaticResource PhoneFontFamilyNormal}" 8 FontSize="{StaticResource PhoneFontSizeNormal}" 9 Foreground="{StaticResource PhoneForegroundBrush}" 10 d:DesignHeight="480" d:DesignWidth="480"> 11 12 <Grid x:Name="LayoutRoot" Background="Red"> 13 <TextBlock Text="用戶空間1"/> 14 </Grid> 15 </UserControl>

這里我只將背景顏色進行了修改和添加了一個TextBlock控件，來區別我添加的5個用戶自定義控件。

2，切換到內容頁面的XAML頁面。

1 <phone:PhoneApplicationPage 2 x:Class="PageSliding.Solution2" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 6 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 7 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 8 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 9 FontFamily="{StaticResource PhoneFontFamilyNormal}" 10 FontSize="{StaticResource PhoneFontSizeNormal}" 11 Foreground="{StaticResource PhoneForegroundBrush}" 12 SupportedOrientations="Portrait" Orientation="Portrait" 13 mc:Ignorable="d" 14 shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded_1"> 15 16 <!--LayoutRoot 是包含所有頁面內容的根網格--> 17 <Grid x:Name="LayoutRoot" Background="Transparent"> 18 <!--ContentPanel - 在此處放置其他內容--> 19 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" ManipulationDelta="ContentPanel_ManipulationDelta_1" ManipulationCompleted="ContentPanel_ManipulationCompleted_1"> 20 <Grid.RenderTransform> 21 <CompositeTransform x:Name="transform"/> 22 </Grid.RenderTransform> 23 </Grid> 24 </Grid> 25 </phone:PhoneApplicationPage>

添加ManipulationDelta和ManipulationCompleted事件，以及添加Grid的CompositeTransform對象。

3，切換到相應.cs頁面。例如：

1 public partial class Solution2 : PhoneApplicationPage 2 { 3 List<UserControl> UserControlList; 4 //當前集合的顯示項的索引 5 int index = 0; 6 public Solution2() 7 { 8 InitializeComponent(); 9 10 //Demo:直接實例化UserControl的集合。 11 UserControlList = new List<UserControl>(){ 12 new WindowsPhoneControl1(), 13 new WindowsPhoneControl2(), 14 new WindowsPhoneControl3(), 15 new WindowsPhoneControl4(), 16 new WindowsPhoneControl5() 17 }; 18 } 19 private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e) 20 { 21 //Demo:首次加載集合的第一項 22 this.ContentPanel.Children.Add(UserControlList[0]); 23 } 24 25 private void ContentPanel_ManipulationDelta_1(object sender, System.Windows.Input.ManipulationDeltaEventArgs e) 26 { 27 //頁面ContentPanel容器只能左右拖動不能上下拖動。 28 transform.TranslateX += e.DeltaManipulation.Translation.X; 29 transform.TranslateY = 0; 30 } 31 32 private void ContentPanel_ManipulationCompleted_1(object sender, System.Windows.Input.ManipulationCompletedEventArgs e) 33 { 34 //ContentPanel容器總轉換的線性運動的X坐標值〉=100 35 if (e.TotalManipulation.Translation.X >= 100) 36 { 37 //加載前一項 38 if (this.index == 0) 39 { 40 MessageBox.Show("當前為第一項"); 41 } 42 else 43 { 44 index -= 1; 45 //加載前一條數據 46 this.ContentPanel.Children.Clear(); 47 this.ContentPanel.Children.Add(UserControlList[index]); 48 } 49 } 50 //ContentPanel容器總轉換的線性運動的X坐標值〈=-100 51 else if (e.TotalManipulation.Translation.X <= -100) 52 { 53 //加載后一項 54 if(this.index==4) 55 { 56 MessageBox.Show("當前為最后一項"); 57 } 58 else 59 { 60 index += 1; 61 //加載后一條數據 62 this.ContentPanel.Children.Clear(); 63 this.ContentPanel.Children.Add(UserControlList[index]); 64 } 65 } 66 //切換之后恢復ContentPanel容器的X偏移量. 67 transform.TranslateX = 0; 68 } 69 }

通過以上的操作，我們就可以左右滑動切換剛才定義的5個不同用戶自定義控件了。

另外我們也可以參考該文章：windows phone開發學習--自己實現一個Gallery control??該文章的實現方式主要是一次加載3個不同的用戶控件，通過左右滑動來加載3個不同的用戶自定義控件。

轉載于:https://www.cnblogs.com/wzk89/archive/2013/05/24/3097325.html

總結

以上是生活随笔為你收集整理的Windows Phone 内容滑动切换实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。