也是之前写的控件了,模仿NetFlix的河的设计。

大体要求如下:

1. 横向的ListView

2. 左右按钮,可以左右移动河卡片,左右的滚动条不可见

3. 左右按钮仅在鼠标Hover事件中可见

大家可以看下NetFlix uwp版,国内爱奇艺也是这样设计的,芒果TV之前是,但是新版去掉了这种风格。

其实我也是一个菜鸟,一开始纠结怎么写这个控件,怎么传递ItemsSource,而且还在SO上发起了提问

How to customize a horizontal listview with left/right button on uwp?

很遗憾,uwp几乎灭绝,没有人回答我的问题。于是各种寻找,终于发现了大神  Pieter Nijs 

写的文章https://blog.pieeatingninjas.be/2016/01/17/custom-uwp-control-step-through-listview/

大神的需求和我的类似,见图

于是膜拜文章,写下了适合我自己的控件见图:

UWP 带左右滚动按钮的横向ListView———仿NetFlix首页河的设计的更多相关文章

  1. 张高兴的 UWP 开发笔记:横向 ListView

    ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ,但如果我们需要横向显示的 ListView 怎么办? Blend for Visua ...

  2. 简单的横向ListView实现(version 3.0)

    版本号2仅仅是简单的实现了当手指按下的时候listView的Item向左移动一定的距离,并没有随着手指的左右移动而左右滚动.在这个版本号3.0中将会实现随着手指的移动而滚动的目标:当手指向左移动的时候 ...

  3. jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  4. WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

  5. 【传】玩转Android---UI篇---ImageButton(带图标的按钮)

    原文网址:http://hualang.iteye.com/blog/964049 除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首 ...

  6. 去除IE10自带的清除按钮

    最近在工作中碰到了一个问题,原本在IE8,IE9下正常的input表单,在IE10下会出现清除按钮,即表单右侧会出现一个可以清除该表单内容的小叉.由于之前一直没有兼容过IE10,所以我专门搜了下原因. ...

  7. 添加类似navigationController自带的返回按钮

    添加类似navigationController自带的返回按钮,效果如下: 一.UINavigationcontroller自带的navigationBar 是无法添加左箭头的返回按钮的 在网上搜索了 ...

  8. bootstrap带图标的按钮与图标做连接

    bootstrap通过引入bootstrap的JS与css文件,给元素添加class属性即可. 使用图标只需要加入一个span,class属性设置为对应的图标属性即可.图标对应的class属性可以参考 ...

  9. canvas实现点击带水纹的按钮

    咱今天在闲逛网页时,看到一个点击带水纹的按钮特效,尼玛,写的还挺好,先看效果: 于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,so,扒代码! 完整代码在最后,是经过我的改进优化滴. 在这里先 ...

随机推荐

  1. 利用 SASS 简化 `nth-child` 样式的生成

    考察如下的 HTML 片段,通过 CSS 的 nth-child() 伪选择器实现列表的颜色循环,比如每三个一次循环. <ul> <li>1</li> <li ...

  2. Go语言及Beego框架环境搭建

    在开始环境搭建之前,我们先一起来看看: Go有什么优势: 不用虚拟机,它可直接编译成机器码,除了glibc外没有其他外部依赖,部署十分方便,就是扔一个文件就完成了. 天生支持并发,可以充分的利用多核, ...

  3. 网络编程java

    网络编程 1.网络编程概述(1).C/S结构:指客户端与服务端结构,常见程序QQ;(2).B/S结构:指浏览器和服务器的结构;2.网络编程的三要素:*IP地址*端口号*通信协议(UDP/TCP) *I ...

  4. shell读取文件写入新文件

    #!/bin/sh #系统简称 SYST="HVPS" #发送行号 SEND1234SEND=" #接收行号 RECV1234RECV=" cd /home/w ...

  5. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理五 (二十三)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  6. php 加入 unless 语法

    1. php 的版本 :PHP 7.3.0-dev (cli) (built: Mar 18 2018 00:28:55) ( NTS ) 2. unless 语法结构: unless($cond){ ...

  7. [Luogu2879][USACO07JAN]区间统计Tallest Cow

    题目描述 FJ's N (1 ≤ N ≤ 10,000) cows conveniently indexed 1..N are standing in a line. Each cow has a p ...

  8. ‎Cocos2d-x 学习笔记(11.9) FadeTo FadeIn FadeOut

    1. 用处 FadeTo:由正常变透明,是另两个的父类,不支持reverse()方法.FadeIn:变完全不透明.FadeOut:变完全透明. 2. 使用 FadeTo: GLubyte _toOpa ...

  9. SVG系列 - 基础

    标题为SVG基础,但是过于基础的东西就不再熬述啦,可以参考几个学习网址: SVG参考手册:http://www.runoob.com/svg/svg-reference.html MDN SVG:ht ...

  10. java代码实现MD5加密及验证方法

    MD5加密 在我们的程序中,不管是什么,都会有安全问题,今天就说的是MD5加密的方法 MD5是哈希算法,也就是 从明文A到密文B很容易,但是从密文B到明文A几乎不可能 也就是说,给你密文,是几乎无法通 ...