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個不同的用戶自定義控件。