先引入个小广告: 最近买了台小米盒子折腾下,发觉 UI 还是挺漂亮的,特别是主页那个倒影效果. (图随便找的,就是上面图片底部的那个倒影效果.) 好了,广告结束,回归正题,这个倒影效果我个人觉得是挺不错的,那么有没有办法在 Win10 中实现呢? 稍微分析了一下,大概层次是这样的: 简单点来说,就是倒影显示跟控件显示一样,然后往下翻转,再平移一下就好了.最后再对倒影加个渐变透明就 perfect 了. 翻转.平移都很容易,使用 RenderTransform 就可以了.麻烦就麻烦在如何让倒影的显…

Delphi XE2 新控件 Firemonkey 布局Panel Windows平台VCl TGridPanel TFlowPanel FMX 跨平台 TLayout TGridLayout TFlowLayout TGridPanelLayout fmx的Layout容器比panel节省资源 TGridPanelLayout GridPanelLayout1.GridPanelLayout http://docwiki.embarcadero.com/Libraries/Seattle/en…

SplitView是Win10中的新控件. 用于呈现两部分视图. 一个视图是主要内容,另一个视图是用于导航.(也就是通常说的汉堡菜单.) 主要结构: <SplitView> <SplitView.Content> <!--主要内容--> </SplitView.Content> <SplitView.Pane> <!--汉堡菜单--> </SplitView.Pane> </SplitView> 对应的实例如图…

我们知道,Win10引入了Universal Windows Platform,那么我们针对不同的平台该有不同的布局,此时我们就需要相对布局,就会用到RelativePanel这个控件.我们不再将控件写死,而是根据界面大小来进行控件布局. 首先我们先看一个小例子. 我们可以看到不论界面多大,刷新按钮始终保持在窗口的最中间.这就是相对布局. 接下来,我们看看xaml代码. <RelativePanel> <Button RelativePanel.AlignHorizontalCenter…

