Windows Phone 内容滑动切换实现

在新闻类的APP中，有一个经常使用的场景：左右滑动屏幕来切换上一条或下一条新闻。

那么通常我们该使用哪种方式去实现呢？可以参考一下Demo的实现步骤。

1，添加Windows Phone用户自定义控件。例如：

这里我为了演示的方便，添加了5个用户自定义控件，通常我们在做应用的时候，只需要添加一个用户自定义控件，结合数据绑定，来承载不同新闻内容。

演示的自定义控件XAML代码也比较简单：

<UserControl x:Class="PageSliding.WindowsPhoneControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">
    
    <Grid x:Name="LayoutRoot" Background="Red">
        <TextBlock Text="用户空间1"/>
    </Grid>
</UserControl>

这里我只将背景颜色进行了修改和添加了一个TextBlock控件，来区别我添加的5个用户自定义控件。

2，切换到内容页面的XAML页面。

<phone:PhoneApplicationPage
    x:Class="PageSliding.Solution2"
    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"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded_1">

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">       
        <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" ManipulationDelta="ContentPanel_ManipulationDelta_1" ManipulationCompleted="ContentPanel_ManipulationCompleted_1">
            <Grid.RenderTransform>            
                <CompositeTransform  x:Name="transform"/>
            </Grid.RenderTransform>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

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

3，切换到相应.cs页面。例如：

    public partial class Solution2 : PhoneApplicationPage
    {
        List<UserControl> UserControlList;
        //当前集合的显示项的索引
        int index = 0;
        public Solution2()
        {
            InitializeComponent();

            //Demo:直接实例化UserControl的集合。
            UserControlList = new List<UserControl>(){
            new WindowsPhoneControl1(),
            new WindowsPhoneControl2(),
            new WindowsPhoneControl3(),
            new WindowsPhoneControl4(),
            new WindowsPhoneControl5()
            };
        }
        private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e)
        {
            //Demo:首次加载集合的第一项
            this.ContentPanel.Children.Add(UserControlList[0]);         
        }

        private void ContentPanel_ManipulationDelta_1(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            //页面ContentPanel容器只能左右拖动不能上下拖动。
            transform.TranslateX += e.DeltaManipulation.Translation.X;
            transform.TranslateY = 0;
        }

        private void ContentPanel_ManipulationCompleted_1(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
        {
            //ContentPanel容器总转换的线性运动的X坐标值〉=100
            if (e.TotalManipulation.Translation.X >= 100)
            {
                //加载前一项
                if (this.index == 0)
                {
                    MessageBox.Show("当前为第一项");
                }
                else
                {
                    index -= 1;
                    //加载前一条数据
                    this.ContentPanel.Children.Clear();
                    this.ContentPanel.Children.Add(UserControlList[index]);
                }
            }
            //ContentPanel容器总转换的线性运动的X坐标值〈=-100
            else if (e.TotalManipulation.Translation.X <= -100)
            {
                //加载后一项
                if(this.index==4)
                {
                    MessageBox.Show("当前为最后一项");
                }
                else
                {
                    index += 1;
                    //加载后一条数据
                    this.ContentPanel.Children.Clear();
                    this.ContentPanel.Children.Add(UserControlList[index]);
                }
            }
            //切换之后恢复ContentPanel容器的X偏移量.
            transform.TranslateX = 0;
        }
    }

通过以上的操作，我们就可以左右滑动切换刚才定义的5个不同用户自定义控件了。

另外我们也可以参考该文章：windows phone开发学习--自己实现一个Gallery control  该文章的实现方式主要是一次加载3个不同的用户控件，通过左右滑动来加载3个不同的用户自定义控件。