分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图
话说有一天,临近下班无心工作,在网上看各种文章,阅读到了一篇名为《聊聊大麦网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
- <UserControl
- x:Class="Damai.Windows10.App.AutoRollBannerView"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:local="using:Damai.Windows10.App"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- mc:Ignorable="d"
- d:DesignHeight=""
- d:DesignWidth="">
- <RelativePanel x:Name="layoutRoot" SizeChanged="layoutRoot_SizeChanged">
- <Grid x:Name="gridLeftImage" Width="">
- <FlipView x:Name="flipPre" BorderThickness="" ItemsSource="{Binding}">
- <FlipView.ItemTemplate>
- <DataTemplate>
- <Image Source="{Binding Path=Pic}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None"/>
- </DataTemplate>
- </FlipView.ItemTemplate>
- </FlipView>
- <Rectangle>
- <Rectangle.Fill>
- <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
- <GradientStop Color="Black" Offset=""/>
- <GradientStop Color="#99000000" Offset=""/>
- </LinearGradientBrush>
- </Rectangle.Fill>
- </Rectangle>
- </Grid>
- <Grid x:Name="gridCenterImage" RelativePanel.RightOf="gridLeftImage">
- <FlipView x:Name="flipCenter" BorderThickness="" ItemsSource="{Binding}" SelectionChanged="flipCenter_SelectionChanged">
- <FlipView.ItemTemplate>
- <DataTemplate>
- <Image Source="{Binding Path=Pic}" ImageOpened="ImageCenter_ImageOpened" ImageFailed="ImageCenter_ImageFailed" HorizontalAlignment="Left" VerticalAlignment="Top" Tapped="Image_Tapped"/>
- </DataTemplate>
- </FlipView.ItemTemplate>
- </FlipView>
- <!--导航-->
- <StackPanel x:Name="stackPanelIndex" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,14,14"/>
- <Grid x:Name="gridNoData" Background="#D2D2D2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
- <Image x:Name="ImageNoData" Source="/Assets/Images/Search/pic_Search_NoData.png" Width="" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Center"/>
- </Grid>
- </Grid>
- <Grid x:Name="gridRightImage" RelativePanel.RightOf="gridCenterImage">
- <FlipView x:Name="flipNext" BorderThickness="" ItemsSource="{Binding}" IsEnabled="False">
- <FlipView.ItemTemplate>
- <DataTemplate>
- <Grid>
- <Image Source="{Binding Path=Pic}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None"/>
- <Rectangle>
- <Rectangle.Fill>
- <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
- <GradientStop Color="#FF000000" Offset=""/>
- <GradientStop Color="#99000000"/>
- </LinearGradientBrush>
- </Rectangle.Fill>
- </Rectangle>
- </Grid>
- </DataTemplate>
- </FlipView.ItemTemplate>
- </FlipView>
- </Grid>
- </RelativePanel>
- </UserControl>
后台代码,如何定时滚动等等,请参看之前Zhou同学的文章即可,这里不再赘述,唯一做的就是制作了一个私有方法,在控件的SizeChanged时,还有初始化的时候,调用了一次
- private void Refresh(double width)
- {
- if (this.DataSource == null || _init == false)
- {
- flipCenter.Width = width;
- return;
- }
- if (width <= _imageWidth)
- {
- flipCenter.Height = this.ActualWidth / _scale;
- }
- else
- {
- flipCenter.Height = _imageWidth / _scale;
- }
- double leftWidth = width >= _imageWidth ? (double)(width - _imageWidth) / 2.0 : ;
- gridLeftImage.Width = leftWidth;
- gridLeftImage.Height = flipCenter.Height;
- gridRightImage.Width = leftWidth;
- gridRightImage.Height = flipCenter.Height;
- }
这样,大麦UWP客户端的顶部轮播焦点图,就基本完成了。
后面我会尽力去把自己开发过程中遇到过的问题,以及解决方法记录下来,与大家一一分享,尽量不挖坑,谢谢大家。
分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图的更多相关文章
- 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据
今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...
- 分享大麦UWP版本开发历程-02.内容“高度/宽度”不同的列表展示
一个成型的产品,肯定是经过了产品经理出的UE,美工设计的UI,最终到我们手里Coding,这里面最少3个人,最多就不知道会有多少人参与了.每个人脑子想的都是不一样的,我就不粘贴那个“XX眼中的XX”那 ...
- 第二百五十一节,Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
- Bootstrap 学习笔记 项目实战 响应式轮播图
左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- JavaScript响应式轮播图插件–Flickity
简介 flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线演示及下载 演示地址 下载页面 使用方法 ...
- [UWP]XAML中的响应式布局技术
响应式布局的概念是一个页面适配多个终端及不同分辨率.在针对特定屏幕宽度优化应用 UI 时,我们将此称为创建响应式设计.WPF设计之初响应式设计的概念并不流行,那时候大部分网页设计师都按着宽度960像素 ...
- 分享29个超赞的响应式Web设计
原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...
随机推荐
- dapi 基于Django的轻量级测试平台四 任务设置
QQ群: GitHub:https://github.com/yjlch1016/dapi 一.间隔时间: 二.定时时间: 三.任务设置: 四.任务结果:
- WTL 9.0的变化 - atlctrls.h
atlctrls.h中是对控件的封装. 第1249行增加: void GetMargins(UINT& nLeft, UINT& nRight) const { ATLASSERT(: ...
- 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 ...
- USACO Cow Frisbee Team
洛谷 P2946 [USACO09MAR]牛飞盘队Cow Frisbee Team 洛谷传送门 JDOJ 2632: USACO 2009 Mar Silver 2.Cow Frisbee Team ...
- 【java异常】It's likely that neither a Result Type nor a Result Map was specified
错误原因:mybatis配置文件没有返回类型参数 resultType 解决办法:resultType= 添加
- CLR Exception 0xE0434F4D和0xE0434352的区别
<根据<CLR Exception---E0434352>和<CLR Exception---E0434F4D>这两篇随笔,我们会发现,这两个异常太相似了,除了代码值不一 ...
- # 数位DP入坑
Hdu 2089 不要62 #include<iostream> #include<cstdio> #include<cmath> #include<cstr ...
- 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 ...
- sql server 2016 AlwaysOn实现无域高可用全教程
一.简介环境:小编使用的服务器是windows server 2016(系统服务器) + sql server 2016(数据库服务器)(windows server 2016 + sql serve ...
- 【BigData】Java基础_创建一个订单类
需求描述 定义一个类,描述订单信息订单id订单所属用户(用户对象)订单所包含的商品(不定数量个商品对象)订单总金额订单应付金额: 总金额500~1000,打折85折 总金额1000~150 ...