新浪微博UWP UI意见征求
各位园主,卑职最近在忙一些新浪微博UWP的事儿,其中有一些UI上的design和实现,拿出来见见公婆,请大家给个意见: 您是喜欢A还是B。麻烦直接回在评论区了,写A或B,愿意多写几句意见的更欢迎!
先说PC端吧。
方案A:

方案B:

区别是:
1)窗口标题条颜色(灰色 vs. 橘黄色);
2)分割线颜色(灰色 vs. 橘黄色);
3)+按钮的位置(左上角 vs.下方)
在XAML code里,这两种方式其实很容易调整,也就花2分钟:
<Grid x:Name="NavigatorLeftBar" Grid.Row="0" Width="56" Background="#FFF6F6F6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="44"/>
<RowDefinition Height="56"/>
<RowDefinition Height="56"/>
<RowDefinition Height="56"/>
<RowDefinition Height="56"/>
<RowDefinition Height="56"/>
</Grid.RowDefinitions>
</Grid>
看你是想把那个大大的+号放在第一行还是第三行了。当然还要调整一下行高。
原来的开发者在代码里用了MVVM,大概每个Button长这个样子:
<WeiboControls:TabbarControl Grid.Row="1" x:Name="lefttimeLineTabbar" IsChecked="{x:Bind VM.HomeCheck,Mode=TwoWay}" Text="{x:Bind VM.Home}" NormalImageStrUri="{StaticResource imgStr_tabbar_home}" CheckImageStrUri="{StaticResource imgStr_tabbar_home_selected}" GroupName="tabBarLeftGroup" cal:Message.Attach="[Event Click]=[Action ChangedViewItem(0)]" Click="lefttimeLineTabbar_Click" Tag="0"/>
虽然在这篇文章中,https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt628050.aspx,微软并不建议用MVVM,但是无所谓啦,只要developer觉得写代码舒服以后好维护就可以。就本人来说,我根本不用MVVM,code behind挺好的,当然Model还是要有,VM和事件处理直接在code behind里就搞定了,便于阅读理解维护,开发速度还快,因为省了不少代码。
再看看手机端的UI。
方案A在左侧;方案B在右侧。
区别是:
1)状态条颜色(灰色 vs. 橘黄色)
2)标题条分割线颜色 (灰色 vs.橘黄色)

手机上的StatusBar的颜色可以这样搞起:
if (UAPPlatformHelper.IsStatusBarPresent)
{
StatusBar statusBar = StatusBar.GetForCurrentView();
statusBar.ForegroundColor = Colors.Black;
statusBar.BackgroundColor = grayColor;
statusBar.BackgroundOpacity = 1;
}
注意那个BackgroundOpacity,如果设置为0的话,你的设置就没用,颜色不能透出。
麻烦大家给个意见,投个票。谢谢!是不是都在回家的路上了~ 预祝春节快乐!
ms-uap

新浪微博UWP UI意见征求的更多相关文章
- 新浪微博UWP版-实现‘分享功能’的艰难路
索引 介绍 遇到的问题 寻求帮助 最终的解决方案 最终效果 介绍 在整个Team的共同努力下,在众多WPer的期待下,Weibo UWP版终于正式发布了.有关Weibo UWP版更多的信息请大家参考这 ...
- 21、uwp UI自动化测试(WinAppDriver)
使用 UI自动化测试的好处就是在代码逻辑中写好 case 后,来实现 “一劳永逸” 的作用,并且自动化测试能够模拟人工达不到要求,比如快速切换页面.快速点击按钮等,对于提高软件的稳定性很有帮助. 安装 ...
- 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题
原文 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题 虽然微软宣称 Windows 10 将是最后一个 Windows 版本,但由于年代跨越 ...
- Win10 UWP开发系列——开源控件库:UWPCommunityToolkit
在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在G ...
- [UWP]了解模板化控件(8):ItemsControl
1. 模仿ItemsControl 顾名思义,ItemsControl是展示一组数据的控件,它是UWP UI系统中最重要的控件之一,和展示单一数据的ContentControl构成了UWP UI的绝大 ...
- [UWP]实用的Shape指南
在UWP UI系统中,使用Shape是绘制2D图形最简单的方式,小到图标,大到图表都用到Shape的派生类,可以说有举足轻重的地位.幸运的是从Silverlight以来Shape基本没有什么大改动,简 ...
- [UWP]理解及扩展Expander
##1. 前言 最近在自定义Expander的样式,顺便看了看它的源码. Expander控件是一个ContentControl,它通过IsExpanded属性或者通过点击Header中的Toggle ...
- [UWP]了解模板化控件(10):原则与技巧
1. 原则 推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentContr ...
- [UWP]如何使用Fluent Design System (下)
4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall C ...
随机推荐
- android 获取系统联系人 完全解析
一.代码 1.ContactsEngine.java import java.util.ArrayList; import java.util.HashMap; import java.util.Li ...
- 弄个知乎的粒子动态背景_实践particles.js
好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图: 感觉有比格,就照着弄了一个,玩玩. githu ...
- 关于C++的递归调用(n的阶乘为例)
C++,是入门编程界的一门初期的语言.今天我们浅谈一下有关C++的递归调用. 在没有继承,多态,封装之前,C++几乎看成是C语言,除了一些简单的输出和头文件. 具体代码实现如下: #include&l ...
- link和import的区别
1.link是xhtml标签,除了可以加载css外,还可以加载定义其他的事务:@import只属于css的范畴,只能加载css: 2.link引用CSS时,在页面载入时同时加载:@import需要页面 ...
- Servlet下载文件和http响应
下载文件等: 1.得到公共的内容ServletContext sc = this.getServletContext(); 2.在链接名字后面加个? 一个参数?参数1=值 两个参数?参数1=值& ...
- mysql的数据转换
在sql语句中完成对数字类型的数据转换成字符类型的数据.像这次将读取出来的float类型的数据,在进行jsonObject.fromObject(object).toString();这个方法,并没有 ...
- Entity Framework 6, database-first with Oracle
Entity Framework 6, database-first with Oracle 转载自http://csharp.today/entity-framework-6-database-fi ...
- BOOTSTRAP定制
1.补充:栅格系统中调整列的位置/顺序 (1)方法1:偏移量(col-*-offset-*) (2)方法2:对列进行push/pull操作 col-lg-pull-1 ~ ...
- Surfer 软件做等值线图
使用surfer软件做等值线图 Surfer软件美国Golden Software公司编制的一款以画三维图(等高线,image map,3d surface)的软件. Surfer具有的强大插值功能和 ...
- Linux下VFP NEON浮点编译
http://blog.csdn.net/liujia2100/article/details/27236477 NEON:SIMD(Single Instruction Multiple Data ...