使用 Band SDK 和 UWP 自定义 Microsoft Band

概述

这个想法已经被搁置了很长时间，我一直没有时间去追求它，直到上周。我终于坐下来开发了一个 Microsoft Band 自定义应用程序，该应用程序可帮助您利用 Band SDK 并自定义 BandTheme。我知道 Microsoft Health 应用程序允许您使用各种样式自定义 BandTheme，但是，我觉得它在 精细自定义方面受到限制，这激发了我开发这个应用程序，帮助您单独自定义每个 Band Color 类。 我觉得 Microsoft Health 应用程序在 Band 个性化方面缺乏的另一件事 是视觉 UI，它帮助用户解释主题实际上如何影响 Band Tiles。 这个 UWP 应用程序实际上可以帮助用户更好地理解正在自定义的 Band 的组件。
这篇文章将帮助您指导通过用于检索和更新 BandTheme 的 Band SDK 功能。 Band 上存在 8 个颜色类，但是，使用 Band SDK 只能自定义 8 个中的 6 个。

Base
High Contrast
Lowlight
Highlight
Muted
Secondary

连接到 Band

最初的步骤是将配对的 Band 连接到运行您的应用程序的设备。 我们使用 BandClientManager 获取已配对 Band 的列表并连接到第一个 Band。

    // Get the list of paired Bands
    var pairedBands = await BandClientManager.Instance.GetBandsAsync();
    // Connect to the first Band
    band = pairedBands.FirstOrDefault();
    // Connect to the Band and get a new BandClient object
    bandClient = await BandClientManager.Instance.ConnectAsync(band);

检索 Band 主题

PersonalizationManager 允许我们使用 BandTheme 类检索 Band 设备上当前使用的颜色类。 Band Theme 使用 GetThemeAsync 方法检索并存储到 BandTheme 类的对象中。 检索到主题后，通过将 BandColor 转换为 SolidColorBrush 并更新椭圆的 Fill 属性，UI 也会相应地更新。
 

// Retrieve theme from the band
BandTheme bandTheme = await bandClient.PersonalizationManager.GetThemeAsync();

// Update the UI
eBase.Fill = new SolidColorBrush(bandTheme.Base.ToColor());
eHighContrast.Fill = new SolidColorBrush(bandTheme.HighContrast.ToColor());
eHighlight.Fill = new SolidColorBrush(bandTheme.Highlight.ToColor());
eLowLight.Fill = new SolidColorBrush(bandTheme.Lowlight.ToColor());
eMuted.Fill = new SolidColorBrush(bandTheme.Muted.ToColor());
eSecondary.Fill = new SolidColorBrush(bandTheme.SecondaryText.ToColor());

个性化 Band 主题

该应用程序允许用户单独自定义所有 6 个可用的 Band 颜色类。 您可以单击每个类以显示一个颜色对话框。 此颜色对话框为您提供了从 Windows.UI.Colors 中包含的 预定义颜色列表 中选择颜色或输入 自定义颜色十六进制代码 的选项。
每个 Band 颜色类都有自己的行，应用程序 UI 反映了每个 Band 颜色类如何影响 Microsoft Band UI。

从 ComboBox 中选择颜色

目前，有 141 种颜色 可供选择 Windows.UI.Colors，由于该列表是在运行时动态生成的，任何添加到 Windows.UI.Colors 的新颜色都将自动添加到 ComboBox 中。

输入自定义颜色十六进制值

您还可以使用颜色的十六进制值定义自定义颜色。 您可以使用您最喜欢的程序来获取十六进制值，或者使用我非常喜欢的这个很棒的网站 hex-color。 可以带或不带 # 符号输入十六进制代码。

上传 Band 主题

一旦您自定义了 UWP 应用程序 UI，我们需要将主题上传到已连接的 Band 设备。 我们通过单击 接受图标 来执行此操作，该图标调用 SetThemeAsync 方法。 我们使用用户设置的颜色值创建一个新的 BandTheme 对象，然后使用 BandTheme 对象作为参数调用 SetThemeAsync。 成功上传 BandTheme 后，UI 上会显示一条消息。

// Convert user customizations into Band theme.
BandTheme bandTheme = new BandTheme()
{
    Base = ((SolidColorBrush)eBase.Fill).Color.ToBandColor(),
    HighContrast = ((SolidColorBrush)eHighContrast.Fill).Color.ToBandColor(),
    Lowlight = ((SolidColorBrush)eLowLight.Fill).Color.ToBandColor(),
    Highlight = ((SolidColorBrush)eHighlight.Fill).Color.ToBandColor(),
    Muted = ((SolidColorBrush)eMuted.Fill).Color.ToBandColor(),
    SecondaryText = ((SolidColorBrush)eSecondary.Fill).Color.ToBandColor(),
};
// Update Band with the theme.
await bandClient.PersonalizationManager.SetThemeAsync(bandTheme);

 

Microsoft Band 2 上的屏幕截图

视频演练

这里是一个关于如何使用该应用程序的视频教程。 它涵盖了所有步骤，例如检索、自定义和上传主题。 它还涵盖了取消按钮，以防您想放弃更改。

源代码

您可以在 Github bandManager 存储库 以及 Visual Studio 2015 解决方案中找到 源代码。

最后说明

这个 UWP 应用程序是使用 Microsoft Band SDK 与 Band 交互和个性化的一个非常基本的演示。 使用 SDK 可以完成更多事情，例如订阅传感器并使用来自传感器的数据，或更新 MeTile。 此应用程序不使用 RelativePanel 或 VisualState 类来使应用程序动态调整到屏幕大小，因为这不是此应用程序的动机。 如果您仍然遇到任何问题或有任何疑问，请随时发表评论，我很乐意提供帮助。 干杯 :)

原始文章