话说有一天,临近下班无心工作,在网上看各种文章,阅读到了一篇名为《聊聊大麦网UWP版的首页顶部图片联动效果的实现方法》(传递:http://www.cnblogs.com/hippieZhou/p/4755290.html),看到别人评论自己做的产品,顿时来了兴趣,阅读过后,hippieZhou童鞋基本把这个自动轮播控件的原理精髓都讲到了,我就在这里,顺着Zhou同学的文章,接着分享一下更细节一点的东西。

今天要跟大家分享的,就是这个简单的控件,在响应式布局里面做的工作。其中有用过微软提供的XAML触发器,也用过土办法,监听Size_Changed事件,林林总总的,感觉处理这个响应式布局,比做后台逻辑费得时间和精力更大。总结下来,两种方式都可以达到最终的效果,使用触发器,在XAML里面,代码少,而且直接操作控件状态,比较赞。但是因为这个控件在缩放过程中涉及到的东西太多,而且需要某些复杂计算,最终权衡下,这个控件还是使用了传统的Size_Changed事件,后台对界面进行操控。

大麦UWP这个轮播控件,在大屏幕(我以后管宽度大于768的,叫大屏幕)的时候,尽可能的去按照比例,最清晰的去展示焦点广告。在中等屏幕(宽度小于768并且大于480)时,随着窗体的变化,保证中间焦点广告显示内容,显示比例不变的前提,压缩或者展开两侧的轮播广告。在小屏幕(屏幕宽度小于480)时,隐藏两侧轮播图,根据当前窗体宽度,按照图片原有比例缩放中央轮播图,效果如下图展示。

看看代码前台代码,其实非常简单,就是之前Zhou同学说的,总共三个FilpView,以及两侧覆盖上去的渐变色。这里需要注意的是,因为要手动控制图片的缩放,所以Stretch都是None

  1. <UserControl
  2. x:Class="Damai.Windows10.App.AutoRollBannerView"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:Damai.Windows10.App"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d"
  9. d:DesignHeight=""
  10. d:DesignWidth="">
  11.  
  12. <RelativePanel x:Name="layoutRoot" SizeChanged="layoutRoot_SizeChanged">
  13.  
  14. <Grid x:Name="gridLeftImage" Width="">
  15.  
  16. <FlipView x:Name="flipPre" BorderThickness="" ItemsSource="{Binding}">
  17. <FlipView.ItemTemplate>
  18. <DataTemplate>
  19. <Image Source="{Binding Path=Pic}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None"/>
  20. </DataTemplate>
  21. </FlipView.ItemTemplate>
  22. </FlipView>
  23.  
  24. <Rectangle>
  25. <Rectangle.Fill>
  26. <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
  27. <GradientStop Color="Black" Offset=""/>
  28. <GradientStop Color="#99000000" Offset=""/>
  29. </LinearGradientBrush>
  30. </Rectangle.Fill>
  31. </Rectangle>
  32. </Grid>
  33.  
  34. <Grid x:Name="gridCenterImage" RelativePanel.RightOf="gridLeftImage">
  35. <FlipView x:Name="flipCenter" BorderThickness="" ItemsSource="{Binding}" SelectionChanged="flipCenter_SelectionChanged">
  36. <FlipView.ItemTemplate>
  37. <DataTemplate>
  38. <Image Source="{Binding Path=Pic}" ImageOpened="ImageCenter_ImageOpened" ImageFailed="ImageCenter_ImageFailed" HorizontalAlignment="Left" VerticalAlignment="Top" Tapped="Image_Tapped"/>
  39. </DataTemplate>
  40. </FlipView.ItemTemplate>
  41. </FlipView>
  42.  
  43. <!--导航-->
  44. <StackPanel x:Name="stackPanelIndex" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,14,14"/>
  45.  
  46. <Grid x:Name="gridNoData" Background="#D2D2D2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
  47. <Image x:Name="ImageNoData" Source="/Assets/Images/Search/pic_Search_NoData.png" Width="" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Center"/>
  48. </Grid>
  49. </Grid>
  50.  
  51. <Grid x:Name="gridRightImage" RelativePanel.RightOf="gridCenterImage">
  52.  
  53. <FlipView x:Name="flipNext" BorderThickness="" ItemsSource="{Binding}" IsEnabled="False">
  54. <FlipView.ItemTemplate>
  55. <DataTemplate>
  56. <Grid>
  57. <Image Source="{Binding Path=Pic}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None"/>
  58.  
  59. <Rectangle>
  60. <Rectangle.Fill>
  61. <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
  62. <GradientStop Color="#FF000000" Offset=""/>
  63. <GradientStop Color="#99000000"/>
  64. </LinearGradientBrush>
  65. </Rectangle.Fill>
  66.  
  67. </Rectangle>
  68. </Grid>
  69.  
  70. </DataTemplate>
  71. </FlipView.ItemTemplate>
  72. </FlipView>
  73.  
  74. </Grid>
  75.  
  76. </RelativePanel>
  77.  
  78. </UserControl>

后台代码,如何定时滚动等等,请参看之前Zhou同学的文章即可,这里不再赘述,唯一做的就是制作了一个私有方法,在控件的SizeChanged时,还有初始化的时候,调用了一次

  1. private void Refresh(double width)
  2. {
  3. if (this.DataSource == null || _init == false)
  4. {
  5. flipCenter.Width = width;
  6. return;
  7. }
  8.  
  9. if (width <= _imageWidth)
  10. {
  11. flipCenter.Height = this.ActualWidth / _scale;
  12. }
  13. else
  14. {
  15. flipCenter.Height = _imageWidth / _scale;
  16. }
  17.  
  18. double leftWidth = width >= _imageWidth ? (double)(width - _imageWidth) / 2.0 : ;
  19. gridLeftImage.Width = leftWidth;
  20. gridLeftImage.Height = flipCenter.Height;
  21.  
  22. gridRightImage.Width = leftWidth;
  23. gridRightImage.Height = flipCenter.Height;
  24. }

这样,大麦UWP客户端的顶部轮播焦点图,就基本完成了。

后面我会尽力去把自己开发过程中遇到过的问题,以及解决方法记录下来,与大家一一分享,尽量不挖坑,谢谢大家。

分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图的更多相关文章

  1. 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据

    今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...

  2. 分享大麦UWP版本开发历程-02.内容“高度/宽度”不同的列表展示

    一个成型的产品,肯定是经过了产品经理出的UE,美工设计的UI,最终到我们手里Coding,这里面最少3个人,最多就不知道会有多少人参与了.每个人脑子想的都是不一样的,我就不粘贴那个“XX眼中的XX”那 ...

  3. 第二百五十一节,Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  4. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  5. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  6. 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  7. JavaScript响应式轮播图插件–Flickity

    简介 flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线演示及下载 演示地址 下载页面 使用方法 ...

  8. [UWP]XAML中的响应式布局技术

    响应式布局的概念是一个页面适配多个终端及不同分辨率.在针对特定屏幕宽度优化应用 UI 时,我们将此称为创建响应式设计.WPF设计之初响应式设计的概念并不流行,那时候大部分网页设计师都按着宽度960像素 ...

  9. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

随机推荐

  1. dapi 基于Django的轻量级测试平台四 任务设置

    QQ群: GitHub:https://github.com/yjlch1016/dapi 一.间隔时间: 二.定时时间: 三.任务设置: 四.任务结果:

  2. WTL 9.0的变化 - atlctrls.h

    atlctrls.h中是对控件的封装. 第1249行增加: void GetMargins(UINT& nLeft, UINT& nRight) const { ATLASSERT(: ...

  3. chromedriver对应chrome版本

    chromedriver版本 支持的Chrome版本 v2.41 v67-69 v2.40 v66-68 v2.39 v66-68 v2.38 v65-67 v2.37 v64-66 v2.36 v6 ...

  4. USACO Cow Frisbee Team

    洛谷 P2946 [USACO09MAR]牛飞盘队Cow Frisbee Team 洛谷传送门 JDOJ 2632: USACO 2009 Mar Silver 2.Cow Frisbee Team ...

  5. 【java异常】It's likely that neither a Result Type nor a Result Map was specified

    错误原因:mybatis配置文件没有返回类型参数 resultType 解决办法:resultType= 添加

  6. CLR Exception 0xE0434F4D和0xE0434352的区别

    <根据<CLR Exception---E0434352>和<CLR Exception---E0434F4D>这两篇随笔,我们会发现,这两个异常太相似了,除了代码值不一 ...

  7. # 数位DP入坑

    Hdu 2089 不要62 #include<iostream> #include<cstdio> #include<cmath> #include<cstr ...

  8. 10-排序6 Sort with Swap(0, i) (25 分)

    Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...

  9. sql server 2016 AlwaysOn实现无域高可用全教程

    一.简介环境:小编使用的服务器是windows server 2016(系统服务器) + sql server 2016(数据库服务器)(windows server 2016 + sql serve ...

  10. 【BigData】Java基础_创建一个订单类

    需求描述 定义一个类,描述订单信息订单id订单所属用户(用户对象)订单所包含的商品(不定数量个商品对象)订单总金额订单应付金额:    总金额500~1000,打折85折    总金额1000~150 ...