UI野路子 --- 【一】矢量图
本帖最后由 qiqiminmin 于 2015-12-31 00:44 编辑
我个人很喜欢琢磨UI,因为我真的觉得C#,微软已经做得够好,想要的答案基本都在MSDN上,我用实例提供一些自己往常项目常常用到的UI.( ̄▽ ̄)"。顺便吐槽,我前一段是用html5开发,紧接着这些帖子都会是用xaml,如果和html5比较会感觉到莫名的麻烦(如果一直用xaml,还是会觉得很幸福的)。因为只是经验,仅供参考。
***附件停止解析***
简单介绍有三个界面
【1】欢迎界面
【2】登陆界面
【3】课程浏览主界面
***附件停止解析*** ***附件停止解析*** ***附件停止解析***
先看这个,( ̄▽ ̄)",很多人会好奇的讲,不就是个图吗?有什么稀罕的。看看代码,呵呵,我可没用image
[mw_shl_code=html,true]<Grid Background="{StaticResource main-color}">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel VerticalAlignment="Center">
<ContentControl Background="White" Width="100" Height="100" Template="{StaticResource icon}" Margin="150,0"/>
<Viewbox Width="100" Margin="10 10 10 00">
<TextBlock Opacity="0.5" TextAlignment="Center" Foreground="White" FontSize="30" Text="朗酷听力"></TextBlock>
</Viewbox>
<Viewbox Width="100" Margin="10 0 10 00">
<TextBlock TextAlignment="Center" Foreground="White" Opacity="0.2" FontSize="30" Text="Lang Cool"></TextBlock>
</Viewbox>
</StackPanel>
<Grid Grid.Row="1">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="Grid_Tapped">
<TextBlock Margin="30 20" FontSize="25" Foreground="White" Opacity="0.8">登陆</TextBlock>
</Grid>
</Grid>
</Grid>[/mw_shl_code]
注意一下,我的这个类似于图片的东西,其实是用了 ContentControl, 然后用 Template 调用 icon。那这个icon是什么呢?里面包括图片吗?没有,icon是这样的。
[mw_shl_code=html,true]<ControlTemplate x:Name="icon">
<Viewbox>
<Canvas Width="88" Height="88" RenderTransformOrigin="0.5,0.5" >
<Rectangle Tag="1" Tapped="Rectangle_Tapped" Width="88" Height="88" Fill="White" Canvas.Left="0" Canvas.Top="0" RadiusX="10" RadiusY="10">
</Rectangle>
<Rectangle Tag="2" Tapped="Rectangle_Tapped" Width="64" Height="64" Fill="{StaticResource main-color}" Canvas.Left="12" Canvas.Top="12" RadiusX="10" RadiusY="10">
</Rectangle>
<Path Tag="3" Tapped="Rectangle_Tapped" HorizontalAlignment="Center" Fill="White" Stroke="Transparent" StrokeThickness="0" StrokeLineJoin="Round" Data="m 34 30 v 28 l 23 -14" RenderTransformOrigin="0.5,0.5" >
<Path.Projection>
<PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0" RotationZ="1"/>
</Path.Projection>
</Path>
</Canvas>
</Viewbox>
</ControlTemplate>[/mw_shl_code]
哦,原来是canvas,为什么要说是矢量图呢。
其实,Xaml里的canvas,可以理解为 "功能比较弱的,不稳定的,但是能用的,格式稍有不同的" SVG
假设有个svg文件
[mw_shl_code=html,true]<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<path d="M50,28.794v-7.69l-7.343-1.199c-0.382-1.325-0.91-2.599-1.575-3.802l4.278-6.098l-5.438-5.436l-6.021,4.328 c-1.213-0.675-2.497-1.209-3.83-1.593l-1.28-7.306h-7.69L19.914,7.28c-1.344,0.381-2.629,0.909-3.837,1.576l-6.005-4.29L4.636,10 l4.223,6.038c-0.68,1.222-1.218,2.516-1.605,3.861L0,21.107v7.686l7.242,1.283c0.385,1.344,0.923,2.638,1.605,3.86l-4.28,5.986 L10,45.362l6.047-4.235c1.218,0.674,2.506,1.206,3.845,1.588l1.213,7.287h7.685l1.297-7.307c1.338-0.39,2.62-0.927,3.827-1.603 l6.085,4.27l5.438-5.441l-4.347-6.035c0.666-1.205,1.192-2.48,1.571-3.805L50,28.794z M25,32c-3.86,0-7-3.141-7-7c0-3.86,3.14-7,7-7 c3.859,0,7,3.14,7,7C32,28.859,28.859,32,25,32z"></path>
</svg>[/mw_shl_code]
特别注意,您要根据 viewBox="0 0 50 50",设置自己canvas大小,这里说明我的canvas可以设置为 50, 50
我怎么利用呢,( ̄▽ ̄)",微软虽然没有直接提供以上功能,但是很多 shape,例如 path, circle, line的格式基本上差不多。
比如
SVG:
<path d=""></path>
XAML CANVAS
<Path Data=""></Path>
特别要注意大写。那么这样有什么用呢?呵呵,最有利的地方就是自定义的按钮icon。
[mw_shl_code=html,true]<ControlTemplate x:Name="settingIcon">
<Viewbox>
<Canvas Width="50" Height="50">
<Path Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="M50,28.794v-7.69l-7.343-1.199c-0.382-1.325-0.91-2.599-1.575-3.802l4.278-6.098l-5.438-5.436l-6.021,4.328 c-1.213-0.675-2.497-1.209-3.83-1.593l-1.28-7.306h-7.69L19.914,7.28c-1.344,0.381-2.629,0.909-3.837,1.576l-6.005-4.29L4.636,10 l4.223,6.038c-0.68,1.222-1.218,2.516-1.605,3.861L0,21.107v7.686l7.242,1.283c0.385,1.344,0.923,2.638,1.605,3.86l-4.28,5.986 L10,45.362l6.047-4.235c1.218,0.674,2.506,1.206,3.845,1.588l1.213,7.287h7.685l1.297-7.307c1.338-0.39,2.62-0.927,3.827-1.603 l6.085,4.27l5.438-5.441l-4.347-6.035c0.666-1.205,1.192-2.48,1.571-3.805L50,28.794z M25,32c-3.86,0-7-3.141-7-7c0-3.86,3.14-7,7-7 c3.859,0,7,3.14,7,7C32,28.859,28.859,32,25,32z"></Path>
</Canvas>
</Viewbox>
</ControlTemplate>[/mw_shl_code]
这就是我常用的icon,设置。。。他长这个样子。而且我放大到了800%,依然这么清晰。也就是说,以后软件你如果都用矢量图做icon,是不需要考虑分辨率的。
***附件停止解析***
调用只需要一个简单代码。
<ContentControl Margin="0 10" Background="{StaticResource main-color}" Template="{StaticResource settingIcon}"></ContentControl>
当然要注意小窍门,如果设置矢量图片的颜色呢?
适量图片的对应关系如下
Background => Fill, BorderBrush => Stroke BorderThickness => Stroke-Width
记得在ControlTemplate里加上, 至于Stroke什么的也可以用类似的方面。
Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"
标签: 矢量图
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!
本帖最后由 qiqiminmin 于 2015-12-18 22:09 编辑
Quote***链接停止解析***
虽然不懂,但第二张的登陆界面真的不好看。而且设计成那样方便点击吗?
嗯,是的。 颜色也没想好。
第二张的 "登录按键" 太矮了。
但是再下去就被键盘遮住了,然后在键盘上弄个登陆,也许
***附件停止解析***
其实我觉得 UWP 这个命令栏(AppBar,Windows 8.1 时期微软称其为应用栏)有一个退步,就是不能显示在手机键盘的下方,只能显示在手机键盘的上方。我觉得这样不好。不然用来放“登录”按钮比较合适。现在只能放在键盘上方,总感觉太偏上了。
Quoteqiqiminmin 发表于 2015-12-18 22:04
嗯,是的。 颜色也没想好。
第二张的 “登录按键“ 太矮了。
可以用底部菜单栏或是enter键啊,就像这样***图片停止解析***
Quotetingtongku 发表于 2015-12-18 22:22
可以用底部菜单栏或是enter键啊,就像这样***图片停止解析***
...
UWP 应用中没有底部菜单了。那个菜单只能显示在键盘上方而不是下方,你试试 UWP 智机社区。
Quote***链接停止解析***
可以用底部菜单栏或是enter键啊,就像这样***图片停止解析***
...
enter键是支持的,要是微软能让我把enter改成 “登陆”两个字,就更好的。
以前也喜欢用底部菜单,但是自从有了虚拟按钮后,底部菜单感觉就很奇怪了。给人感觉是两排虚拟按钮。
Quoteqiqiminmin 发表于 2015-12-18 22:28
enter键是支持的,要是微软能让我把enter改成 “登陆”两个字,就更好的。
以前也喜欢用底部菜单,但是 ...
一个横向箭头也不错。
当不知道什么颜色好的时候,Windows 会给你一种选择,那就是“主题色”。不知道什么颜色好,就用主题色。
Quote***链接停止解析***
我只想问我用微软的推出的网页制作wp8.1app,wm10上一直闪退是怎么回事
因为我也很少用微软的网页制作app,不太清楚您的情况。
不过就我自己的体验,wm10上到目前为止还是有不少问题的。
有时候,连 HttpClient, StringBuilder, Webrequest, ItemsControl这些类的运用,这些在wp8.1上没问题的,在wm10上会有问题。这些是属于系统最基本的类了。
Quote***链接停止解析***
一个横向箭头也不错。
当不知道什么颜色好的时候,Windows 会给你一种选择,那就是“主题色”。不知道什 ...
我自己有自己的色板。我一般先选择色板,然后弄界面的。微软的颜色,除了 透明色,黑色,白色,其他的基本都不会用。
只是不同的界面需要自己调。( ̄▽ ̄)",有时候看心情,有时候看手气,有时候自己会觉得舒服就好了。
Quoteqiqiminmin 发表于 2015-12-18 22:56
我自己有自己的色板。我一般先选择色板,然后弄界面的。微软的颜色,除了 透明色,黑色,白色,其他的基 ...
So 你是不认同主题色还是不会用主题色?
本帖最后由 qiqiminmin 于 2015-12-18 23:18 编辑
Quote***链接停止解析***
So 你是不认同主题色还是不会用主题色?
你的软件是你自己的颜色。 为什么要用微软的主题色? 微软的主题颜色不能说丑,喜欢的人应该也多, 我只能说不符合我的要求,我想用 比较黑的底,橘红色的字,或者橘红加白。
但你自己要做自己东西时,就要必须用自己的色板。好坏不说,起码是你自己的。
【1】自己想好色板,( ̄▽ ̄)",虽然很多事美工做,但如果开小作坊,没有美工,必须自己动手,色板一般是自己调,喝喝,那真是手气和感觉。
色板原则大概几个: 灰度:白---黑。 主题颜色 底 字。。。 警告色,正确色, 普通色。
***附件停止解析***
【2】准备好Resource
<SolidColorBrush x:Key="main-color" Color="#fc4c02"></SolidColorBrush>
<SolidColorBrush x:Key="bar-color" Color="#2b2b2b"></SolidColorBrush>
<SolidColorBrush x:Key="item-color" Color="#383838"></SolidColorBrush>
【3】然后最好做到,整个程序的颜色什么的,
只用自己定义好的,这样可以方便自己维护,
什么时候想换风格了,把Resource调整一下就行了。
做个界面可不是对坐标的事,给你的效果图是死的,但是程序可是活的,什么地方用固定长度,什么地方可变,可变之后哪些部分要做什么补救措施之类的,这都是要反复和UI设计人员确认的。
如果真的只是照着坐标填,桌面上的程序随便拉伸一下,你就得哭死。
本帖最后由 qiqiminmin 于 2015-12-21 11:28 编辑
Quote***链接停止解析***
那个图标其实用2个Border1个Path也能做,只是重叠绘制有点多。
( ̄▽ ̄)",有趣。 第一个图为什么那么选择是用容易点的,一开始就用我用复杂的房屋结构SVG,意义不大把,哈哈。您可以注意后面的齿轮。
这个也是矢量图,你有足够的耐心,你也可以用Border,但是,没必要把。何苦呢。 知道怎么把Svg转成自己能用的东西不就得了?
***附件停止解析***
Quoteqiqiminmin 发表于 2015-12-21 11:07
( ̄▽ ̄)“,有趣。 第一个图为什么那么选择是用容易点的,一开始就用我用复杂的房屋结构SVG,意义不大把 ...
SVG这种东西...直接给WebView控件里放就行了。
Quoteqiqiminmin 发表于 2015-12-21 11:07
( ̄▽ ̄)“,有趣。 第一个图为什么那么选择是用容易点的,一开始就用我用复杂的房屋结构SVG,意义不大把 ...
齿轮直接调用字体。FontIcon可以显示矢量的齿轮图像。
本帖最后由 qiqiminmin 于 2015-12-24 23:57 编辑
Quote***链接停止解析***
我找到一个svg库 ***链接停止解析***
This is a work in progress - some SVG files can be loaded, but many do not display correctly!
( ̄▽ ̄)",他们自己说的。 还在开发中,有一些可以读取。
用什么东西最好自己试试,您说的这个库我win2d刚出来的时候我也体验过,稍微复杂点的就不行,而且带有 <defs> <use>的svg几乎都不能用。
基本就是支持path. 您可以看看源代码,几乎和我说的是一个东西。
windows mobile这样利用svg资源的方法,大体有两个
【1】完全用 winjs或者webview开发
【2】在xaml下利用controlTemplate.
svg里信息很多,您可以用 Font里面实现,但是您要记住一旦用font那么字体大多是一个颜色。
这也是利用itemsControl + ControlTemplate实现,很简单。 汽车也只有一个svg, 而且边上的 公交车号也是在svg中的,您可以根据不同的item,画不同的颜色。
而且只是部分的颜色,比如公交车,的玻璃,座椅颜色都没变,比起用字体是不是神奇很多?( ̄▽ ̄)",您可以用图片,如果你喜欢,那么有100躺公交车,难道您准备100躺公交车的颜色?字体就算了,目前应该字体应该没这个功能。
***附件停止解析***
把图放大些,免得你说图小
***附件停止解析***
感兴趣都可以给你bus svg的地址 ***链接停止解析***
我举得只是例子,我也只是谈论一个可行性。 您没必要用。 总之微软官方的东西比较坑,既然知道是坑,自己可以想办法绕开的。
Quote***链接停止解析***
如果用字体,好像表示同样的矢量图标,ttf文件要比svg容量大上很多,是为什么? ...
这样就不太清楚了,是不是有中文字在里面?
svg更倾向于只保存矢量信息。比如画条直线 svg下就是 <line x1=0 y1=0 x2=300 y2=300 />
ttf保存直线就有点像告诉你一个规则,在各种分辨下的布局是什么.
ttf适合批量的,文件不是很大的,模式单一的icon(单色)
svg适合数量少的,模式复杂的icon(彩色)
Quote***链接停止解析***
这样就不太清楚了,是不是有中文字在里面?
svg更倾向于只保存矢量信息。比如画条直线 svg下就是
没太搞明白缩放是按照什么规则来的。。。不知道指定Canvas的尺寸会如何影响缩放?
比如我定义这个:
[mw_shl_code=csharp,false]
<ContentControl Grid.Column="3" Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White">
<ContentControl.Template>
<ControlTemplate>
<Viewbox>
<Canvas Width="12" Height="12">
<Path x:Name="_path0" Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="M32 0h-13l5 5-6 6 3 3 6-6 5 5z"/>
<Path Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="M32 32v-13l-5 5-6-6-3 3 6 6-5 5z"/>
<Path Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="M0 32h13l-5-5 6-6-3-3-6 6-5-5z"/>
<Path Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="M0 0v13l5-5 6 6 3-3-6-6 5-5z"/>
</Canvas>
</Viewbox>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
[/mw_shl_code]
保持ContentControl本身的尺寸不变,将Canvas调整为12x12和32x32,效果完全不同,两个值下ContentControl都是20x20,但是前者的实际显示尺寸要比后者大上很多,而且也是以左上角为原点放大的(试过设置RenderTransformOrigin="0.5,0.5"但是没用)。后者的实际显示尺寸和ContentControl的实际尺寸一致。所以说是不是Canvas尺寸必须大于宿主的实际尺寸才能正好占满空间?
本帖最后由 qiqiminmin 于 2015-12-31 02:29 编辑
哦,我还以为是文件本身呢,是我弄错了,我在这个帖子遗漏了一个重要信息。。 其实我的例子 加入ViewBox,就是希望Canvas可以填满 ParentTemplate.
回到您的例子,我想您的原图应该是32x32的, 如果设置12,那么含义就是, 把32x32的icon, 在(0,0),位置抠出一个 12x12的icon,画在viewBox里面。
如果设置 64x64,那么就是在64x64的画板, (0,0)位置,画一个32x32的icon. 一般不要做什么特殊处理的画,就按照原有svg图的 width height 设置canvas的 width, height.
<Path x:Name="_path0" Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="M32 0h-13l5 5-6 6 3 3 6-6 5 5z"/>
比如您的这个,我可以帮您解释一样,您应该会明白了。
首先以 (32,0) 为起点, h(水平)水平方向 -----> 左移13 ------> 矢量移动 (5, 5), --------> 矢量移动 (-6,6) --------> 矢量移动 (3,3) --------> 矢量移动( 6,-6) ------>矢量移动(5,5)----->z(闭合),呵呵,据我估计,这个是一个箭头吧。整个icon是 四个向外方向的箭头。
矢量移动的意思就是 坐标加减多少, 比如原坐标 (12,14), 矢量移动(-6,6) 就是 (12-6,14+6), 很好理解吧。
您想想,您的画板大小是, 12x12,那么这个Path,都画到画板外面去了,您是看不到的 或者感觉放大了。
Quote***链接停止解析***
哦,我还以为是文件本身呢,是我弄错了,我在这个帖子遗漏了一个重要信息。。 其实我的例子 加入ViewBox, ...
啊,我忽略原svg的大小了。。。这么一说差不多就明白了,多谢多谢
Quote***链接停止解析***
哦,我还以为是文件本身呢,是我弄错了,我在这个帖子遗漏了一个重要信息。。 其实我的例子 加入ViewBox, ...
其实还有个问题,我发现用只用Path画出来的ContentControl,HitTest似乎只对Path的闭合部分生效,比如PointerPressed事件当点击四个箭头中间的空白地段的时候就不会触发,必须点到箭头上才行。
针对这个问题你有什么建议吗?是不是可以在Path外面放一个Grid,或者透明的Rectangle,Border之类的?
本帖最后由 qiqiminmin 于 2015-12-31 02:27 编辑
Quote***链接停止解析***
其实还有个问题,我发现用只用Path画出来的ContentControl,HitTest似乎只对Path的闭合部分生效,比如Poi ...
你发现的这个问题,其实让很多公司出了很多软件。。。。 在ios上有类软件就是教小孩子画画,开始都是黑边的,用手一点某个部分变成某个颜色。 如果用png图片或者其他方式,就会造成触摸层叠,图片常常是矩形,但用ContentControl + Canvas 画path就可实现这种功能。
其实我常用的方法是这样的。这也是我自己用的野路子。。。。。。。。。。。。。。。
ViewBox或者Canvas, 有背景色, rgba = (255,255,255,0.01)
Canvas点击之后,肯定会触发。
放Rect, Grid也是可以得。 不过您可以那手机测试一下,用手触摸,似乎都会默认被触摸的。