win10 uwp 兴趣线
本文讲的是如何去做一个时间轴样子的东西但我们放的不一定是时间,可能是我们的时间。我把它放在我的CSDN阅读,我的界面做出来很差,但是应该读者能做出很漂亮的。
行间距
我们在ViewModel写一个ObservableCollection,我把它名字叫Str,因为这个是随意的,我们不需要给他他值。
然后在我们的界面,用ListView。
要我们的ListView的Item有和ListView一样的宽度可以简单设置ItemContainerStyle
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
这时,我们在我们的模板写Grid的背景为black
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="Black">
<TextBlock Text="123"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
可以看到行间隔,UWP行间距其实是我们没有设置垂直,因为开始是Center
我们可以使用设置他和宽度一样,其实这里我说错,是水平布局
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
全部代码
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind View.Str}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="Black">
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
兴趣线
我要想说下兴趣线是什么,这个很多人叫时间轴,UWP时间轴的做法其实就是一个ListView。
这是我的CSDN博客阅读,虽然界面做的很渣,但是我想说这个左边的线就是我们要做的。
大家可以看到左边的,其实就是两条线和两个圆。
我们先用Rectangle来画我们第一个线,我们需要他就在中间
HorizontalAlignment="Center"
放在一个Grid的中间就是我们设置水平为center
然后我们在右边放一个Rectangle,如何在Grid放的是一半,我们可以在Grid放一个Grid,使用ColumnDefinitions水平把Grid分左右
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
然后把Rectangle放在右边,注意要设置他的高度和宽度
<Rectangle Grid.Column="1"/>
开始设计我们不知道宽度和高度的值,每次修改都需要改好多个,那么我们如何就修改一个?我们可以使用常亮,也就是我们的Resource
<ListView.Resources>
<!--<x:Double x:Key="LeftListWidth">100</x:Double>-->
<GridLength x:Key="LeftListWidth" >100</GridLength>
<x:Double x:Key="RectangleWidth">6</x:Double>
<SolidColorBrush x:Key="RectangleColor" Color="#FFDA3E3E"></SolidColorBrush>
<!--<SolidColorBrush x:Key="VerticalRectangleColor" ></SolidColorBrush>-->
<x:Double x:Key="EllipseWidth">30</x:Double>
</ListView.Resources>
我首先是定义了左边的宽度,也就是放圆圈的那个Grid宽度,然后定义Rectangle的宽度,作为垂直的Rectangle就是他宽度,水平的就是他高度。
然后定义它的颜色,定义了Ellipse的宽度。
画完了线我们需要画圆
在Grid放一个Grid,然后画一个圆,注意这个圆Stroke为颜色,然后Fill背景颜色
这样就可以让后面的Rectangle被圆不看
然后我们需要在我们的圆再一个小的
<Ellipse Width="10" Height="10"
Fill="{StaticResource RectangleColor}"></Ellipse>
这样就是我们的画法
全部代码
<Grid Margin="0,0,0,0">
<Rectangle Margin="0,0,0,0"
Width="{StaticResource RectangleWidth}"
Fill="{StaticResource RectangleColor}"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"></Rectangle>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="1"
Fill="{StaticResource RectangleColor}"
Height="{StaticResource RectangleWidth}"></Rectangle>
</Grid>
<Grid Width="{StaticResource EllipseWidth}" Height="{StaticResource EllipseWidth}">
<Ellipse Stroke="{StaticResource RectangleColor}" StrokeThickness="6"
Fill="White"></Ellipse>
<Ellipse Width="10" Height="10"
Fill="{StaticResource RectangleColor}"></Ellipse>
</Grid>
</Grid>
做完左边,就去做右边,右边其实就是一个Border里面一个TextBlock,当然里面最好把TextBlock换Grid,注意Margin,这样就好啦。
源代码:https://github.com/lindexi/csdn-uwp
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系。
win10 uwp 兴趣线的更多相关文章
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- Win10 UWP开发系列:实现Master/Detail布局
在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...
- win10 uwp 毛玻璃
毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...
- 【广告】win10 uwp 水印图床 含代码
本文主要是广告我的软件. 图床可以加速大家写博客上传图片的时间,通过简化我们的操作来得到加速. 在写博客的时候,我们发现,我们需要上传一张图片,需要先打开图片,然后选择本地图片,然后上传. 但是我经常 ...
- win10 uwp 渲染原理 DirectComposition 渲染
本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...
- win10 uwp 商业游戏 1.1.5
本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...
- Win10 UWP开发实现Bing翻译
微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...
- Win10/UWP开发—使用Cortana语音与App后台Service交互
上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...
- 【Win10 UWP】后台任务与动态磁贴
动态磁贴(Live Tile)是WP系统的大亮点之一,一直以来受到广大用户的喜爱.这一讲主要研究如何在UWP应用里通过后台任务添加和使用动态磁贴功能. 从WP7到Win8,再到Win10 UWP,磁贴 ...
随机推荐
- 201521123080《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- Java课程设计——计算器
1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 确定课题并进行任务分工 编写计算器删除,清零,清空,小数点 ...
- 201521123079《java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- Log Reservation
本文是在阅读<SQL Server Transaction Log Management>的Chapter 2: Log Internals时发现以往对Log Grows的理解比较片面,大 ...
- Spring在JSP页面使用ServletContext
在 JSP 页面使用Application 可以 看到使用的是WebApplicationContextUtils 而不是WebApplicationContext.ROOT_WEB_APPLICAT ...
- Windows和Linux查看和更改mysql连接池
Windows: 查看: 进入mysql 输入:show variables like '%max_connections%'; 更改: 进入MYSQL安装目录 打开MYSQL配置文件 my.ini ...
- 修改yum源
安装 centos 之后,修改 yum 源到其它国内源 1. 备份原文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Ba ...
- DOM中元素对象的属性方法
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个 文档节点 . 所有的HTML元素都是 ...
- AngularJS -- Bootstrap(启动器)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...
- sdk&jdk&jre
1. jre and jdkJRE(Java Runtime Enviroment)是Java的运行环境.面向Java程序的使用者,而不是开发者.如果你仅下载并安装了JRE,那么你的系统只能运行Jav ...