当前位置:编程学习 > wap >>

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 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,