Osheep

时光不回头,当下最重要。

PuzzleFileTool项目第二天——Layout设计(2)

制作程序的Theme

UWP中有两个系统的Theme——Light和Dark其实就是白底黑字和黑底白字,做过WPF程序的朋友都知道,我们可以自己定义自己想要的Theme,UWP同样如此。

在自己Project中添加一个文件夹,取名”Theme”,之后在其中添加两个资源字典,一个叫做General另一个则是SystemBrushes。之所以这样做是因为我将所有的Color和Brushes的定义都放在了SystemBrushes中而General中只有Style和Template,这样的好处就是维护起来方便些。当然如果你有更好的想法欢迎补充。

《PuzzleFileTool项目第二天——Layout设计(2)》

Theme目录

作为程序员而言并没有那么熟悉美工的工作,在没有美工的帮助下自己给程序配色稍微有些难度,所以推荐使用http://www.colorhexa.com这个网站,只要输入一个基本色,它就会自己给你生成互补色,相似色,分散互补色,三合一色,单色系,暗调色系,着色系和音色系的颜色集合,你只需要选择自己想要的就行。

如下图:

《PuzzleFileTool项目第二天——Layout设计(2)》

输入基本色
《PuzzleFileTool项目第二天——Layout设计(2)》

互补色,相似色,分散互补色,三合一色,单色系
《PuzzleFileTool项目第二天——Layout设计(2)》

暗调色系,着色系,音色系

开始Localization工作

Localization就是本地化,这样可以让你的程序在不同的语言环境下现实不同的语言,可以方便开拓适用人群。比如你的程序如果同时支持英语和中文,那么所有会这两种语言的人都可以使用。相反如果程序只支持一种语言,那么不会这种语言的人就很难使用这个程序。

UWP的Localiztion相比较而言十分容易,和WPF不同UWP使用的是resw文件,而WPF则是resx,其实两者的Data部分是一样的,只是文件的其他设置有些不同而已。

Localiztion的第一步工作是创建一个Strings文件夹,之后在这个文件夹下创建不同的语言目录,我的这个项目需要中文,英文和俄语三种语言支持,所以我分别创建了en-US,ru-RU和zh-CN目录,如果需要创建其他语言可以查阅MSDN。

《PuzzleFileTool项目第二天——Layout设计(2)》

Localization目录

之后你就可以在Resources.resw中添加你需要的Key和Value了。我没有尝试过修改这个文件的名字,我都是选用VS新建时的默认名字,如果修改是否会有问题我不清楚,如果有了解的人欢迎留言。

在resw文件中添加你需要的本地化的Key和Value,然后在Xaml上设置x:Uid就可以实现本地化。其中需要注意的是resw中的Key如果是要用于x:Uid不可以随便写,需要遵循特定格式。xxx.Label表示用于控件的Label属性,xxx.Content是用于空间的Content属性……

《PuzzleFileTool项目第二天——Layout设计(2)》

resw文件格式

这样在前台设置Localizaiton的工作就完成了,但是有些时候我们无法在前台设置,需要通过后台代码设置,此时我们需要用到ResourceLoader这个帮助我们通过Key获取对应的Value。为了方便起见,我们创建一个LocalizaitonHelper的类专门包装这ResourceLoader。

代码如下:

public static class LocalizationHelper

{

      internal static ResourceLoader loader = new ResourceLoader();

      public static string GetResourceString(string key)

     {

           return loader.GetString(key);

     }

}

当然整个Localization的工作伴随着整个开发过程都在进行。随着之后新的东西加入,Localization文件也会适时更新。

HamburgerMenu

在这个项目中整个Layout就是围绕HamburgerMenu展开,HamburgerMenu完成之后,就可以开始功能制作了。

首先添加:xmlns:tk=”using:Microsoft.Toolkit.Uwp.UI.Controls”,这样才可以使用HamburgerMenu控件。

接着在HamburgerMenu中有两个ItemSource,分别叫做ItemSource和OptionItemSource,区别是ItemSource是显示在左上方的Menu,而OptionItemSource则是显示在左下方。微软的官方有一个列子可以参考添加MenuItem,我则使用了HamburgerMenuGlyphItem而不是自己创建一个MenuItem的Model。因为最终要让Menu显示出来都需要添加Template。

以下代码提供参考

《PuzzleFileTool项目第二天——Layout设计(2)》

ItemSource
《PuzzleFileTool项目第二天——Layout设计(2)》

OptionItemSource
《PuzzleFileTool项目第二天——Layout设计(2)》

用于Template中的Textblock Style
《PuzzleFileTool项目第二天——Layout设计(2)》

HamburgerMenu的ItemTemplate

运行测试

效果如下:

《PuzzleFileTool项目第二天——Layout设计(2)》

HamburgerMenu收起
《PuzzleFileTool项目第二天——Layout设计(2)》

HamburgerMenu展开
点赞