Skip to content

WinJS helper: Bind a ToggleSwitch to an AppData settings value (AppSettingToggle)

by Brandon on June 6th, 2013

I expect that one of the most common usages of the WinJS.UI.ToggleSwitch control in a WinJS app is to toggle a setting stored in the handy Windows.Storage.ApplicationData key/value pair stores. Namely, the LocalSettings or RoamingSettings stores. Unfortunately, the ToggleSwitch control doesn’t support data binding to an AppData settings value. But we can make one pretty easily:

AppSettingToggle.js

Include this file in your project, and you can use the new control (derived from ToggleSwitch) like this:

<div data-win-control="BrandonUtils.Controls.AppSettingToggle" data-win-options="{ title: 'Show thingy', settingName: 'ShowThingy'}"></div>

Now you have a ToggleSwitch which initializes itself to the value of the ShowThingy setting from the LocalSettings store. When changed, it updates the corresponding LocalSettings value. You can also use roaming settings by adding the enableRoaming option:

<div data-win-control="BrandonUtils.Controls.AppSettingToggle" data-win-options="{ title: 'Show thingy', settingName: 'ShowThingy', enableRoaming: true}"></div>

Or specify your own lookup function to retrieve a specific settings container:

<div data-win-control="BrandonUtils.Controls.AppSettingToggle" data-win-options="{ title: 'Show thingy', settingName: 'ShowThingy', getSettingContainer: MyAppSettings.getTheRightSettingsContainer}"></div>

From → Technology, WinJS

Comments are closed.