Settings panel: Windows Store Apps JS/HTML and C#/XAML side by side

This post is NOT for Windows Store Apps 8.1 ! Read update here:

Implementing a SettingsFlyout (settings pane) in Windows Store Apps 8.1

In Windows Store Apps the Settings of an app has to be accessed the same way, through the settings charm in the charms bar. Both app and system settings can be accessed there. You add commands to the pane itself, and that’s all you can do with the pane. Each command can invoke one settings panel- a usercontrol you define.

Here are some important things to keep in mind:

• Use one word labels for the entry points
• Max 4 entry points is recommended
• Narrow = 346 pixels
• Wide = 646 pixels.
• Height same as the screen.
• Header : backbutton + name of entry point + app icon, background color same as app tile
• Settingspanel border color should be 20% darker than header color, background should be white.
• Scrolling OK but max twice the height
• No buttons for navigation, commands or commit changes
• No direct actions if entry point is clicked
• Permission command is system-controlled
• Should be a flyout with entrance animation
• Lightly dismissible
• Should be on same side as settings (use SettingsEdgeLocation property)

In JS and Html you set the panel as a data-win-control=“WinJS.UI.SettingsFlyout” with its options to the id of the command and the width can be either narrow or wide. data-win-options="{settingsCommandId:‘about’, width:‘wide’} . In XAML and C# the settingspanel is defined as a popup that is populated with the content you want to use, and you set the width size to either 356 or 646, and there is a little bit more boilerplate code than with JS and Html.

Please note that this image is a montage of three images!

Showing a narrow and wide settings panel in windows store apps, as well as the commands that invokes the panels.

XAML - the UserControl

[sourcecode language=“XML”]

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.Transitions>

</Grid.Transitions>
<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>
<Button Click=“Button_Click_1” Margin=“0,3,0,0” Grid.Column=“0”

HorizontalAlignment=“Left” Style="{StaticResource BackButtonStyle}"/>
<TextBlock Margin=“10,5,0,0” Grid.Column=“1” FontFamily=“Segoe UI”

FontWeight=“SemiLight” FontSize=“24.6667” Text=“Help” HorizontalAlignment=“Left” />
<Image Source="/Assets/icon.png" HorizontalAlignment=“Right” Grid.Column=“2”
[/sourcecode]

The code-behind for the usercontrol

[sourcecode language=“csharp”]
using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls.Primitives;
namespace CSharp_Settings.Settings
{
public sealed partial class Help_Settings
{
public Help_Settings()
{
InitializeComponent();
}

    private void Button\_Click\_1(object sender, RoutedEventArgs e)  
    {  
        if (Parent is Popup)  
            ((Popup)Parent).IsOpen = false;  
        SettingsPane.Show();  
    }  
}

}

[/sourcecode]

Hooking up the command and settingspanel in C#

[sourcecode language=“csharp”]
using CSharp_Settings.Settings;
using Windows.Foundation;
using Windows.UI.ApplicationSettings;
using Windows.UI.Core;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace CSharp_Settings
{
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
_window = Window.Current.Bounds;
Window.Current.SizeChanged += OnWindowSizeChanged;
SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;
}

    private Rect \_window;  
    private Popup \_popUp;  
    private const double WIDTH = 646;  

    private void OnWindowSizeChanged(object sender, WindowSizeChangedEventArgs e)  
    {  
        \_window = Window.Current.Bounds;  
    }  

    private void CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)  
    {  
        args.Request.ApplicationCommands.Add(new SettingsCommand(&quot;help&quot;, &quot;Help&quot;, Handler));  
    }  

    private void Handler(IUICommand command)  
    {  
        \_popUp = new Popup  
                     {  
                         Width = WIDTH,  
                         Height = \_window.Height,  
                         IsLightDismissEnabled = true,  
                         IsOpen = true  
                     };  
        \_popUp.Closed += OnPopupClosed;  
        Window.Current.Activated += OnWindowActivated;  
        \_popUp.Child = new Help\_Settings {Width = WIDTH, Height = \_window.Height};  
        \_popUp.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (\_window.Width - WIDTH) : 0);  
        \_popUp.SetValue(Canvas.TopProperty, 0);  
    }  

    private void OnWindowActivated(object sender, WindowActivatedEventArgs e)  
    {  
        if (e.WindowActivationState == CoreWindowActivationState.Deactivated)  
            \_popUp.IsOpen = false;  
    }  

    private void OnPopupClosed(object sender, object e)  
    {  
        Window.Current.Activated -= OnWindowActivated;  
    }  
}

}
[/sourcecode]

HTML- the help settings, narrow

[sourcecode language=“HTML”]
<!doctype HTML>

HTML- the About settings, wide

[sourcecode language=“HTML”]
<!doctype HTML>

Hooking up the command and settingspanel in javascript

[sourcecode language=“javascript”]
(function () {
“use strict”;
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
“about”: {
title: “About”,
href: “/html/settings_about.html”
},
“help”: {
title: “Help”,
href: “/html/settings_help.html”
}
};
WinJS.UI.SettingsFlyout.populateSettings(e);
};
[/sourcecode]

Settings panel: Windows Store Apps JS/HTML and C#/XAML side by side

Comments