Windows Phone 实现类似“微博”下拉刷新效果
在我的O7上跑了下张善友写的博客园阅读APP,有很多体验上的想法,一时技痒想实现下拉刷新的效果。
如果要实现下拉的效果就需要三个状态,见下图:
第一种状态(提示下拉可以更新博客园新闻):
第二种状态(提示下拉的幅度已够可以释放进入更新操作)
第三种状态(提示正在更新,更新完毕回到第一个状态)
上面这个效果为了方便独立到一个UserControl中,代码如下:
XAML:
<UserControl x:Class="sdkRSSReaderCS.LoadingBox"
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">
<StackPanel Orientation="Horizontal">
<Grid Margin="8,0,0,0" Width="50" Height="50">
<Image x:Name="PulldownArrow" Width="50" Height="50" Source="/sdkRSSReaderCS;component/images/pulldown_arrow.png">
<Image.RenderTransform>
<RotateTransform x:Name="FlipTransform" CenterX="25" CenterY="25" Angle="180"/>
</Image.RenderTransform>
<Image.Resources>
<Storyboard x:Name="FlipDown">
<DoubleAnimation Storyboard.TargetName="FlipTransform"
Storyboard.TargetProperty="Angle"
From="0" To="180" Duration="0:0:0.2"/>
</Storyboard>
<Storyboard x:Name="FlipUp">
<DoubleAnimation Storyboard.TargetName="FlipTransform"
Storyboard.TargetProperty="Angle"
From="180" To="0" Duration="0:0:0.2"/>
</Storyboard>
</Image.Resources>
</Image>
<Image x:Name="SpinningBall" Source="/sdkRSSReaderCS;component/images/spinning_ball.png" Width="36" Height="36">
<Image.RenderTransform>
<RotateTransform x:Name="SpinTransform" CenterX="18" CenterY="18"/>
</Image.RenderTransform>
<Image.Resources>
<Storyboard x:Name="Spin">
<DoubleAnimation Storyboard.TargetName="SpinTransform"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:1"
RepeatBehavior="Forever"/>
</Storyboard>
</Image.Resources>
</Image>
</Grid>
&
补充:移动开发 , Windows Phone ,