Windows Phone sliding switching

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

In the news in APP, there is a frequently used scene: Sliding around the screen to switch on one or another.

So often we should use what kind of means to achieve? You can refer to the Demo implementation steps.

1, Add a Windows Phone user control. For example:

Here I am in order to demonstrate the convenience, add 5 user controls, usually when we do use, only need to add a user control, combined with data binding, bearing different news content.

Demo of the XAML custom control code is relatively simple:

 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="User space 1"/>
14     </Grid>
15 </UserControl>

Here I will only the background color is modified and add an TextBlock control, to distinguish between 5 user controls I added.

2, Switch to the XAML page content page.

 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 is the root of the grid contains all the content of the page-->
17     <Grid x:Name="LayoutRoot" Background="Transparent">       
18         <!--ContentPanel - placing other content here-->
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>

Add the ManipulationDelta and ManipulationCompleted events, and the addition of Grid CompositeTransform objects.

3, Switching over to the corresponding.Cs page. For example:

 1     public partial class Solution2 : PhoneApplicationPage
 2     {
 3         List<UserControl> UserControlList;
 4         //Display item index set to the current
 5         int index = 0;
 6         public Solution2()
 7         {
 8             InitializeComponent();
 9 
10             //Set Demo: instantiated directly 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             //The first set of Demo: for the first time loading
22             this.ContentPanel.Children.Add(UserControlList[0]);         
23         }
24 
25         private void ContentPanel_ManipulationDelta_1(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
26         {
27             //Page ContentPanel container can only drag around not up and down drag. 
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             //X coordinates of linear motion ContentPanel container total conversion values〉=100
35             if (e.TotalManipulation.Translation.X >= 100)
36             {
37                 //Before loading a
38                 if (this.index == 0)
39                 {
40                     MessageBox.Show("The first item");
41                 }
42                 else
43                 {
44                     index -= 1;
45                     //Before loading a data
46                     this.ContentPanel.Children.Clear();
47                     this.ContentPanel.Children.Add(UserControlList[index]);
48                 }
49             }
50             //X coordinates of linear motion ContentPanel container total conversion values〈=-100
51             else if (e.TotalManipulation.Translation.X <= -100)
52             {
53                 //After loading a
54                 if(this.index==4)
55                 {
56                     MessageBox.Show("The last one");
57                 }
58                 else
59                 {
60                     index += 1;
61                     //After loading a data
62                     this.ContentPanel.Children.Clear();
63                     this.ContentPanel.Children.Add(UserControlList[index]);
64                 }
65             }
66             //The X offset recovery ContentPanel container after switching.
67             transform.TranslateX = 0;
68         }
69     }

Through these operations, we can around the sliding switch just defined 5 different user controls.

We also can refer to this article: Windows Phone Development Learning -- and achieve a Gallery control in the article is mainly a loading of 3 different user controls, to load 3 different user custom control through the left and right sliding.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Grover at November 27, 2013 - 9:10 AM