工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件,代码少,易阅读,修改拓展方便,也适合新手参考学习. if (typeof jQuery === 'undefined') { throw 'no jquery'; } (function () { window.UE_CONTROL_IDX = 0; $.fn.GetRect = function…

我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是wr说不要这样做. We can move the control by Margin,but using this method is not recommended. 我们可以在xaml写一个Button,然后就使用左键获取鼠标,这个可以去看 win10 uwp 获取按钮鼠标左键按下 http:/…

原文:WPF中Popup控件在Win7以及Win10等中的对齐点方式不一样的解决方案 - 简书 最近项目中使用弹出控件Popup,发现弹出框的对齐方式在不同的系统中存在不同(Popup在win10上是弹出在左边,Win7上是弹出在右边).现在记录解决方案于此: 修改弹出菜单相对于相应菜单项是左对齐还是右对齐 // 解决Popup控件在Win7以及Win10等系统中的对齐点方式不一样的问题(以下两种方法均OK) using System.Reflection;    // 方法一 using Sy…

在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在Github上:https://github.com/Microsoft/UWPCommunityToolkit 包括以下几个类库: 都可以很方便的从Nuget上安装. NuGet Package Name description Microsoft.Toolkit.Uwp 主要包括一些帮助类,如颜色…

学过 WPF 的都知道,在 WPF 中,为控件添加一个阴影效果是相当容易的. <Border Width="100" Height="100" Background="Red"> <Border.Effect> <DropShadowEffect /> </Border.Effect> </Border> 那么这样就会显示一个 100 宽.100 高,背景红色,带有阴影的矩形了.如下图所…

先發個下載地址: http://yunpan.cn/cHuCqYzvsWFAL  访问密码 3470 說明一下.這個示例只是最簡單的演示,並不能提供太大的實用價值. 後面會介紹 Bing & Converter, Trigger, StoryBoard, 自定義控件等等. 那樣使用起來才算是比較得心應手. 先看下截圖. 1.SplitView & AppBar 左邊是ListView,導航欄,右邊是視圖區,使用Frame.Navigate 進行加載一個 Page. 2.Button &am…

TextBox是给用户输入,我们有时要用户只输入数字,而用户输入汉字,我们就有提示用户,那么这东西用到次数很多,我们需要做成一个控件. 我们可以用别人的库,我找到一个大神写的库,很好用 我们使用这个库可以定义很多验证,我记录我如何使用他这个库,还有如何去修改这个库.如何自定义控件做一个和大神做的一样的控件. Nuget 我们用这个库是jamescroft写的,他上传到Nuget,我们可以去下载 用Nuget搜索WinUX.UWP.Xaml.Controls 下载完成就好 使用库 我们经常需要验证…

本文主要讲一个在绘图中,我们会有一个基础的控件,Line.控件的基本使用和他能做出的我们很多时候需要的界面. 虽然是一个简单控件,但是可以做出很诡异的很好看的UI. 首先,我们要知道,Line就是画直线.当然我们画他一般是在Canvas中. 我们先在一个页面新建一下,写下必要的代码. <Grid Margin="10,10,10,10"> <Canvas> </Canvas> </Grid> 首先我们需要确定直线坐标,用X1X2,Y1Y2…

我朋友在做一个控件,是显示异常,那么异常多就变为颜色,大概就是下面的图,很简单 首先是一个Ellipse,然后把他的颜色绑定到Int,需要一个转换,UWP的转换和WPF差不多,因为我现在还不会转换,就不多说. 转换很简单,不过我先说如何使用,控件放在 首先把控件放在xaml,在后台放个int,然后绑定,接着修改这个int就可以看到颜色从绿到红,使用简单. <local:RoundFigureGradual N="{x:Bind N,Mode=OneWay}"></lo…

EllipseGeometry EllipseGeometry控件可以用于绘制椭圆,通过定义EllipseGeometry控件的Center属性确定椭圆的圆心坐标,使用此控件的RadiusX 和RadiusY属性分别定义椭圆X轴.Y轴的半径长度.下面将演示如何使用EllipseGeometry控件绘制一个椭圆. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为EllipseGeometryPage,双击打开此页面的EllipseGeometryPage.xaml文件,在Grid元…

LineGeometry LineGeometry控件通过指定直线的起点和终点来定义线.LineGeometry对象无法进行自我绘制,因此同样需要使用 Path元素来辅助呈现.LineGeometry与Line对象很相似,它们都没有内部面积,不过两者在用法上有些区别,通过定义LineGeometry的StartPoint与EndPoint属性来确定线的起点与终点.下面将演示如何使用LineGeometry绘制一个线形. 下面利用LineGeometry控件绘制一个起点为(300,300)终点为(…

RectangleGeometry 在使用RectangleGeometry控件绘制矩形时,矩形的位置和尺寸由Rect属性定义,该属性指定矩形的相对位置.高度和宽度.Rect有四个参数,前两个参数表示矩形左上角的位置,后两个参数分别表示矩形的宽和高.下面将通过示例演示如何使用RectangleGeometry控件绘制矩形. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为RectangleGeometryPage,双击打开此页面的RectangleGeometryPage.xam…

PathGeometry 前面介绍了Path的使用方法,接下来介绍PathGeometry类.PathGeometry提供了描绘由弧线.曲线和直线组成的多个复杂图形的方法.PathGeometry的核心是PathFigure对象集合,PathFigure自身由一个或多个PathSegment子类对象组成,每个子类对象均描绘几何图形的一个片段.下面列出了PathFigure对象集合中常用的线段类型. LineSegment,在两个点之间创建一条直线. BezierSegment,在两个点之间创建一…

多线形 多线形和多边形类似,不同点在于多线形中最后一个点和第一个点不会默认被连接.在多线形的点集中,可以存在同一个开始点和终结点因而会定义成闭合图形.下面将演示如何使用Polyline控件绘制一个多线形. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为PolylinePage,双击打开此页面的PolylinePage.xaml文件,在Grid元素中添加如下绘制多线形的代码. <Polyline Stroke="Red" StrokeThickness="…

多边形 若要绘制多边形需要用到Polygon元素,并通过定义一系列的点绘制多边形.Polygon类型的对象有Points属性, 这个属性用来定义组成边的点集.在前台代码中,使用空格分隔各个点,然后利用逗号分隔坐标点来定义点坐标.不必为了将起点和终点指定为相同的值而声明闭合点,Polygon类假设要定义闭合形状,并且会自动将终点与起点连起来.下面将演示如何绘制一个多边形. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为PolygonPage,双击打开此页面的PolygonPage…

矩形 若要绘制矩形需要用到Rectangle元素,通过指定Rectangle元素的Width和Height属性值来确定矩形的尺寸.而设置RadiusX和RadiusY属性值能得到圆角的矩形,这两个属性分别表示圆角的x轴方向和y轴方向圆角的大小,RadiusX允许的最大值为Width的一半,RadiusY允许最大的值为Height的一半.矩形有内部空间,若想获得有填充颜色的矩形,需要设置Fill属性为其填充颜色.下面将演示如何绘制一个矩形. 在一个打开的Windows应用商店项目中新建一个空白页,…

椭圆 若要绘制椭圆需要用到Ellipse元素,通过指定Ellipse元素的Width和Height属性值来确定椭圆的大小,其中Width指椭圆在X轴的宽度,Height指椭圆在Y轴的高度,若X轴和Y轴的值相等则可绘制一个正圆.椭圆在UI布局中占据的是大小为Width和Height的矩形区域,图形外围的区域不呈现,但仍是该椭圆空间占位的一部分.下面将演示如何绘制一个椭圆图形. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为EllipsePage,双击打开此页面的EllipsePa…

线形 线形没有内部空间,若要呈现一条直线,需要用Line对象的Stroke和StrokeThickness 属性分别为其轮廓的颜色及轮廓的粗细赋值,若不设置这两个属性,线形将不会呈现.绘制一条线形图形应为代表两个点坐标的属性(X1,Y1)和(X2,Y2)赋值,默认这四项属性的值均为0,点(X1,Y1)代表线的起点,点(X2,Y2)代表线的终点.下面将演示如何绘制一条线形. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为LinePage,双击打开此页面的LinePage.xaml…

Telerik UI Controls for Windows 8 Telerik UI Controls for Windows 8是一套为创建Windows UWP应用而设计的工具集,开发人员可以将其中所提供的控件应用到Windows UWP应用中.按照4.7.1节介绍的步骤搜索并安装此扩展控件后,当在Visual Studio中打开设计器时, 工具箱窗口中会出现名为Telerik RadControls for Windows 8的工具集,其中包括图表.日期选取器.仪表盘等多种控件,下面将…

SemanticZoom控件 SemanticZoom控件由相互关联的缩小视图和放大视图所组成,缩小视图用来显示内容的索引,放大视图可以用来显示内容的详细信息,用户可以根据阅读需要在两种视图之间自由切换. 在XAML文件中,SemanticZoom控件的用法如下所示: <SemanticZoom ...> <SemanticZoom.ZoomedOutView> <!--添加缩小的视图内容--> </SemanticZoom.ZoomedOutView> &…

ListView控件 ListView控件的常用方式是与后台数据进行绑定,并将所绑定的数据内容与前端界面布局相结合,按照特定的顺序将数据集合以列表形式展示在界面当中,如电子邮件列表或搜索结果列表等. 在XAML文件中,ListView控件的用法如下所示: <ListView.../> -或- <ListView...> <!--添加一个或多个组件--> </ListView> 下面介绍一下ListView控件的常用属性: Header属性,获取或设置List…

ScrollViewer控件 ScrollViewer控件包含一个水平和一个竖直滚动条以及一个可滚动的内容显示区域,在显示区域内可以放置其他可见控件.ScrollViewer控件的水平和垂直滚动条两端各有一个箭头,中间有一个可以上下或左右滑动的滑块.当放置在ScrollViewer控件中的内容超出它的边界时,会显示水平或竖直滚动条,通过移动滚动条上的滑块或单击滑动条两端的箭头,可以看到被隐藏部分的内容. 在XAML文件中,ScrollViewer控件的用法如下所示: <ScrollViewer …

Popup控件 在应用程序中使用Popup控件时,通常会先将其设置为隐藏状态,当用户触发应用中已定义的事件时,Popup控件将以弹出窗口的方式显示相关信息来提示用户操作. 在XAML文件中,Popup控件的用法如下所示: <Popup .../> -或- <Popup ...> <!--添加子元素--> </Popup> 下面介绍一下Popup控件的几个常用属性: VerticalOffset属性,获取或设置弹出的Popup控件与页面顶端的竖直距离. Hor…

WebView控件 使用WebView控件可以在应用中添加一个简易的网页浏览器窗口,将指定地址的网页内容显示出来,并可以通过WebView控件所提供的方法.属性及事件,实现如页面导航.HTML文本解析等操作. 在XAML文件中,WebView控件的用法如下所示: <WebView .../> 下面介绍一下WebView控件的几个常用属性: Name属性,获取或设置WebView控件的名称. Source属性,获取或设置在WebView控件中打开的URI地址. 介绍完常用属性后,接着来看一下We…

ToolTip控件 ToolTip控件常作为一些控件的子元素,当鼠标移动到指定控件上时在界面上弹出一个信息提示框.例如,为了节省窗体上的空间或增加美观性,仅在按钮上显示一个指示性图案,当鼠标移动到按钮图案上时,弹出一个解释该按钮功能的文字提示框. 在XAML文件中,ToolTip控件的用法如下所示: <ToolTip .../> -或- <ToolTip ...> <!--添加子元素--> </ToolTip> -或- <ToolTip ...>…

ProgressBar控件 有时候用户需要执行比较复杂的任务,等待任务完成需要很长时间,在等待的过程中一般会使用进度条提示当前任务的执行进度,让用户更好的掌握任务的执行状态,例如在下载资源时会显示下载进度,发送文件时会显示发送进度等.使用ProgressBar控件能够在界面中为用户提供任务进度变化信息. ProgressBar控件分为确定进度条和不确定进度条两种进度显示样式.确定进度条通过从左到右用色块填充的方式表示一个较长操作的进度信息,而不确定进度条使用重复显示的动画证明任务仍在进行中. 在…