This project is read-only.

Charm Setting

CharmSetting is a static class that helps you to configure any UserControl as charm bar setting using a single statement. The setting has 1px border, a header and content as the user control. Header uses the setting command label as header text and  the Assets/SmallLogo.png as the small icon. Border colour will be 20% darker than the header colour. The default width of the setting is 346px and apply EntranceThemTransition to the setting flyout. If you need, you can change the default property values using the static properties of CharmSetting class.

Charmbar Setting



Using Charm Setting

To use CharmSetting in your project, add reference to the StoreAppLib project  or install StoreAppLib from Visual Studio "Manage NuGet Packages".

First, you create a UserControl as charm setting for your application. The recommended size for charm setting is 346 or 646. The default charm setting has 1px border. So set your control width to either 344 or 644. To configure the user control as charm setting content, call the AddFlyout method with the charm setting "command label" and "Type" of the UserControl in  the App.xaml.cs file.

CharmSetting.AddFlyout("About StoreAppLib", typeof(AboutStoreAppLib));

The above code shows "About StoreAppLib" as charm setting command label. When you click on the command, an instance of the AboutStoreAppLib user control is shown as charm setting with default configuration.

Use the following code to set width of the charm setting to 346.

CharmSetting.FlyoutWidth = StoreAppLib.CharmSettingFlyoutWidth.Narrow;

Use the following code to set width of the charm setting to 646.

CharmSetting.FlyoutWidth = StoreAppLib.CharmSettingFlyoutWidth.Wide;

Following are the other CharmSetting properties you can use to customize the charm setting.

  • CharmSetting.BorderThickness : Charm setting border. Default is 1px.
  • CharmSetting.BackgroundColor: Content area background colour. Default is white.
  • CharmSetting.HeaderBackgroundColor: Header background colour. Default is Color.FromArgb(255, 0, 77, 96).
  • CharmSetting.HeaderForegroundColor: Header foreground colour. Default is white.
  • CharmSetting.HeaderFontFamily: Header text font family. Default is "Segoe UI".
  • CharmSetting.HeaderFontSize: Header text font size. Default is 26.667.
  • CharmSetting.HeaderFontStyle: Header text font style. Default is Normal.
  • CharmSetting.HeaderRenderTransform: Header text render transorm. Default value align the back button bottom and header text base.
  • CharmSetting.BackButtonForegroundColor: Header back button colour. Default is white.
  • CharmSetting.Icon : Small header icon ImageSource.
  • CharmSetting.Animation : The animation type. By default, EntranceThemeTransition will be applied to charm setting flyout. Set the property to "Content" to apply animation to flyout content instead of animating entire flyout.

If you have any custom action to perform before showing the charm setting flyout, you can do it by defining call back as shown below.

CharmSetting.AddFlyout("Command Id", "Command Label",
new UICommandInvokedHandler(this.OnSettingCommandSelect));

//// Setting command callback
private void OnSettingCommandSelect(Windows.UI.Popups.IUICommand command)
CharmSettingFlyout flyout = new CharmSettingFlyout(
CharmSettingAnimation .Content);     

Last edited Jan 11, 2013 at 1:07 PM by sureshkumart, version 7


No comments yet.