各位园主,卑职最近在忙一些新浪微博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意见征求的更多相关文章

  1. 新浪微博UWP版-实现‘分享功能’的艰难路

    索引 介绍 遇到的问题 寻求帮助 最终的解决方案 最终效果 介绍 在整个Team的共同努力下,在众多WPer的期待下,Weibo UWP版终于正式发布了.有关Weibo UWP版更多的信息请大家参考这 ...

  2. 21、uwp UI自动化测试(WinAppDriver)

    使用 UI自动化测试的好处就是在代码逻辑中写好 case 后,来实现 “一劳永逸” 的作用,并且自动化测试能够模拟人工达不到要求,比如快速切换页面.快速点击按钮等,对于提高软件的稳定性很有帮助. 安装 ...

  3. 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题

    原文 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题 虽然微软宣称 Windows 10 将是最后一个 Windows 版本,但由于年代跨越 ...

  4. Win10 UWP开发系列——开源控件库:UWPCommunityToolkit

    在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在G ...

  5. [UWP]了解模板化控件(8):ItemsControl

    1. 模仿ItemsControl 顾名思义,ItemsControl是展示一组数据的控件,它是UWP UI系统中最重要的控件之一,和展示单一数据的ContentControl构成了UWP UI的绝大 ...

  6. [UWP]实用的Shape指南

    在UWP UI系统中,使用Shape是绘制2D图形最简单的方式,小到图标,大到图表都用到Shape的派生类,可以说有举足轻重的地位.幸运的是从Silverlight以来Shape基本没有什么大改动,简 ...

  7. [UWP]理解及扩展Expander

    ##1. 前言 最近在自定义Expander的样式,顺便看了看它的源码. Expander控件是一个ContentControl,它通过IsExpanded属性或者通过点击Header中的Toggle ...

  8. [UWP]了解模板化控件(10):原则与技巧

    1. 原则 推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentContr ...

  9. [UWP]如何使用Fluent Design System (下)

    4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall C ...

随机推荐

  1. MySQL 性能优化的最佳20多条经验分享

    当我们去设计数据库表结构,对操作数据库时(尤其是查表时的SQL语句),我们都需要注意数据操作的性能.这里,我们不会讲过多的SQL语句的优化,而只是针对MySQL这一Web应用最多的数据库.希望下面的这 ...

  2. PHP的继承方法如何获取子类名

    http://blog.csdn.net/zls986992484/article/details/53154097 PHP后期静态绑定问题:例如 <?php class A { functio ...

  3. 安装完ODAC,出现ORA-12560:TNS:协议适配器错误 12541 无监听程序的解决

    进入系统环境变量设置,查看Path路径,发现D:\oracle\product\11.2.0\client_1等路径放到了oracle11g数据库路径前面,将新加入的路径置后即可解决ORA-12560 ...

  4. MFC - 微软基础类库和框架

    一 MFC的概念和作用 1 什么是MFC?? 全称 Microsoft Foundation Class Library我们称之为微软基础类库 1)从硬盘的存在形式上来说 MFC就是一个库(静/动态库 ...

  5. 【Java学习笔记】Map接口的子接口---TreeMap

    TreeMap,与TreeSet类似,可以对集合中的元素进行排序,同时保持元素的唯一性. 应注意,Comparable(实现接口,记得覆盖comparaTo方法),Comparator的使用. imp ...

  6. Unity加载模块深度解析(网格篇)

    在上一篇 加载模块深度解析(一)中,我们重点讨论了纹理资源的加载性能.这次,我们再来为你揭开其他主流资源的加载效率. 这是侑虎科技第53篇原创文章,欢迎转发分享,未经作者授权请勿转载.同时如果您有任何 ...

  7. 解决php中json_decode的异常JSON_ERROR_CTRL_CHAR

    该字符中含了ASCII码ETB控制符,即\x17导致json解析失败 (截图中显示ETB是因为用了Sublime text2) 解决方法如下:去掉0-31的控制符再进行decode $result = ...

  8. linux split 命令 将一个大的文件拆分成若干小文件

    . 以行数拆分 -l 参数: 原始文件 拆分后文件名前缀 例:以50行对文件进行拆分 big.txt small_ 拆分后会生成 small_aa small_ab small_ac ... . 以大 ...

  9. C++Builder设置完BorderStyle的值为none,以后如何实现窗口的移动和拉伸

    在.h 文件中声明变量private: void __fastcall WndProc(TMessage &Msg);// User declarations: 在.cpp中实现下面的函数 v ...

  10. __attribute__((packed))详解

      1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关 ...