Slide in Windows 10 (uwp) development, windows10uwp

Slide in Windows 10 (uwp) development, windows10uwp

In the continuous development of a Windows 10 application, apart from some pitfalls I encountered in Windows 10 (uwp) development in the previous blog, there are still many imperfections, such(UIElement. Foreground). (GradientBrush. GradientStops) [1]. (GradientStop. Offset)This setting cannot take effect, and the elements in RelativePanel cannot automatically adapt to the size. You need to manually control the width and height, and make some size errors when the window is positioned on the backend. Although it is a continuation of the WPF technology, it must be carefully handled in many places. Many developers are also considering how to solve and how to better solve these problems.

 

Some controls were also written during the development process, such as custom text boxes (TextBlock has become a sealed class), pull-down refresh and load more ListView. it is relatively simple, and the function is relatively complete and can be used. Currently, there is only one slide. of course, it still has a fatal defect, which will be shown later.

 

Slide should be a simple task. In combination with a series of Manipulation events, you can easily get the offset and offset speed. of course, there are still many restrictions on this api compared with other platforms. microsoft has eaten too many events at the underlying level, hoping to be more open.

 

Check the Demo Video:

Http://v.youku.com/v_show/id_XMTMyNTAxMDQ2MA==.html? From = y1.7-1.2

 

Let's talk about the layout on the interface.

<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>

The layout on the interface is like this: the right side of the Grid is a 20-pixel Rectangle, which is used to receive the gesture from the side. in addition to the Grid, we need to partition the Panel, and then DismissLayout is used to receive the content outside our sliding area. We can hide our Panel when we click.

 

Background code

Public MainPage () {this. InitializeComponent (); // if it is another control with a scroll, you must disable the scroll function before using the mobile version. The PC version does not affect 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 ;}

The background Code only processes the offset in various situations, and the constructor disables scrolling. This is the fatal part of the slide control, if a widget such as ListView or ListBox exists in the Panel, its gesture event will be eaten. the strange thing is that the mobile phone end will be eaten, but the PC end will not. it is hoped that the mobile phone version can be operated like the PC version during the official version.

You can also add some animations for better display results.

<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>

As long as the Panel is not a ListView control, you can directly use it in the code.

 

Actual use effect:

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

Source code download: http://files.cnblogs.com/files/youngytj/SwipeView.zip