Fuse 之Themes

App offers a setting called Theme, which specifies how standard components in the app will look and feel. You set it like this:

App 标签需要设置属性Theme（主题），可以使用标准的主题组件来展示App的视觉效果，如下所示：

<App Theme="..name of theme..">

If not specified, App uses a plain GraphicsTheme by default.

*如果App标签中不设置Theme的属性值，App组件会使用默认的属性

GraphicsTheme*
NativeTheme
When using NativeTheme, Fuse will use the native controls from the target platform. To use a native theme, do:

使用NativeTheme主题时，Fuse将通过平台使用本地主题控件，下面例子使用了本地主题：

<App Theme="Native">
    <StackPanel>
        <Button />
        <Switch />
        <Slider />
    </StackPanel>
</App>

In this example, the displayed controls will have native appearance on iOS and Android, and no appearance in desktop preview.

上面的例子，通过iOS设备和 Android设备才能看到效果，电脑桌面无法预览效果

If you still want to make use of desktop preview while working with native controls, you can use the NativeWithFallback theme.

如果你想在电脑上显示NativeTheme的主题效果或运行本地主题控件，你可以使用NativeWithFallback主题

This will give you native controls on iOS and Android, while falling back to a (unspecified) basic theme on desktop.

这样的设置可以是你的iOS和Android设备使用原生控件，在电脑端使用的是默认的主题设置

GraphicsTheme
By default, App uses a GraphicsTheme, which will give your app an identical look on all platforms, with the exception of:

GraphicsTheme主题是App的默认主题，这样使得App在所有可运行的设备上保持同一种主题样式，但是下面情况除外：

• Status bars will behave differently across platforms

状态栏在不同的设备上的显示效果不同

• TextInput is a higher-level control and will by default not be rendered since it relies on native platform controls. Either define your own style for this or use a BasicTheme instead.

TextInput是一个更高级别的控件，默认情况下不会被渲染，因为他依赖于本地设备控件，或者你可以自定义样式，或使用BasicTheme来代替

The main benefits of working with GraphicsTheme are:

使用GraphicsTheme 的好处在于：

• You can preview your app on Mac and PC using Fuse's realtime preview window, which offers a much smoother experience than the iOS and Android emulators.

你可以在你的Mac和PC上实时进行预览，比在IOS和Android模拟器上更加顺畅。

• Your designs and animations will look and behave identically on all platforms.

你的设计和动画将在所有平台外观和行为完全相同

Since GraphicsTheme is the default theme, you don’t have to specify this explicitly, but if you did, it would look like this:

*GraphicsTheme 是默认主题，你在App标签中可以不进行设置，如果你想设置，你可以看看下面的示:

<App Theme="Graphics">

Like this, which means exactly the same:

主题的另外一种设置方法

<App>
    <GraphicsTheme />
</App>

Creating your own Graphics Theme

创建自己的主题

It is possible to extend GraphicsTheme to specify specific look and feel for controls like Slider and Button.

在设置特殊的视觉效果时，尽可能的去继承GraphicsTheme 例如滚动条和按钮

You can make your own GraphicsTheme by using it as a base class:

你可以通过一个基类来制作自己的 GraphicsTheme 主题

<GraphicsTheme ux:Class="MyGraphicsTheme">
    <Button>
        <!-- how a button looks goes here -->
    </Button>
</GraphicsTheme>

And use it like this:

使用时这样设置：

<App>
    <MyGraphicsTheme />
</App>

You can also create a global alias for it, like this:

你也可以制作自己的全局主题，如下所示：

<MyGraphicsTheme ux:Global="MyGraphics" />

And then this works:

使用时这样设置：

<App Theme="MyGraphics">
    ...
</App>

BasicTheme
The BasicTheme is a GraphicsTheme that ships with Fuse and gives controls a look and feel inspired by material design. This can be useful
BasicTheme

BasicTheme 主题时从GraphicsTheme 主题过度而来，在视觉效果方面融合了更多的控件，也可以使用BasicTheme 主题

when you want a starting point for UIs that are supposed to look the same on all platforms.

如果你想让App在所有设备上运行效果一样，UIs 这仅仅是一个开始

<App Theme="Basic">

本人英语不好，翻译不当的地方还请多多指教，重在能看懂并用于Fuse开发中，谢谢！