新浪微博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

时间: 2024-12-21 07:29:44

新浪微博UWP UI意见征求的相关文章

UWP UI自动化测试(一)------WinAppDriver/Inspect.exe demo

1.首先在启动 WinAppDriver.exe,运行界面: 路径:C:\Program Files (x86)\Windows Application Driver\WinAppDriver.exe 如果不运行它的话,UI自动化工程在运行单元测试的时候,vs 会抛异常: 1 2 3 4 5 6 7 8 /* 先启动 C:\Program Files (x86)\Windows Application Driver\WinAppDriver.exe,否则会抛异常   Unexpected err

UWP ListView添加分割线

先看效果: 我并没有找到有设置ListView分割线的属性 下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步.我的叙述不一定准确 实现的方法就是在DataTemplate里包一个Border 1.首先自定义一个UserControl来实现布局,文件名为ItemView.xaml,代码如下 xaml代码 1 <UserControl 2 x:Class="Demo.UWP.ItemViews.NewsItemView" 3 xmlns="http

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

原文:Win10 UWP开发系列--开源控件库:UWPCommunityToolkit 在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在Github上:https://github.com/Microsoft/UWPCommunityToolkit 包括以下几个类库: 都可以很方便的从Nuget上安装. NuGet Package Name des

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

原文:[UWP]如何使用Fluent Design System (下) 4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall Creators Update之间的兼容. 4.1 使用HamburgerMenu代替NavigationView UWP Community Toolkit中的HamburgerMenu是以前制作汉堡包导航菜单最常用的方案,升

UWP 使用UCT的Markdown控件

原文:UWP 使用UCT的Markdown控件 之前在网上偶然碰到过 一个在线的Markdown Text编辑器 http://mahua.jser.me/,功能很齐全. 然后就突然有了一个大胆的想法 这个玩意要是在uwp中实现,用来做更新日志说明,岂不是美滋滋 嘿嘿嘿,是的,确实美滋滋. 而且不用你亲自去写一个Markdown Text,微软团队的UWP Community Toolkit,已经帮你完成了一切. 在Nuget里面搜索 Microsoft.Toolkit.Uwp.UI.Contr

UWP 图片模糊

原文:UWP 图片模糊 先看一下效果: 这是微识别的个人中心页面,顶部有头像,以及背景图片模糊. 要实现这样的效果,有两种方法. 第一种麻烦点,也是我现在用的.想看简单的,翻到最后 1. 首先看一下xaml代码: <StackPanel Grid.Row="0" x:Name="ibCover" CornerRadius="7"> <Button x:Uid="Button_Cover" Content=&q

New UWP Community Toolkit - Carousel

概述 New UWP Community Toolkit  V2.2.0 的版本发布日志中提到了 Carousel 的调整,本篇我们结合代码详细讲解  Carousel 的实现. Carousel 是一种传送带形态的控件,在图片展示类的应用中有非常多的应用,它拥有很好的流畅度,可以做很多的自定义,并集成了鼠标,触摸板,键盘等的操作.我们来看一下官方的介绍和官网示例中的展示: The Carousel control provides a new control, inherited from t

New UWP Community Toolkit - DropShadowPanel

概述 UWP Community Toolkit  中有一个为 Frmework Element 提供投影效果的控件 - DropShadowPanel,本篇我们结合代码详细讲解  DropShadowPanel 的实现. DropShadowPanel 提供的阴影效果有很多应用场景,比如给文本提供阴影,可以让文本在背景变化时可以明显显示,比如地图上的标尺文本:应用在图形或图片时,可以设置阴影效果,另外它有很多参数可以调整,如阴影偏移,颜色,透明度和阴影模糊半径等,14393 开始支持,下面看看

UWP Button添加圆角阴影(三)

原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx()方法,效率远远不如使用CompositionAnimation. Composition对象的基类CompositionObject拥有一个属性叫ImplicitAnimations,可以通过他实现累死css的transition的效果,也就是对应属性修改的时候,平滑的过渡过去. 可以从DropSh