Windows10(uwp)開發中的側滑

還是在持續的開發一款Windows10的應用中,除了上篇博客講講我在Windows10(uwp)開發中遇到的一些坑,其實還有很多不完善的地方，比如(UIElement.Foreground).(GradientBrush.GradientStops)[1].(GradientStop.Offset)這種設置無法生效，還有RelativePanel內的元素不能自動的適應大小，要去手動控制寬高度，以及窗口在靠邊的時候一些尺寸上的錯誤等等。雖然是WPF技術之后的延續，但是很多地方還是要小心仔細的處理，很多開發上的注意力也是在考慮如何解決以及如何更好的解決這些問題。

 

在開發的過程中其實也寫了一些控件，比如自定義的文本框(TextBlock已經變成了密封類),下拉刷新以及加載更多的ListView.比較簡單,而且功能上比較完善的可以拿出來用的目前大概只有一個側滑.當然,它依然有一個致命的缺陷,這個稍后再表.

 

側滑應該是一個比較簡單的東西,配合Manipulation一系列的事件,獲取偏移量以及偏移速度就能輕松實現.當然,這套api和其他平台比,真的還是有很多的限制的.微軟在底層吃掉了過多的事件,希望能更加開放點.

 

看下演示視頻:

http://v.youku.com/v_show/id_XMTMyNTAxMDQ2MA==.html?from=y1.7-1.2

 

先來說下界面上的布局.

<Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="20"/>
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Green" x:Name="DismissLayout" Tapped="DismissLayout_Tapped" Visibility="Collapsed" Grid.Column="0"/>
            <Rectangle Fill="Red" Grid.Column="1" ManipulationCompleted="ManipulationCompleted"  x:Name="ManipulationLayout"
              ManipulationDelta="ManipulationDelta" 
              ManipulationMode="TranslateX">
                <Rectangle.RenderTransform>
                    <CompositeTransform/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
        <Grid Background="White" HorizontalAlignment="Right"  Margin="0,0,-300,0" Width="300"
              x:Name="Panel"
              ManipulationCompleted="ManipulationCompleted" 
              ManipulationDelta="ManipulationDelta" 
              ManipulationMode="TranslateX">
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
            <ListBox Name="listbox" Background="Yellow">
                <ListBoxItem Content="123"/>
                ...
                <ListBoxItem Content="123"/>
            </ListBox>
        </Grid>
    </Grid>

界面上的布局大概是這樣的:Grid的右側是一個20像素的Rectangle,用來接收從側邊進入的手勢.然后在Grid之外,是我們需要划入的Panel,然后DismissLayout是用來接收我們在我們滑動區域之外的內容,可以在我們點擊的時候,隱藏掉我們的Panel.

 

后台的代碼

public MainPage()
        {
            this.InitializeComponent();
            //如果是其他的帶有滾動的控件，要禁用滾動，手機版才能使用。PC版無影響
            ScrollViewer.SetVerticalScrollMode(listbox, ScrollMode.Disabled);
        }

        private new void ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            var x = e.Velocities.Linear.X;
            if (x <= -0.1)
            {
                OpenPanel();
            }
            else if (x > -0.1 && x < 0.1)
            {
                if (Math.Abs((Panel.RenderTransform as CompositeTransform).TranslateX) > 150)
                {
                    OpenPanel();
                }
                else
                {
                    ClosePanel();
                }

            }
            else
            {
                ClosePanel();
            }
        }

        private new void ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            var x = (Panel.RenderTransform as CompositeTransform).TranslateX + e.Delta.Translation.X;
            if (x < -300)
            {
                x = -300;
            }
            (Panel.RenderTransform as CompositeTransform).TranslateX = x;
            (ManipulationLayout.RenderTransform as CompositeTransform).TranslateX = x;
        }

        private void DismissLayout_Tapped(object sender, TappedRoutedEventArgs e)
        {
            ClosePanel();
        }

        private void OpenPanel()
        {
            OpenView.Begin();
            DismissLayout.Visibility = Visibility.Visible;
        }

        private void ClosePanel()
        {
            CloseView.Begin();
            DismissLayout.Visibility = Visibility.Collapsed;
        }

后台的代碼只是處理各種情況下的偏移量,其中在構造函數內禁用了滾動,這就是這個側滑控件致命的地方,Panel里面如果存在ListView或者ListBox之類的控件的時候,它的手勢事件會被吃掉.奇怪的是手機端是會被吃掉,但是PC端不會.希望手機版在正式版的時候,也可以像PC版一樣操作.

為了比較好的顯示效果,也可以加入一些動畫.

<Storyboard x:Name="OpenView">
            <DoubleAnimation Duration="0:0:0.2" To="-300" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ManipulationLayout" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Duration="0:0:0.2" To="-300" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Panel" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="CloseView">
            <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ManipulationLayout" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Panel" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

只要Panel里不是什么ListView之類的控件,可以直接放入代碼中使用.

 

實際的使用效果:

http://v.youku.com/v_show/id_XMTMyNTAxMDkyOA==.html

源碼下載:http://files.cnblogs.com/files/youngytj/SwipeView.zip