none
请问windows应用商店图片轮播的效果是怎么做出来的?用到哪些控件? RRS feed

  • 问题

  • 就是windows 应用商店  左侧不是有给图片轮播, 每隔几秒换一张图片,这个功能应该是定时器+Image

    但是大图片旁边的小图标是怎么做的?

    这个效果,左侧旁边是动态读取绑定数据的,绑定源有几张图片就有几列,困扰我很久了 求大神指点迷津!

    2014年6月27日 6:24

答案

  • 这个还是具体要看你图片量和图片大小的,举个例子来说如果图片大小适中,设备不错,Image加载速度够快,那么何必要Flip呢?Flip或许会有预加载的方式,不过也会影响到程序的运行速度,如果图片量很大,那么Flip的加载速度不一定比Image快。

    另外Flip并不是8.1才有的东西,8.0里面也有,也可以使用哦。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年7月1日 2:29
    版主
  • 找到怎么改了,谢谢!结贴。编辑FilpView样式 把他里面的BUTTON都注释就可以了!!
    2014年7月1日 5:14

全部回复

  • 你好。

    Windows 应用商店的应用进行了几次的更新,不知你指的是哪个版本的效果,如果方便,最好能贴一下效果图。

    就你的描述,我的建议是使用 FlipView 控件来实现。

    FlipView 可以作为图片轮播的容器,支持手动轮播和定时自动轮播。

    实现方式可以参见我回答过的一个类似的问题:MSDN 图片轮放

    至于大图片旁边的小图标,可以放在ListView 中,在自动轮播时,在大图片SelectedIndex变化的时候触发小图标选中的改变。

    2014年6月27日 7:08
    版主
  • 参考shao.meng的帖子,思路大概就是这样,我提供几个比较有用的API吧。

    1,定时器: DispatchTimer,可以用来定时触发某个事件,比如说FlipView的切换图片(当然使用Image控件也可以做出来,区别在于FlipView是切换已经加载的图片,Image是重新加载新绑定的图片,两者或有性能差别,请按实际情况考虑使用)。

    2,大图标旁边的小图片?那就是一个ListView。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月28日 2:52
    版主
  • image+DispatchTimer实现了切换的效果,之前我也是准备用FilpView但是他不能点击 并且有切换的按钮.
    2014年6月30日 6:50
  • 大神,由于我论坛级低 不能贴图片,大神能不能帮助我 给个QQ 我好截图给你看。麻烦指点迷津 感激不尽!
    2014年6月30日 6:52
  • FilpView不能点击,但是能切换?不是很明白什么意思。

    不好意思,我这里不能把私人的QQ给你,不过我认为你可以把图片或者Sample上传到OneDrive上分享给我们,也是一样的哈。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月30日 8:20
    版主
  • 就是FilpView不是点图片左右的箭头会切换图片,现在我不需要这个功能怎么把他隐藏掉?是那个属性?
    2014年7月1日 1:17
  • 你好,我有一个疑问,既然你不需要向左向右切换的箭头,为什么还要用FlipViewer控件?这个控件存在的意义就是让用户通过左右切换来浏览图片或者其他内容,如果你不需要箭头的话,直接使用Image不就可以啦~

    另外商店里面使用的的确是FlipViewer控件,请参见下图,并非左右移动,而是上下移动,使用的代码是

                     <FlipView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </FlipView.ItemsPanel>

    ---James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年7月1日 1:56
    版主
  • 当然,一定要使用FlipViewer并且不想让箭头显示的话,的确有办法,不过需要修改FlipView的Template,具体可以参考http://code.msdn.microsoft.com/windowsapps/XAML-FlipView-control-0ae45312 例子里面的第五个Sample,修改箭头达到想要的效果。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年7月1日 2:00
    版主
  • 是啊 不过FilpView一开始就把所有图片放到里面去了,因为要定时切换,我想这个效率会比Image要快些啊
    2014年7月1日 2:09
  • 不过Filp在win8下也能使用吗?好像是8.1用的?
    2014年7月1日 2:11
  • 这个还是具体要看你图片量和图片大小的,举个例子来说如果图片大小适中,设备不错,Image加载速度够快,那么何必要Flip呢?Flip或许会有预加载的方式,不过也会影响到程序的运行速度,如果图片量很大,那么Flip的加载速度不一定比Image快。

    另外Flip并不是8.1才有的东西,8.0里面也有,也可以使用哦。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年7月1日 2:29
    版主
  • 不过用FilpView做定时跳转和点击好切换一些,用Image还要判断然后赋值。 大神你给我的代码我下载不了 不知道怎么回事。
    2014年7月1日 2:38
  • 下载不了?不应该啊,我这里可以下载,另外,你使用的是Win8.0还是Win8.1,我提供的代码是适用于Win8.1的,如果你准备写Win8.0的话,应该给你另外一个下载地址。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年7月1日 2:54
    版主
  • 我使用的是8.1 不知道是网络问题还是什么问题 每次都下载一办就失败了-    能把需要改动的地方贴出来吗???
    2014年7月1日 2:57
  • 试试这个,我上传到了Onedrive里面: http://1drv.ms/1iUcyWb


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年7月1日 3:06
    版主
  • 但是找不到你说的那个Sample五种都没找到FilpView标签。 是不是设置不让箭头显示会很麻烦?
    2014年7月1日 3:55
  • <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
                <FlipView x:Name="FlipView5Horizontal" Width="480" Height="270" BorderBrush="Black" BorderThickness="1" Style="{StaticResource FlipViewStyle1}">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                                    <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20"/>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>
                <FlipView x:Name="FlipView5Vertical" Width="480" Height="270" BorderBrush="Black" BorderThickness="1" Style="{StaticResource FlipViewStyle1}" Visibility="Collapsed">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                                    <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20"/>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                    <FlipView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </FlipView.ItemsPanel>
                </FlipView>
            </Grid>

    找到这两个,Filp没有属性控制箭头显示吗 我不知道怎么改。。。

    2014年7月1日 4:00
  • 找到怎么改了,谢谢!结贴。编辑FilpView样式 把他里面的BUTTON都注释就可以了!!
    2014年7月1日 5:14